ساخت پاپ آپ در وردپرس با المنتور

ساخت پاپ آپ در وردپرس با المنتور
به اشتراک گذاری بر روی twitter
به اشتراک گذاری بر روی facebook
به اشتراک گذاری بر روی telegram
به اشتراک گذاری بر روی whatsapp
به اشتراک گذاری بر روی email

چکیده مقاله

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

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

نحوه ساخت پاپ آپ در وردپرس با المنتور ( نسخه پریمیوم)

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

  1. به مسیر داشبورد > قالب ها – Templates > پاپ آپ ها – Popups > افزودن جدید – Add New بروید.
  2. نام قالب خود را وارد کرده و روی ایجاد قالب – Create Template کلیک نمایید.
  3. از کتابخانه المنتور یکی از قالب های از قالب ها را انتخاب کنید و روی گزینه درج – Insert کلیک نمایید.
  4.  روی انتشار – Publish و سپس روی Save and Close کلیک نمایید.
  5. یک برگه جدید در المنتور ایجاد نمایید.
  6. با استفاده از ابزارک button یک دکمه در آن برگه قرار بدهید
  7.  به قسمت طرح بندی و انتخاب لینک > دینامیک – Dynamic > فعالیت ها – Actions > پاپ آپ – Popup بروید.
  8. روی پاپ آپ –  open-Popup< popup  کلیک کرده و پاپ آپی را که ایجاد کردید را انتخاب نمایید.
  9. در آخر اگر به برگه ایجادی بروید و روی دکمه کلیک نمایید مشاهده می نمایید که پاپ آپ اجرا می شود.

ساخت پاپ آپ در وردپرس با المنتور

تنظیمات مختلف در ساخت پاپ آپ با المنتور

تنظیمات

با کلیک کردن روی آیکون چرخدنده آیکون چرخدنده تنظیمات در پنل کناری المنتور تنظیمات مربوط به پاپ آپ به شما نمایش داده می شود این تنظیمات عبارتند از:

ساخت پاپ آپ در وردپرس با المنتور

طرح بندی – Layout

  1. عرض – Width: عرض دقیق پاپ آپ را برحسب PX یا VW را با این گزینه می توانید تغییر بدهید.
  2. ارتفاع – Height: ارتفاع پاپ آپ برحسب اندازه صفحه نمایش، متناسب با محتوا یا به صورت سفارشی با این گزینه قابل تنظیم است.
  3. افقی – Horizontal: موقعیت افقی پاپ آپ را به حالت های راست، وسط و چپ تغییر بدهید.
  4. عمودی – Vertical: موقعیت عمودی پاپ آپ را به حالت های بالا، مرکز و پایین تغییر بدهید.
  5. پوشش – Overlay: نمایش یا مخفی کردن پوشش پشت پاپ آپ با این گزینه امکان پذیر است.
  6. دکمه بستن – Close Button: دکمه خروج از پاپ آپ با این گزینه قابل نمایش یا مخفی خواهد بود.
  7. انیمیشین هنگام ورود – Entrance Animation: با این گزینه انیمیشن موقع اجرای پاپ آپ را می توانید تغییر بدهید.
  8. خروج از انیمیشن – Entrance Animation: انیمیشن خروجی پاپ را از منوی کشوی می توانید انتخاب نمایید.
  9. مدت زمان انیمیشن – Animation Durati: با این گزینه مدت زمان اجرای کامل انیمیشین را تنظیم کنید.

تنظیمات عمومی – General Settings

  1. عنوان – Title: عنوان پاپ آپ خود را در این قست وارد نمایید. این عنوان تنها در محیط مدیریت قابل نمایش است و به کاربر نمایش داده نمی شود.
  2. وضعیت – Status: وضعیت پاپ آپ ایجادی را به وضعیت های پیش نویس، منتشر شده، خصوصی و در انتظار بازبینی می توانید تغییر حالت دهید.

تنظیمات پیش نمایش – Preview Settings

پیش نمایش داینامیک محتوا – Preview Dynamic Content as: برای نمایش محتوای داینامیک از این گزینه می توانید استفاده نمایید. فقط توجه داشته باشید پس از انتخاب محتوای دینامیک صفحه را مجدداً بارگیری نمایید.
نکته : برای این نوع پاپ آپ که در آن با کلیک کردن با یک دکمه ظاهر می شود نیازی به تنظیم شرایط نیست.

استایل – Style

ساخت پاپ آپ در وردپرس با المنتور

  1. نوع پس زمینه – Background Type: رنگ، تصویر و نوع پس زمینه را از این قسمت می توانید تغییر بدهید.
  2. نوع کادر دور – Border Type: شکل کادر دور پاپ آپ را از لیست کشویی به حالت های یکپارچه، دوبل، نقطه ای و …. می توانید تغییر دهید.
  3. شعاع کادر – Border Radius: میزان گرد بود گوشه های در هر طرف از پاپ آپ را با این گزینه کنترل می شود.
  4. سایه کادر – Box Shadow: تنظیمات سایه کادر پاپ را با این گزینه تنظیم نمایید.

پوشش – Overlay

  1. نوع پس زمینه – Background Type: رنگ، تصویر و نوع پس زمینه پاپ آپ را با این گزینه می توانید تغییر بدهید.
  2. دکمه بستن – Close Button
  3. موقعیت – Position: دکمه بستن پاپ آپ را با این گزینه در داخل یا خارج از پاپ آپ نمایش دهید.
  4. موقعیت عمودی – Vertical Position: برای تغییر موقعیت عمودی دکمه خروج از این گزینه استفاده نمایید.
  5. موقعیت افقی – Vertical Position: برای انتخاب موقعیت افقی دکمه خروج از این گزینه استفاده نمایید.
  6. نرمال | هاور – Normal | Hover: حالت ظاهری دکمه بستن را انتخاب نمایید.
  7. رنگ – Color: رنگ دکمه بستن را برای هر دو حالت نرمال و هاور تعیین نمایید.
  8. رنگ پس زمینه – Background Color: رنگ پس زمینه دکمه بستن را تغیین نمایید.
  9. اندازه – Size: اندازه دکمه خروج را تنظیم نمایید.

پیشرفته – Advanced

تنظیمات پیشرفته در ساخت پاپ آپ با المنتور

  1. مایش دکمه بستن بعد از (sec) – Show Close Button After (sec): پس از مدت زمانی که در این قسمت وارد می نمایید دکمه بستن ظاهر می شود.
  2. بستن خودکار بعد از – Automatically Close After (ms): پس از مدت زمانی که در این قسمت وارد می نمایید پاپ آپ به صورت خودکار بسته می شود.
  3. جلوگیری از بستن پاپ آپ با کلیک روی صفحه- Prevent Closing on Overlay: با فعال کردن این گزینه کاربران دیگر با کلیک بر روی صفحه نمی توانند از پاپ آپ خارج شوند.
  4. جلوگیری از بستن پاپ آپ با زدن کلید ESC – Prevent Closing on Overlay: با فعال کردن این گزینه دیگر کاربران با فشردن دکمه Esc نمی توانند از پاپ آپ خارج شوند.
  5. غیر فعال کردن اسکرول صفحه – Disable Page Scrolling: با فعال کردن این گزینه کاربر صفحه پشت پاپ آپ را نمی توانند اسکرول کنند.
  6. اجتناب از چند پاپ آپ – Avoid Multiple Popups: با فعال شدن این گزینه اگر کاربر پاپ آپ دیگری را در صفحه مشاهده کرد این پاپ آپ مخفی می شود.
  7. حاشیه – Margin: حاشیه پاپ آپ را تنظیم نمایید.
  8. دینگ – Padding: پدینگ های پاپ آپ را تنظیم نمایید.
  9. CSS سفارشی : cssهای سفارشی را در این کادر بدون نقطه وارد نمایید.

تنظیم شرایط پاپ آپ در المنتور

پاپ آپ ها، پنجره های فراخوانی برای عملی خواص هستند که در یک شرایط خاصی در صفحه نمایش داده می شوند.پاپ آپ ها به گونه ای طراحی می شوند تا توجه کاربر را به هنگام اجرا به خود جلب کنند این شرایط در المنتور با استفاده از امکانات Conditions، Triggers و Advanced Rules تنظیم می شوند.

چه تفاوتی بین Conditions، Triggers و Advanced Rules وجود دارد؟

با استفاده از امکاناتی که Conditions، Triggers و Advanced Rules در اختیار شما می گذارند می توانید کنترل دقیقی بر زمان و مکان نمایش پاپ آپ داشته باشید.
• Conditions: در کجا ظاهر شود.
Triggers: نمایش پاپ آپ بر اساس اقدامات خاص کاربر
Advanced Rules: نمایش پاپ آپ بر اساس اقدامات غیر کاربر
قوانین –Conditions: در این قسمت می توان تعیین کرد که پاپ آپ در کدام صفحه نمایش داده شود. در این قسمت است که شما می توانید تعیین نمایید که پاپ آپ شما در صفحه اول یا هر صفحه ای، برای یک دسته بندی، برچسب و … نمایش داده شود.
راه انداز – Triggers: اقدامات خاصی را برای کاربران تعریف می کند تا بر اساس آن پاپ آپ به صورت خودکار به کاربر نمایش داده شود.این اقدامات می تواند کلیک کردن، اسکرول کردن، در صورت عدم فعالیت، خروج از صفحه،اسکرول به ویجت و بارگذاری صفحه باشد.
قوانین پیشرفته -Advanced Rules: سایر الزامات برای اجرای پاپ را ارائه می کند.این الزامات می تواند بر اساس نوع دستگاه های مشخص،ورودی ،آدرس خاص، بازدید از صفحه ،دفعات نمایش، کاربران وارد شده باشد.

تنظیمات Conditions

با امکان Conditions شما می توانید تعیین کنید که پاپ آپ شما دقیقا در چه صفحاتی نمایش داده شود. به عنوان با انتخاب Front<Singular می توانید تعیین کنید که تنها پاپ آپ ایجادی شما به کاربرانی که در صفحه اصلی حضور دارند نمایش داده شود.

تنظیمات Conditions در المنتور

تنظیمات Triggers

Triggers شرایطی هستند است که تعیین می کنید بر اساس آن پاپ آپ شما اجرا شود این شرایط عبارتند از :

تنظیمات Triggers در المنتور

  1. در بارگذاری صفحه On Page Load-: اگر روی دکمه بله – Yes کلیک نمایید می توانید تعداد ثانیه های که باید سپری شود تا پاپ آپ اجرا شود را وارد نمایید.
  2. در اسکرول – On Scroll: اگر روی دکمه بله – Yes کلیک نمایید، مسیر حرکت اسکرول و مقدار پیشمایش صفحه بر اساس درصد را برای نمایش پاپ آپ می توانید تنظیم نمایید.
  3. در اسکرول به ویجت – On Scroll To Element: فعال کردن این گزینه و وارد کردن آی دی CSS Selector باعث می شود که هنگامی که کاربر به سلکتور تعین شده شما رسید پاپ آپ به او نمایش داده شود. شما همچنین باید CSS ID مربوطه را در تب پیشرفته – Advanced به المان مورد نظر اضافه کنید.
  4. در کلیک – On Click: با این گزینه می توانید تعداد کلیک های که باید انجام شود تا پاپ آپ به کاربر نمایش داده شود را تعیین نمایید.
  5. بعد از عدم فعالیت – After Inactivity: با فعال کردن این گزینه می توانید تعیین نمایید در صورتی که کاربر پس از یک مدت زمان مشخص فعالیت خاصی نداشت، پاپ آپ به او نمایش داده شود.
  6. هنگام خروج از صفحه – On Page Exit Intent: با فعال کردن این گزینه هنگام خروج کاربر از صفحه پاپ آپ به او نمایش داده می شود.

قوانین پیشرفته – Advanced Rules

این بخش سایر قوانین مربوط به اجرای پاپ آپ را به صورت پیشرفته تر را در اختیار شما قرار می دهد این قوانین عبارتند از :

قوانین پیشرفته در المنتور

  1. نمایش پس از مشاهده X صفحه – Show after X page views:با فعال کردن این گزینه تعداد صفحاتی که کاربر باید مشاهده کند تا صفحه به اون نمایش داده شود را می توانید وارد نمایید.
  2. نمایش پس از x جلسه – Show after X sessions: با فعال کردن این گزینه تعداد دفعاتی که کاربر مشاهده می نمایید تا پاپ آپ به او نمایش داده می شود را می توانید تعیین نمایید.
  3. نمایش تا X بار – Show up to X times: حداکثر دفعات جهت نمایش پاپ آپ در این صفحه قابل تعیین است.
  4. هنگام ورود از URL خاص – When arriving from specific URL: با فعال کردن این گزینه ، اگر کاربر از آدرس های که وارد کرده اید به صفحه مراجعه کند پاپ آپ به او نمایش داده می شود.
  5. نمایش هنگام ورود از – how when arriving from: با استفاده از این قسمت می توانید تعیین نمایید که اگر کاربر از موتور جستجو، لینک خارجی و لینک داخلی مراجعه به یک صفحه مراجعه کردند پاپ آپ به او نمایش داده شود.
  6. مخفی برای کاربران وارد شده – Hide for logged in users: در صورتی که می خواهید پاپ آپ شما به کاربرانی که در سایت وارد شده اند نمایش داده نشود از این گزینه استفاده نمایید.
  7. نمایش در همه دستگاه ها- Show on devices: در صورتی که می خواهید پاپ شما در در دستگاه های خاصی مانند دسکتاپ، تبلت و موبایل نمایش داده شود از این گزینه استفاده نمایید.

نکته: پاپ آپ ها نمی توانید بیش از یک بار نمایش داده شوند اگر کاربر صفحه را مجدداً بارگیری نکند یا وارد نشود.

کنترل پاپ آپ با تریگرهای دستی در المنتور

پاپ آپ ها در المنتور می توانند به صورت دستی شروع به کار کنند. از لینک های داینامیکی هم می توانید برای باز کردن یا بسته شدن پاپ آپ ها استفاده نمایید. در صفحات مختلف هر عنصر می توانید یک سلکتور منحصر به فرد (class, ID or data-element) داشته باشد تا هنگام کلیک بر روی این عناصر پاپ آپ تعین شده نمایش داده شود.
• از لینک هر المانی، داینامیک – Dynamic > اقدامات – Actions > پاپ آپ – Popup را انتخاب نمایید. پس از آن در قسمت تنظیمات اگر می خواهید با کلیک بر روی لینک پاپ آپ باز شود گزینه بازکردن پاپ آپ – Open Popup و برای بسته شدن پاپ آپ گزینه بستن پاپ آپ – Close Popup را انتخاب نمایید. در صورتی که گزینه بستن پاپ آپ را انتخاب می نمایید یک گزینه نمایش داده می شود که با فعال کردن آن دیگر پاپ آپ دوباره نمایش داده نمی شود.
• از روی فرم المنتور، در قسمت واکنش بعد از ارسال – Actions After Submit > افزودن واکنش – Add Action >پاپ آپ – popup را انتخاب نموده و درقسمت بعدی نیز گزینه بازکردن یا بستن پاپ آپ را انتخاب نمایید.
سلکتور سفارشی :هرعنصری در المنتور می تواند یک سلکتور داشته باشد که با استفاده از آن می توان شرایط پاپ آپ را تعیین نمود. برای اینکار روی ویرایش عنصر مورد نظر کلیک کرده و به تب پیشرفته – Advanced رفته و به آن عنصر یک نام کلاس –class ( بدون نقطه قبلی) یا نام آی دی (بدون #) بدهید. در قسمت تنظیمات Conditions پاپ آپ مورد نظر هم گزینه های شامل – includes > منحصر به فرد – Singular > برگه ها – Pages > عنوان برگه خود را انتخاب نمایید. به این صورت هنگامی که یک کاربر از آن صفحه بازدید می کند و روی آن عنصر کلیک می نمایید پاپ آپ به او نمایش داده می شود. از این روش برای نمایش یک پاپ آپ از فهرست، درون مطالب، ابزارک ها یا هر جای دیگری بدون استفاده از ابزارک های المنتور می توان استفاده کرد.

نکته: هنگامی که از یک سلکتور یک پاپ آپ ایجاد می کنید حتماً لازم نیست که عنصر مورد نظر یک لینک داشته باشد. هر عنصر غیر قابل کلیکی مانند یک متن ساده را می توان برای نمایش پاپ آپ تنظیم کرد. فقط توجه داشته باشید که تریگرها –Triggers و قوانین پیشرفته – Advanced Rules در این حالت کار نخواهند کرد.

 

به اشتراک گذاری بر روی facebook
به اشتراک گذاری بر روی google
به اشتراک گذاری بر روی twitter
به اشتراک گذاری بر روی linkedin
به اشتراک گذاری بر روی telegram
به اشتراک گذاری بر روی whatsapp
به اشتراک گذاری بر روی email
به اشتراک گذاری بر روی print

دریافت مقالات ناب

مقالات شبیه مقالات بالا رو هر هفته میفرستیم به ایمیلتون

دیدگاهتان را بنویسید

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

× پشتیبانی آنلاین