چگونه پاپ آپ بسازیم؟ ساخت پاپ آپ در وردپرس با افزونه popup maker [آموزش قدم به قدم و تصویری]

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

پنجره های پاپ آپ یا Popup چیه؟

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

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

ساخت پاپ آپ در وردپرس با : افزونه popup maker

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

آموزش کار با افزونه

نصب پلاگین

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

در صفحه باز شده در سمت چپ داخل کادر جستجو عبارت popup maker را همانند تصویر وارد کنید تا گزینه های مورد جستجو در بخش پایین ظاهر شوند. سپس در سمت راست افزونه ظاهر می شود (با کادر قرمز رنگ مشخص شده است)، بر روی دکمه “هم اکنون نصب کنید” کلیک کنید تا افزونه وارد مرحله نصب شود.

نصب بنابر سرعت اینترنت شما کمی شاید طول بکشد. بعد از نصب یک دکمه آبی رنگ فعال می شود که شما باید بر روی دکمه “فعال کردن” کلیک کنید تا افزونه فعال شود.

تنظیمات افزونه

بعد از نصب افزونه باید با تنظیمات آن آشنا بشیم. وقتی که افزونه را نصب و فعال می کنید، در سمت راست در داشبورد وردپرس منویی جدید اضافه می شود که عنوانش هست “PopUp Maker” بر روی این منو که با کادر قرمز رنگ مشخص شده است کلیک کنید.

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

1. Popups : در این قسمت تمامی پاپ آپ هایی که با این افزونه ساختید نمایش داده می شوند. یعنی اگر شما یک popup بسازید، در این قسمت نمایش داده می شود و می توانید آن را ویرایش و یا حذف کنید.
2. Popup Themes : در این قسمت هم قالب هایی که ساختید قرار داده می شوند. منظور از قالب ها اینه که، یک ساختار کلی طراحی می کنید و می توانید برای تمامی پاپ آپ ها از این طرح ها استفاده کنید.
3. Addons and Integrations : در این افزودنی های افزونه قرار میگیرند. این افزودنی ها می توانند امکاناتی به افزونه Popup Maker اضافه کنند.
4. Add New Popup Theme : برای اضافه کردن یک قالب و یا یا ساختار پاپ آپ می توانید بروی این دکمه کلید کنید.
5. Add New Popup : برای اضافه کردن یک پاپ آپ  می توانید بروی این دکمه کلید کنید. یعنی اگر بخواهید یک پنجره پاپ آپ طراحی کنید باید بر روی این دکمه کلیک کنید.

افزودن پاپ آپ به وردپرس

برای این کار بر روی گزینه “Add Popup” کلیک کنید. با صفحه ای همانند تصویر زیر مواجه می شوید که در این صفحه گزینه هایی موجود است. که در ادامه تمامی این گزینه ها را توضیح می دهیم.

• شماره 1 : در این فیلد باید یک نامی برای پاپ آپ خودتون انتخاب کنید. البته منظور از نام این است که، این نام در قسمت “All Popups” نمایش داده می شود و در داخل پنجره نمایش داده نمی شود (توصیه میشه که اگر popup های زیادی دارید برای این قسمت یک نام منحصر به فرد ایجاد کنید).
• شماره 2 : در این قسمت باید یک عنوان انتخاب کنید. این عنوان در بالای پنجره شما نمایش داده می شود و باید عنوانی مربوط به پنجره خودتون وارد کنید.
• شماره 3 : در قسمت سوم باید محتوای پنجره پاپ آپ خودتون رو درست و ویرایش کنید. برای این کار می توانید از ادیتور وردپرس استفاده کنید. همچنین می توانید از تصویر، ویدئو و یا متن در پنجره خودتون استفاده کنید.
• شماره 4 : در قسمت 4 گزینه های زیادی موجود است که در ادامه این گزینه ها را برای شما شرغ و توضیح می دهیم.
• شماره 5 : محتوای خودتون رو ایجاد کردید بر روی دکمه “انتشار” کلیک کنید تا پاپ آپ شما منتشر شود.
• شماره 6 : اگر می خواهید یک پیشنمایش از پنجره طراحی شده مشاهده کنید بر روی دکمه “Preview” کلیک کنید.

قسمت Popup Settings 

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

Triggers :

در این قسمت می توانید نحوه باز شدن پاپ آپ را تنظیم کنید. در این قسمت بر روی دکمه “Add New Triggers ” کلیک کنید.

در صفحه باز شده همانند تصویر بالا 2 گزینه وجود دارد :

1. Click Open : زمانی که این گزینه را انتخاب کنید پنجره پاپ آپ با اولین کلیک کاربر در وب سایت باز می شود.
2. Time Delay / Auto Open : با انتخاب این گزینه پنجره به صورت خودکار بعد از بارگذاری وب سایت به نمایش در می آید.

سپس گزینه مورد نظر خودتون رو انتخاب کنید و بر روی دکمه “Add” کلیک کنید.

Targeting :

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

شماره 1 : در این قسمت مشخص می کنید که popup شما در کدام صفحات نمایش داده شود. می توانید پنجره هدف رو یک نوشته، برگه و یا صفحه اصلی و یا حتی تمامی صفحات انتخاب کنید.

شماره 2 : اگر تیک این گزینه را فعال کنید، پاپ آپ شما در موبایل نمایش داده نمی شود.

شماره 3 : با انتخاب این گزینه پاپ آپ در دستگاه تبلت نمایش داده نمی شود.

Display : 

در این قسمت تنظیمات مربوط به نحوه نمایش قرار دارد یعنی پاپ آپ چگونه در صفحه سایت نمایش داده شود.

• گزینه Appearance : در این قسمت می توانید یک قالب برای پنجره پاپ آپ خودتون انتخاب کنید. می توانید از قالب های پیشفرض و یا از قالب های ساخته شده توسط خودتون استفاده کنید.
• گزینه Size : در این بخش می توانید اندازه صفحه پنجره Popup رو تنظیم کنید. یعنی در چه اندازه ای نمایش داده شود.
• گزینه Animation : در این بخش می توانید یک افکت انیمیشن برای صفحه خود انتخاب کنید.
• گزینه Position : در این قسمت می توانید موقعیت پاپ آپ را تنظیم کنید. یعنی در کجای وب سایت و صفحه نمایش داده شود.
• گزینه Advanced : در این بخش هم تنظیماتی اضافه وجود دارد که می توانید باز هم این گزینه ها را تنظیم کنید.

Close : 

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

زبانه Button : در این بخش می توانید دکمه “بستن” رو به پاپ آپ خودتون اضافه کنید و وقتی که کاربر با پنجره مواجه شد دکمه ای وجود داشته باشه تا بتونه از اون خارج بشه. در فیلد Close Text باید متن دکمه بستن رو وارد کنید. در قسمت Close Button Delay می توانید دیرکرد بستن پنجره رو بر حسب میلی ثانیه وارد کنید.

زبانه : Alternate Methods : در این بخش می توانید برای خارج شدن از پنجره برای کاربر دکمه کیبورد تعریف کنید و اگر دکمه های ESC و یا F4 کیبورد را فشرد از پنجره خارج بشه.

در قسمت Advanced هم تنظیماتی اضافه وجود دارد که می توانید بر روی پنجره پاپ آپ اعمال کنید. چون کاربردی نبودند در این آموزش شرغ داده نشده.

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

جمع بندی نهایی

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

سربلند باشید …