آموزش ساخت پاپ آپ سفارشی در قالب فلت سام flatsome (بدون کدنویسی)

create popup in flatsome

فهرست مطالب

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

[toc]

پاپ آپ در فلت سام
ساخت پاپ آپ در قالب فلت سام

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

مراحل آموزش – معرفی افزونه مورد نیاز

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

نام این افزونه Flatsome pop-up element هستش که مطمعنا اسم این افزونه رو نشنیده بودید، این افزونه ابزار پاپ آپ رو به المانهای پیشرفض وردپرس اضافه می کند و براحتی می توانید با صفحه ساز اختصاصی اقدام به طراحی پاپ آپ در قالب flatsome نمایید.

مرحله اول – نصب افزونه

در اولین قدم ما بید بریم و افزونه رو که رایگان هم هست از مخزن وردپرس نصب و فعال کنیم، برای نصب افزونه در وردپرس مراحل زیر رو دنبال کنید :

  1. به پیشخون وردپرس برید.
  2. در منوی سمت راست در وردپرس به منوی افزونه ها » افزودن برید.
  3. در صفحه باز شده در سمت چپ صفحه یک کادر جستجو وجود دارد که شما باید در این قسمت و فیلد عبارت “Flatsome pop-up element” رو وارد کنید. با این کار در مخزن وردپرس افزونه مورد نظر رو جستجو می کنید.
  4. بعد از این که افزونه جستجو شد و براتون آورد بر روی دکمه “هم اکنون نصب کن” کلیک کنید تا افزونه شورع به نصب شدن بکنه و بعد از اینکه افزونه نصب شد بر روی دکمه “فعال کردن” کلیک کنید.
نصب افزونه
نصب افزونه پاپ آپ فلت سام

مرحله دوم : استفاده از افزونه

برای استفاده از افزونه میتوانید بعد از نصب و فعال سازی افزونه، یک برگه تزه ایجاد کنید و یا در برگه اصلی وب سایت که طراحی کردید برید و صفحه رو با UX-Builder ویرایش کنید.

در المانهای فلت سام در بالای تمامی المانها یا عناصر یک ابزارک جدید با عنوان “Pop-up” اضافه شده است.

پاپ آپ فلت سام
ساخت پاپ آپ در قالب فلت سام

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

تنظیمات پاپ آپ
انجام تنظیمات پنجره پاپ آپ در فلت سام

تصویر

  • Image : در این بخش میتونید یک تصویر برای پاپ آپ انتخاب کنید.
  • ارتفاع : در این قسمت میتوانید ارتفاع پنجره پاپ آپ رو تنظیم کنید.
  • Radius : میتوانید با این گزینه گوشه های مدور به پنجره اضافه کنید.
  • اندازه : میتوانید اندازه پنجره رو تنظیم کنید.
  • کناره : می توانید یک کناره برای پاپ آپ تنظیم کنید.
  • Delay Time: میزان تاخیر ظهر شدن پنجره پاپ آپ رو میتونید تنظیم کنید.

متن

  • موقعیت : میتوانید موقعیت نمایش متن رو تنظیم کنید.
  • چینش : میتوانید نحوه چینش متن رو تنظیم کنید.
  • اندازه : اندازه متن رو میتوانید در این بخش ویرایش و سفارشی کنید.
  • BG Color : میتوانید یک رنگ پس زمینه برای متن انتخاب کنید.
  • رنگ : رنگ متن رو تنظیم میکنید.
  • Padding : با این گزینه فاصله داخلی متن رو تنظیم می کنید.

پیوند

  • پیوند : میتوانید مسیر لینک پاپ آپ رو تنظیم کنید.
  • هدف : برای نحوه نمایش لینک هست که میتوانید رو پنجره جدید و یا همان پنجره تنظیم کنید.
  • Rel : میتوانید لینک رو فالو و یا نوفالو قرار بدید.

Advanced

  • Class : میتونید یک کلاس Css اختصاصی برای پنجره پاپ آپ انتخاب کنید.
  • Visible : میتوانید نحوه نمایش پنجره پاپ رو توی موبایل و تبلت و دسکتاپ تنظیم کنید.

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

فلت سام
پاپ آپ در فلت سام

هر سوالی داشتید میتوانید در بخش دیدگاه ها مطرح کنید.

موفق و پیروز باشید.

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