ساخت پاپ آپ در المنتور | طراحی Popup بدون کدنویسی

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

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

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

• بعد از نصب افزونه المنتور به پیشخوان وردپرس وارد شوید و مسیر پیشخوان وردپرس > قالب ها > Pop Up را دنبال کنید.

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

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

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

طراحی و تنظیمات پاپ آپ

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

• در سربرگ تنظیمات، بطور کلی می توانید طرح و ظاهر مانند عرض، ارتفاع، موقعیت افقی/ عمودی، انیمیشن ورودی/ خروجی و دکمه بستن را سفارشی سازی کنید.
• در سربرگ Style می توانید رنگ دکمه pop up ،overlay و close را تنظیم کنید.
• سربرگ Advanced به شما امکان می دهد تا با زمان دکمه بستن و برخی تنظیمات جزئی دیگر، به خوبی کار کنید.

دقیقاً مانند بقیه قالب های Elementor می توانید ابزارک هایی را نیز برای جلوه دادن به ظاهر پاپ آپ خود اضافه کنید.

سربرگ تنظیمات (sttinges)

این سربرگ شامل سه بخش Layout (طرح بندی)، تنظیمات عمومی و Preview Settings می باشد.

– Layout

در قسمت layout عرض، ارتفاع و موقعیت قرار گیری پاپ آپ مشخص می شود. دکمه های Overlay و  Close Button را می توانید فعال یا غیر فعال کنید.

برای ورود و خروج پنجره پاپ آپ یک انیمیشن ورودی و یک انیمیشن خروجی انتخاب کنید و سرعت انیمیشن را تنظیم کنید.

-تنظیمات عمومی

 عنوان پاپ آپ و وضعیت نمایشی آن در تنظیمات عمومی مشخص می شود.

-Preview Settings

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

پس از انتخاب وضعیت نمایشی مجددا برای بروزرسانی و بارگزاری مجدد به layout ارجاع داده می شوید.

سربرگ استایل (style)

– Close button

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

سربرگ پیشرفته (Advanced)

در این سربرگ دو بخش Advanced و Custom CSS قرار دارد.

-Advanced

در این بخش تنظیمات زیر قابل انجام اند:

• Show Close Button After (sec):  دکمه بستن پاپ آپ بعد از زمانی که در این بخش تعیین می کنیم ظاهر می شود.
• Automatically Close After (sec): بعد از چند ثانبه به طور اتوماتیک پس از نمایش مخفی شود.
• Prevent Closing on Overlay : با فعال کردن این گزینه کاربر با کلیک بر روی صفحه قادر به بستن پنجره پاپ آپ نخواهد بود.
• Prevent Closing on ESC key :با فعال کردن این گزینه کاربر با فشردن کلید ESC قادر به بستن پنجره پاپ آپ نخواهد بود.
• Disable Page Scrolling :با فعال کردن این گزینه کاربر قادر به اسکرول صفحه نمایشی پشت پاپ آپ نخواهد بود. 
• Avoid Multiple Popups : با فعال کردن این گزینه اگر کاربر پاپ آپ دیگری را در صفحه مشاهده کرده است، این پاپ آپ پنهان می شود.
• Open By Selector : در این گزینه با استفاده از کلاس های css می توانید عملکرد نمایش پاپ آپ را تنظیم کنید.

-Custom CSS

CSS سفارشی خود را اینجا اضافه کنید.

ذخیره پیش نویس

در گزینه های ذخیره سازی بخش های Display Conditions، Triggers و Advanced rules شرایط دقیقی از نحوه نمایش و زمانبندی نمایش پاپ آپ تنظیم می شود.

• Conditions، تعیین می کند که پاپ آپ در کجا ظاهر شود. مثلا تنظیم کنید که پاپ آپ فقط در صفحه اصلی نمایش داده شود.

•  Triggers، پاپ آپ را بر اساس اقدامات خاص کاربر نمایش می دهد. مانند ثانیه هایی که باید سپری شود تا پاپ آپ اجرا شود، تعداد کلیک هایی که پس از انجام آن پاپ آپ به کاربر نمایش داده شود و…

• Advanced Rules، نمایش پاپ آپ را بر اساس مشخصات دستگاه ورودی، دفعات نمایش، آدرس خاص و.. تنظیم می کند. تنظیماتی مانند تعداد صفحاتی که کاربر باید مشاهده کند تا پاپ آپ نمایش داده شود، حداکثر دفعات جهت نمایش پاپ آپ در صفحه و …

 اگر تصمیم به غیر فعال کردن پاپ آپ را داشتید، می توانید دوباره به مسیر قالب ها > POP UP برگردید و آن را غیر فعال کنید.

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