اشتراک گذاری

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

پاپ آپ‌ها ابزاری هستند که به واسطه آن‌ها می‌توان پیام‌های ویژه‌ای مانند اطلاعیه‌های ویژه، پیشنهادهای تخفیف، فرم‌های ثبت‌نام یا دعوت به اقدام (Call to Action) را به‌طور ناگهانی به بازدیدکنندگان نمایش داد. یک پاپ آپ طراحی‌شده می‌تواند باعث افزایش نرخ تبدیل، بهبود تعامل کاربران و جمع‌آوری اطلاعات مهم بازدیدکنندگان شود.

چرا بدون افزونه جانبی؟

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

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

آماده‌سازی و نیازمندی‌ها

الف) نصب المنتور

ابتدا مطمئن شوید که المنتور (نسخه رایگان یا پرو) در سایت وردپرس شما نصب و فعال است. برای نصب المنتور به بخش «افزونه‌ها» در پیشخوان وردپرس رفته، افزونه المنتور را جستجو و سپس نصب و فعال کنید.

ب) شناخت محیط کاربری المنتور

در محیط کاربری المنتور، شما با نوار ابزار سمت چپ (شامل ویجت‌ها، تنظیمات Style و Advanced) و بخش پیش‌نمایش زنده در سمت راست کار می‌کنید. این محیط به شما اجازه می‌دهد تا بدون نیاز به نوشتن کد، طرح اولیه صفحه را طراحی کنید. اما برای ساخت پاپ آپ، ما نیازمند افزودن کدهای سفارشی هستیم.

پ) ابزارهای مورد نیاز

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

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

طراحی ساختار پاپ آپ

الف) اجزای اصلی یک پاپ آپ

یک پاپ آپ حرفه‌ای معمولاً شامل موارد زیر است:

باکس اصلی پاپ آپ: که شامل محتوا، دکمه بسته شدن و استایل‌های پس‌زمینه می‌شود.
متن و عناصر گرافیکی: مانند عنوان، توضیحات، تصویر یا آیکون.
دکمه‌ها: مانند دکمه «بستن»، «ثبت‌نام» یا «ادامه مطلب».
لایه پس‌زمینه تار: برای تمرکز کاربر بر روی پاپ آپ، معمولاً یک پس‌زمینه نیمه شفاف (Overlay) به کار می‌رود.

ب) طراحی ساختار HTML

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

در این ساختار:

#popup-overlay: لایه پس‌زمینه پاپ آپ که کل صفحه را پوشش می‌دهد.
#popup-box: جعبه اصلی پاپ آپ که شامل محتوا می‌شود.
.popup-close: دکمه بستن پاپ آپ که با کلیک بر روی آن پاپ آپ بسته می‌شود.
popup-title، popup-text و popup-button: عناصر متنی و دکمه جهت نمایش محتوا.

استایل‌دهی به پاپ آپ با CSS

الف) استایل‌دهی به لایه پس‌زمینه

برای ایجاد یک پس‌زمینه تار و نیمه شفاف که پاپ آپ را برجسته کند، از کد CSS زیر استفاده کنید:

در اینجا:

از position: fixed برای ثابت نگه داشتن پس‌زمینه استفاده شده است.
display: none باعث می‌شود که پاپ آپ به صورت پیش‌فرض نمایش داده نشود و با فراخوانی جاوا اسکریپت، فعال شود.

ب) استایل‌دهی به باکس اصلی پاپ آپ

برای طراحی جعبه اصلی پاپ آپ از کد زیر استفاده می‌کنیم:

این استایل باعث می‌شود تا پاپ آپ دارای ظاهر مدرن، گرد و با سایه ملایم باشد.

max-width: برای محدود کردن عرض پاپ آپ در دستگاه‌های بزرگ استفاده می‌شود.
box-shadow: جهت ایجاد عمق و برجستگی طراحی به کار رفته است.

پ) استایل‌دهی به دکمه بستن

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

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

ت) استایل‌دهی به متن‌ها و دکمه‌ها

برای تیتر و متن پاپ آپ:

این استایل‌ها اطمینان می‌دهند که متن‌ها و دکمه‌ها خوانا و جذاب هستند.

افزودن کدهای JavaScript برای کنترل نمایش پاپ آپ

برای کنترل نمایش و بسته شدن پاپ آپ، باید از JavaScript استفاده کنیم. کد زیر نمونه‌ای از این کنترل را نشان می‌دهد:

html

<script>

  // تابعی برای نمایش پاپ آپ

  function showPopup() {

    document.getElementById('popup-overlay').style.display = 'flex';

  }
  // تابعی برای بستن پاپ آپ

  function closePopup() {

    document.getElementById('popup-overlay').style.display = 'none';

  }
  // افزودن رویداد کلیک برای دکمه بستن

  document.getElementById('popup-close').addEventListener('click', closePopup);
  // افزودن رویداد کلیک برای دکمه ثبت‌نام (در این مثال فقط پاپ آپ بسته می‌شود)

  document.getElementById('popup-button').addEventListener('click', function(){

    closePopup();

    // در اینجا می‌توانید عملکرد دلخواه مانند هدایت به صفحه ثبت‌نام را اضافه کنید

  });

// نمایش پاپ آپ پس از مدت زمان معین (مثلاً ۵ ثانیه پس از بارگذاری صفحه) window.addEventListener('load', function(){ setTimeout(showPopup, 5000); }); </script>

این کدها باعث می‌شوند که:

پس از ۵ ثانیه از بارگذاری صفحه، پاپ آپ نمایش داده شود.
با کلیک بر روی دکمه بستن یا دکمه ثبت‌نام، پاپ آپ بسته شود.
شما می‌توانید این توابع را به نیازهای خود سفارشی‌سازی کنید.

ادغام پاپ آپ در المنتور

الف) استفاده از ویجت HTML در المنتور

برای درج کدهای HTML، CSS و JavaScript در المنتور، کافی است از ویجت HTML استفاده کنید. مراحل انجام این کار:

یک صفحه یا قالب جدید در المنتور ایجاد کنید.
از ویجت «HTML» استفاده کرده و کدهای HTML، CSS و JavaScript ارائه‌شده را در آن قرار دهید.
مطمئن شوید که تمامی کدها به درستی در ویجت قرار گرفته‌اند و به صورت پیش‌نمایش نمایش داده می‌شوند.

ب) تنظیمات موقعیت‌یابی پاپ آپ

به منظور اینکه پاپ آپ به‌صورت صحیح بر روی صفحه قرار گیرد:

در المنتور، یک بخش جدید (Section) ایجاد کنید.
ویجت HTML را درون این بخش قرار دهید.
در تنظیمات پیشرفته (Advanced) المنتور، مطمئن شوید که هیچ مارجین یا پدینگ اضافی به پاپ آپ اضافه نشده تا عملکرد CSS نوشته‌شده تحت تأثیر قرار نگیرد.

پ) بررسی واکنش‌گرا بودن پاپ آپ

برای اطمینان از اینکه پاپ آپ در تمامی دستگاه‌ها به‌درستی نمایش داده می‌شود:

از تنظیمات ریسپانسیو المنتور استفاده کنید.
در حالت‌های موبایل و تبلت، اندازه فونت‌ها و عرض پاپ آپ را تنظیم کنید.
با استفاده از پیش‌نمایش المنتور در حالت‌های مختلف دستگاه، تغییرات لازم را اعمال نمایید.

نکات بهینه‌سازی و بهبود عملکرد

الف) بهینه‌سازی سرعت بارگذاری

برای اطمینان از اینکه افزودن پاپ آپ تاثیری منفی بر سرعت بارگذاری صفحه نداشته باشد:

از تصاویر بهینه‌شده با حجم کم استفاده کنید.
کدهای CSS و JavaScript را فشرده و در صورت امکان inline قرار دهید.
کش مرورگر را پس از اعمال تغییرات پاکسازی کنید.

ب) بهبود سئو

حتی یک پاپ آپ باید از جنبه‌های سئو نیز بهینه شود:

مطمئن شوید که صفحه‌ای که پاپ آپ در آن قرار دارد، دارای تگ‌های مناسب HTML (مانند H1 برای تیتر اصلی) است.
استفاده از متاتگ‌های صحیح در صفحه برای توضیحات متا و عنوان صفحه.
ایجاد لینک‌های داخلی مناسب در پاپ آپ (مثلاً دکمه «بازگشت به صفحه اصلی»).

پ) تست و ارزیابی

پس از پیاده‌سازی پاپ آپ، از نکات زیر برای تست و ارزیابی عملکرد استفاده کنید:

آزمون‌های واکنش‌گرا: نمایش صفحه در دستگاه‌های مختلف (دسکتاپ، تبلت، موبایل) را بررسی کنید.
بازخورد کاربران: از دوستان یا کاربران نمونه بخواهید تا نظر خود را در مورد پاپ آپ اعلام کنند.
ابزارهای تحلیلی: از ابزارهایی مانند Google PageSpeed Insights استفاده کنید تا مطمئن شوید افزودن پاپ آپ تاثیری منفی بر سرعت سایت ندارد.

نکات پیشرفته و سفارشی‌سازی‌های اضافه

الف) افزودن انیمیشن‌های پیشرفته

برای ایجاد تجربه بصری جذاب‌تر می‌توانید از انیمیشن‌های CSS و جاوا اسکریپت پیشرفته استفاده کنید:

استفاده از Keyframes در CSS: برای ایجاد افکت‌های ورودی و خروجی المان‌های پاپ آپ.
افکت‌های Transition: تغییرات ملایمی در ظاهر المان‌ها هنگام باز و بسته شدن پاپ آپ ایجاد کنید.

ب) شخصی‌سازی محتوای پاپ آپ

به منظور افزایش تعامل کاربران، محتوای پاپ آپ را می‌توانید به صورت داینامیک تغییر دهید:

استفاده از فرم‌های تماس یا ثبت‌نام سفارشی.
افزودن لینک‌های مربوط به مطالب پربازدید یا محصولات ویژه.
استفاده از تصاویر متغیر و متناسب با فصل یا رویدادهای ویژه.

پ) ادغام با سایر المان‌های سایت

برای هماهنگی بیشتر پاپ آپ با طراحی کلی سایت:

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

چالش‌ها و راهکارهای رفع مشکلات

الف) مشکلات سازگاری

در برخی مواقع، ممکن است به دلیل تغییرات در نسخه‌های جدید مرورگر یا تداخل با سایر کدهای سفارشی:

پاپ آپ به درستی نمایش داده نشود.
افکت‌های انیمیشنی به درستی کار نکنند. در این موارد، توصیه می‌شود:
کدهای CSS و JavaScript خود را مرور و به‌روزرسانی کنید.
از ابزارهای مرورگر جهت عیب‌یابی (Developer Tools) استفاده کنید.

ب) مدیریت زمان‌بندی نمایش

ممکن است نیاز داشته باشید که پاپ آپ در زمان‌های مختلف نمایش داده شود (مثلاً تنها برای کاربران جدید یا پس از مدت زمان مشخصی از بازدید):

با استفاده از JavaScript می‌توانید زمان‌بندی نمایش پاپ آپ را تنظیم کنید.
از توابع setTimeout و setInterval بهره ببرید تا زمان‌بندی دقیق‌تری داشته باشید.

پ) بهبود تجربه کاربری در مواجهه با پاپ آپ

برای اینکه پاپ آپ به‌عنوان یک ابزار مفید و غیر مزاحم عمل کند:

امکان بستن سریع پاپ آپ با کلیک بر روی دکمه بستن یا کلیک خارج از جعبه پاپ آپ را فراهم کنید.
به کاربران اجازه دهید که پاپ آپ را برای مدت طولانی نبیند (مثلاً با استفاده از کوکی‌ها یا Local Storage تنظیم شود).

نتیجه‌گیری

اهمیت استفاده از پاپ آپ: پاپ آپ‌ها ابزاری قدرتمند برای جلب توجه کاربران، جمع‌آوری ایمیل و افزایش تعامل هستند.
آمادگی و نیازمندی‌ها: برای ساخت پاپ آپ نیاز به دانش اولیه HTML، CSS و JavaScript دارید؛ همچنین نصب المنتور و آشنایی با محیط آن از ضروریات است.
ساختار HTML پاپ آپ: طراحی یک ساختار ساده اما کاربردی شامل لایه پس‌زمینه، جعبه اصلی پاپ آپ، عناصر متنی و دکمه‌های بسته شدن.
استایل‌دهی با CSS: استفاده از کدهای CSS جهت ایجاد پس‌زمینه تار، استایل‌دهی به جعبه پاپ آپ و المان‌های آن.
کنترل نمایش با JavaScript: افزودن کدهای JavaScript جهت کنترل نمایش، بسته شدن و زمان‌بندی پاپ آپ.
ادغام در المنتور: استفاده از ویجت HTML المنتور برای درج کدهای نوشته‌شده و تنظیم موقعیت‌یابی پاپ آپ.
بهینه‌سازی عملکرد: رعایت نکات سرعت بارگذاری، بهینه‌سازی تصاویر و تست واکنش‌گرا بودن پاپ آپ.
سفارشی‌سازی‌های پیشرفته: افزودن انیمیشن‌های پیشرفته، شخصی‌سازی محتوا و هماهنگی با هویت بصری سایت.
رفع مشکلات: بررسی و عیب‌یابی کدها، تست‌های مکرر در محیط‌های مختلف و دریافت بازخورد کاربران.

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

مشاورین ما در خدمت شما هستند

09207718710