ایجاد پاپ آپ حرفه ای در وردپرس با Layered Popups + آموزش کامل

1026 بازدید
سه شنبه ۵ مرداد ۱۳۹۵
ایجاد پاپ آپ حرفه ای در وردپرس با Layered Popups + آموزش کاملReviewed by جواد نبوی on Jul 26Rating: 5.0

ایجاد پاپ آپ حرفه ای در وردپرس

برای دادن خبری مهم به کاربران سایت و یا تبلیغ یک محصول مهم، راه های مختلفی وجود دارد. اما اکثر این راه ها نتیجه دلخواه ما را در بر ندارند. چرا که اغلب توجه کاربران به بخش های محتوایی جلب می شود و خیلی به قسمت هایی که شبیه تبلیغات هستند و یا به نظر فایده ای برای کاربر ندارند، توجه نمی کنند. برای حل این مشکل یک راهکار بسیار پرکاربرد وجود دارد. آن هم استفاده از پنجره های پاپ آپ (Popup) است. این پنجره ها، باکس (جعبه) هایی هستند که به محض ورود کاربر به سایت, برای او باز می شوند و اطلاعاتی را به کاربر نشان می دهند. کاربر هم پس از دیدن آن می تواند آن را ببندد یا روی لینک های موجود در جعبه کلیک کند. برای ساخت پاپ آپ در وردپرس، راه های گوناگونی وجود دارد. از برنامه نویسی اختصاصی گرفته تا افزونه های متعدد. اما همه اینها مشکلات خاص خودشان را دارند. امروز میخواهیم کامل ترین افزونه ایجاد پاپ آپ در وردپرس را به شما معرفی کنیم که توسط آن می توانید پاپ آپ هایی اختصاصی طراحی کرده و آن ها را برای خودتان سفارشی سازی کنید. این افزونه که Layered Popups نام دارد، امکان ایجاد پاپ آپ به صورت لایه ای را به شما میدهد. به طوریکه هر گونه پاپ آپی که دلتان میخواهد می توانید بدون کد نویسی ایجاد کنید. با این آموزش از وب تستر همراه باشید.

آموزش افزونه Layered Popups

امکانات افزونه Layered Popups

توسط این افزونه می توانید انواع کادر های پاپ آپ را ایجاد نمایید. کادر متنی، فرم، عکس، لینک، فرم دریافت ایمیل، فرم خبرنامه، ثبت نام، ویدیو، دکمه های شبکه های اجتماعی و هر چه که فکرش را بکنید در این افزونه قابل انجام است.

ایجاد پاپ آپ لایه بندی شده با Layered Popups

ابتدا افزونه Layered Popups را از اینجا دانلود کرده و نصب و فعال نمایید. راهنمای نصب و فعالسازی افزونه های وردپرس.

پس از فعالسازی افزونه، از منوی سمت راست وردپرس به مسیر Create Popup « Layered Popups بروید.

افزونه Layered Popups

در صفحه باز شده، درون تب General، یک سری تنظیمات برای ایجاد پاپ آپ جدید می بینید. این تنظیمات را یک به یک برای شما توضیح میدهیم.

تنظیمات بخش General Parameters

در بخش General Parameters تنظیماتی همانند تصویر زیر می بینید. این تنظیمات، یک سری تنظیمات کلی و اصلی برای پاپ آپ جدید شما است. اول باید این ها را انجام دهیم.

افزونه Layered Popups

Title: در این قسمت عنوان پاپ آپ را مشخص کنید. این عنوان در پنجره پاپ آپ شما نمایش داده نمی شود، بلکه تنها نامی است که اطلاعات پاپ آپ با آن ذخیره شود.

Basic size: طول و عرض پنجره اصلی پاپ آپ را تنظیم کنید. توجه داشته باشید که تمام اطلاعات و محتویات پاپ آپ درون فضایی با اندازه ای که در اینجا مشخص می کنید قرار می گیرند و چیزی از آن بیرون نمیزند.

Position: مکانی که پنجره پاپ آپ درون صفحه قرار میگیرد را مشخص کنید. معمولا وسط بهترین گزینه است.

Disable overlay: اگر گزینه موجود در این قسمت را تیکدار کنید، پرده سیاهی که پشت پاپ آپ قرار گرفته و سایر قسمت های صفحه (به جز خود پاپ آپ) را در سایه می اندازد، نمایان نمیشود.

Overlay color: رنگ پرده سیاه را مشخص کنید. رنگ اصلی سیاه است. اگر رنگ دیگری انتخاب کنید، دیگر پرده سیاه نخواهد بود! پس پرده سیاه یک اصطلاح است. ممکن است اصلا سیاه هم نباشد ولی اصطلاحا در اینجا می گوییم پرده سیاه!

Overlay opacity: درجه شفافیت پرده سیاه را تعیین می کند. هر چه این عدد بزرگتر باشد، شفافیت پرده کم تر بوده و اجزا زیر آن کمتر معلوم هستند.

Overlay animation: در منوی کشویی موجود در این قسمت، نوع انیمیشنی که پرده سیاه با آن وارد صفحه می شود را انتخاب کنید. در حالت پیشفرض روی گزینه Fade قرار گرفته. یعنی به صورت ملایم در صفحه ظاهر می شود.

Extended closing: اگر گزینه این قسمت تیکدار باشد، کاربر با کلیک روی پرده سیاه یا فشردن کلید ESC در صفحه کلید، میتواند پنجره پاپ آپ را ببندد.

Extended submission: اگر گزینه موجود در این قسمت تیکدار باشد، در صورتی که فرمی درون پنجره پاپ آپ قرار گرفته باشد، کاربر با فشردن کلید اینتر در صفحه کلید میتواند فرم را تایید کرده و ارسال کند.

تنظیمات بخش Popup Constructor

در این بخش میتوانید پنجره پاپ آپ خود را به صورت کاملا اختصاصی و لایه بندی شده ایجاد کنید. در این قسمت شکلی همانند تصویر زیر می بینید:

افزونه Layered Popups

توجه داشته باشید که نقطه چینی که در شکل بالا می بینید، همان فضایی است که در مرحله قبل اندازه اش را تعیین کرده بودید. کلیه اطلاعات پنجره پاپ آپ شما در فضایی به اندازه این نقطه چین، جای می گیرد.

حال به توضیح نحوه ایجاد پاپ آپ با این سیستم می پردازیم.

ابتدا روی گزینه Add Layer کلیک کنید.

پنجره ای همانند تصویر زیر برای شما باز می شود:

 

ایجاد پاپ آپ اختصاصی در وردپرس

هر کدام از عناصر موجود را که انتخاب کنید، پنجره دیگری برایتان به نمایش در می آید که باید اطلاعات و تنظیماتش را طبق سلیقه خودتان کامل کنید. مثلا من روی عنصر Rectangle کلیک می کنم و میخواهم یک کادر مستطیلی شکل ایجاد کنم که درونش متن قرار گرفته. با کلیک روی این عنصر، یک کادر بزرگ در سمت راست صفحه برای تنظیمات این مستطیل باز می شود. شکل زیر را ببینید:

ایجاد پاپ آپ در وردپرس

در این قسمت باید تنظیمات مربوط به مستطیلی که ایجاد کردید را انجام دهید.

Layer Details

در بخش Title عنوان آن را وارد کنید. این عنوان درون خود مستطیل و پنجره پاپ آپ قرار نمی گیرد.

در قسمت Content محتوایی که درون کادر مستطیلی قرار می گیرد را وارد کنید. چیزی که در این قسمت وارد می کنید، درون کادر و پنجره پاپ آپ قرار می گیرد و نمایش داده می شود.

در بخش Size باید اندازه طول و عرض کادر مستطیلی را مشخص کنید. این اندازه نمیتواند بزرگتر از اندازه ای باشد که در تنظیمات اصلی پنجره پاپ آپ انجام داده بودید.

در قسمت Position هم مکان کادر مستطیلی درون محدوده پنجره پاپ آپ را مشخص کنید.

Text and Font

در قسمت Font باید نوع فونتی که متن درون کادر با آن نوشته می شود را تعیین کنید. در صورتی که گزینه Inherit را انتخاب کنید، فونت پیشفرض قالب شما به عنوان فونت متن درون کادر استفاده می شود.

قسمت Color مربوط به رنگ متن درون کادر در حالت عادی و قسمت Color:hover مربوط به رنگ متن درون کادر، در زمانی است که موس رویش قرار گرفته.

بخش Size مربوط به اندازه متن و قسمت Weight مربوط به توپر بودن یا نبودن متن یا همان Bold بودن متن است.

Shadow size مربوط به اندازه سایه متن و Shadow color مربوط به رنگ سایه متن است. در قسمت Alignment میتوانید راست چین، وسط چین یا چپ چین بودن متن را تعیین کنید. همچنین H-Padding و V-Padding فاصله متن از بالا و پایین و چپ و راست را تعیین می کند.

افزونه Layered Popups

Background

در این بخش، تنظیمات مربوط به پس زمینه کادر مستطیلی شکل را انجام دهید. تنظیماتی مانند رنگ پس زمینه، شفافیت آن، قرار دادن عکس در پس زمینه و … .

Border

اینجا میتوانید برای کادر تان مرز یا حاشیه مشخص کنید و ویژگی های آن مانند رنگ و … را تعیین کنید.

Box Shadow

اگر دوست دارید کادر مستطیلی شکل تان سایه داشته باشد، ویژگی های آن را اینجا تعیین کنید. اگر تیک Enable Box Shadow را بزنید، تنظیمات مربوطه برایتان به نمایش در می آید. اگر این تیک را نزنید، باکس تان سایه نخواهد داشت.

Animation

در اینجا تعیین کنید که باکس مستطیلی به چه شکلی وارد صفحه شود. در واقع انیمیشن آن را مشخص کنید. مثلا میتوانید کاری کنید که از یک سمت صفحه با سرعت وارد صفحه شده و در وسط قرار گیرد. به صورت پیشفرض، انیمیشن Fade in تعیین شده است. یعنی ابتدا کم رنگ است و بعد از کمتر از یک ثانیه، واضح و مشخص می شود.

مثلا تنظیماتی که من انجام داده ام به شکل زیر است:

آموزش افزونه Layered Popups

نتیجه اش هم تا اینجا به شکل زیر است:

ساخت پنجره پاپ آپ در وردپرس

حالا می خواهم یک عکس به این پنجره پاپ آپم اضافه کنم. برای انجام اینکار دوباره روی گزینه Add Layer کلیک می کنم.

سپس در کادر باز شده، روی عنصر Image کلیک کنید. پنجره کوچکی باز می شود که در آن باید عکس مورد نظرتان را انتخاب کنید. میتوانید آدرس یک عکس را در فیلد Image URL وارد کنید یا اینکه با کلیک روی دکمه Media Library یک عکس جدید آپلود کنید. برای انجام اینکار، روی دکمه Media Library کلیک کرده و در پنجره باز شده، روی تب بارگذاری پرونده ها کلیک کنید. سپس دکمه گزینش پرونده ها را بفشارید. حال عکس مورد نظرتان را از درون کامپیوتر خود انتخاب کرده و دکمه Open را بزنید. پس از آپلود شدن فایل، روی دکمه گزینش کلیک کنید.

حال در پنجره کوچک قبلی، میبینید که آدرس عکس در فیلد Image URL جای گرفته. میتوانید یک لینک نیز به عکس بدهید. برای اینکار آدرس مقصد را در فیلد URL وارد کنید. در نهایت روی دکمه Create Layer کلیک کنید.

دانلود افزونه Layered Popups

می بینید که عکس درون پنجره پاپ آپ قرار گرفته. میتوانید با دراگ کردن، جای آن را تغییر دهید. همچنین با آوردن ماوس روی گوشه پایین سمت راست عکس، میتوانید سایز آن را تغییر دهید. کادر بزرگی هم همانند مرحله قبل، در سمت راست صفحه ایجاد شده که امکان ایجاد تغییرات بیشتری را به شما می دهد.

آموزش افزونه Layered Popups

حال من میخواهم یک دکمه به این پنجره پاپ آپ اضافه کنم. برای اینکار، دوباره روی دکمه Add Layer کلیک می کنم.

این دفعه روی عنصر Linked Button کلیک کنید. در پنجره کوچکی که باز می شود، در قسمت Label، متنی که میخواهید درون دکمه قرار بگیرد را وارد کنید. در قسمت URL هم آدرس لینک مقصد را وارد کنید. در نهایت در قسمت Color رنگ دکمه دلخواهتان را انتخاب کرده و روی دکمه Create Layer کلیک نمایید.

آموزش ساخت پاپ آپ در وردپرس

حال که دکمه ایجاد شد، با دراگ کردن می توانید آن را جا به جا کنید. همچنین میتوانید آن را تغییر سایز داده و ویژگی های دیگرش را تعیین کنید.

بعد از اتمام ساخت محتویات درونی پنجره پاپ آپ، باید یک دکمه بستن نیز ایجاد کنیم. بدین منظور، روی گزینه Add Layer کلیک کنید.

عنصر Close Icon را انتخاب کنید و روی دکمه Create Layer کلیک نمایید. با دراگ کردن جای آن را تغییر داده و به گوشه بالا سمت راست یا چپ کادر بیاورید.

دانلود افزونه Layered Popups

خب در اینجا ایجاد پنجره پاپ آپ به اتمام رسید. کافیست آن را ذخیره کرده و در محل دلخواه مان استفاده کنیم.

تنظیماتی که در بخش Native Form Parameter قرار گرفته اند، مربوط به زمانی است که فرمی درون پنجره پاپ آپ تان قرار داده باشید. در این صورت باید تنظیمات موجود در این بخش را انجام دهید. در غیر اینصورت این بخش را بدون تغییر رها کنید. تنظیمات بخش Social Buttons Parameters هم مربوط به زمانی است که دکمه های شبکه های اجتماعی را در پاپ آپ قرار داده اید. اگر اینکار را نکردید تنظیمات این بخش را هم بدون تغییر باقی بگذارید.

در پایان، روی دکمه Save popup details کلیک کنید.

قرار دادن پاپ آپ در صفحه اصلی ، مطالب یا برگه ها

اگر میخواهید پاپ آپی که درست کردید در همه صفحات سایت شما به نمایش در آید به مسیر Layered Popups » Settings بروید.

در این صفحه، در بخش OnLoad Settings در قسمت For Desktops منوی کشویی را باز کرده و نام پاپ آپی که در مراحل قبلی ساخته بودید را انتخاب کنید. این نام همان Title ای است که در اولین مرحله وارد کرده بودید. سپس در قسمت Display mode گزینه Every time را برگزینید. در نهایت روی دکمه Save settings کلیک کنید.

پاپ آپ در وردپرس

حال میتوانید به صفحه اصلی یا هر صفحه دیگری از سایتتان بروید و پاپ آپی که ساختید را مشاهده کنید.

اگر میخواهید پاپ آپی که ساخته اید را فقط در مطلب یا برگه خاصی نمایش دهید، اصلا مرحله بالا را انجام ندهید. کافیست به صفحه ویرایش آن مطلب یا برگه بروید. سپس کمی صفحه را به پایین اسکرول کنید و در قسمت Layered Popups Events Settings و بخش Onload Settings تنظیمات را همانند تصویر زیر انجام دهید:

Layered Popups

در نهایت نوشته یا برگه تان را ذخیره کرده و منتشر کنید. میتوانید پاپ آپی که من ایجاد کردم را در اینجا ببینید.

افزونه Layered Popups

امیدوارم از این آموزش لذت برده باشید. این افزونه فوق العاده است. متاسفانه به علت کمبود فضا و طولانی نشدن نوشته، امکان توضیح تک تک قسمت های افزونه نبود. اما خودتان با آن کار کنید و چیز های جدیدش را کشف کنید. پیشنهاد می کنم اگر میخواهید لینک های دانلود سایتتان را به صورت پاپ آپ به ایمیل کاربران بفرستید مقاله فرستادن لینک دانلود به ایمیل کاربران در وردپرس را مطالعه کنید.

لينک دانلود:

تبلیغات

نویسنده (مدیر سایت)

جواد نبوی هستم. حدود 7 سالی میشه در زمینه طراحی وب و گرافیک کار می کنم و بعد از توپ دیزاین، این دومین سایت آموزش طراحی وب و گرافیک هستش که راه انداختم. امیدوارم بتونم برای همه ی شما مفید باشم.

11 دیدگاه برای “ایجاد پاپ آپ حرفه ای در وردپرس با Layered Popups + آموزش کامل”

  1. abbas گفت:

    سلام میشه با این افزونه وقتی موس روی قسمتی از مطلب یا یک عکس رفت اون موقع پاپ اپ عمل کند

    1. جواد نبوی گفت:

      سلام
      خیر امکانش نیست. اما با افزونه Anything Popup میتونید در صورت کلیک روی لینک، پاپ آپ ایجاد کنید. آموزش این افزونه در لینک زیر هست:
      http://webtoaster.ir/%D8%A7%D8%B1%D8%B3%D8%A7%D9%84-%D9%84%DB%8C%D9%86%DA%A9-%D8%AF%D8%A7%D9%86%D9%84%D9%88%D8%AF-%D8%A8%D9%87-%D8%A7%DB%8C%D9%85%DB%8C%D9%84/

  2. afshin گفت:

    سلام
    این آموزش خیلی عالی بود، ممنون، واقعا زحمت کشیدید.
    اگر امکان داره راجع به قسمت «Display mode» را بیشتر توضیح بدید.
    با تشکر

    1. جواد نبوی گفت:

      سلام دوست عزیز
      خواهش می کنم لطف دارید
      در قسمت Display mode یک گزینه Every time هستش که یعنی همیشه با باز شدن صفحه، کادر پاپ آپ اجرا می شه. گزینه بعدی یعنی Once per session پاپ آپ رو هر فصل یکبار اجرا می کنه. گزینه بعدی هم میتونید مشخص کنید که هر چند روز یکبار کادر پاپ آپ باز بشه. در گزینه آخر هم کاری می کنید که فقط یکبار کادر پاپ آپ اجرا بشه. البته همه این موارد و گزینه ها مربوط به یک شخص یا آی پی هست و مثلا اگر گزینه یک بار در هر فصل انتخاب بشه، یک کاربر در هر فصل فقط یک بار پاپ آپ رو می بینه.
      باز هم اگر سوالی بود در خدمتم
      با آرزوی موفقیت

  3. afshin گفت:

    جناب نبوی سلام و ممنون از جواب کاملتون
    پاپ‌آپم را روی Every time قرار دادم ولی نمیدونم چرا توی لپ‌تاپم نمایش داده نمیشه در صورتی که در کامپیوتر دوستانم هر بار که وارد سایتم میشند، نمایش داده میشه.
    ممنون میشم اگر راهنمایی کنید.

    1. جواد نبوی گفت:

      خواهش می کنم

      شما یک بار از اکانت مدیریت خارج بشید و سایت رو باز کنید ببینید مشکل همچنان هست؟
      اگر بود یکبار Ctrl + F5 رو بزنید تا کش صفحه خالی بشه. احتمالا باید برطرف بشه.

  4. سئو سایت گفت:

    تشکر عالی بود فقط اگر کدش هم به صورت جاوا دارید بذارید با تشکر

    1. جواد نبوی گفت:

      خواهش می کنم
      چشم حتما

  5. سایت کلشی گفت:

    http://s8.picofile.com/file/8294112350/photo_2017_05_06_10_21_15.jpg

    با سلام
    من همچین چیزی نیاز دارم
    تا به سایت میاد یه صفحه مثل این بیاد بالا بعد از ۳۰ ثانیه
    و
    بعد با کلیک روی بنر به داخل کانال تلگرامی بره

    ممنون میشم راهنمایی کنید

    1. جواد نبوی گفت:

      سلام عزیز
      با همین افزونه ای که معرفی کردیم میتونید همچین کاری رو انجام بدین. یه دور آموزش رو مطالعه کنید نحوه کار دستتون میاد
      موفق باشید

  6. علی گفت:

    سلام و تشکر

    بسیار مفید و کاربردی بود و کار من رو راه انداخت – با تشکر از شما

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *