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

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

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

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

پاپ آپ حرفه ای

با افزونه Layered Popups چه کار ها ای می توان انجام داد؟

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

نحوه ساخت پاپ آپ حرفه ای با Layered Popups

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

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

پاپ آپ حرفه ای

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

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

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

پاپ آپ حرفه ای

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

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

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

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

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

Overlay color: اگز تصمیم گرفتید که از یک لایه رنگی پشت پاپ آپ خود استفاده کنید، در این جا می توانید رنگ لایه مورد نظر را انتخاب کنید.

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

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

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

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

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

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

پاپ آپ حرفه ای

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

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

ابتدا روی گزینه 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 فاصله متن از بالا و پایین و چپ و راست را تعیین می کند.

پاپ آپ حرفه ای

Background

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

Border

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

Box Shadow

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

Animation

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

برای مثال تنظیمات مورد نظر ما به این شکل خواهد بود:

پاپ آپ حرفه ای

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

پاپ آپ حرفه ای

اضافه کردن عکس به پاپ آپ

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

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

همانطور که مشاهده می کنید آدرس عکس مورد نظر شما در فیلد Image URL جای گرفته است.علاوه بر این شما می توانید یک لینک نیز برای عکس خود مشخص کنید. برای اینکار آدرس مقصد را در فیلد URL وارد کنید. در نهایت روی دکمه Create Layer کلیک کنید.

پاپ آپ حرفه ای

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

در ادامه بخوانید:
نمایش آخرین مطالب وردپرس با تصویر

پاپ آپ حرفه ای

اضافه کردن دکمه به پاپ آپ

برای اینکار، دوباره روی دکمه Add Layer کلیک می کنم.

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

پاپ آپ حرفه ای

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

ایجاد دکمه بستن برای پاپ آپ

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

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

پاپ آپ حرفه ای

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

تنظیماتی که در بخش 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 تنظیمات را همانند تصویر زیر انجام دهید:

پاپ آپ حرفه ای

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

پاپ آپ حرفه ای

جمع بندی

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

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

نرم افزار باشگاه مشتریان, طراحی سایت اختصاصی، نرم افزار مالی سپیدار

۵۶ ۲۸۴ ۲۸۴ (۰۲۱)