برجسته‌سازی پلاگین Divi – پوشش‌های Divi

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

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

البته امکان استفاده از Divi Builder به این معنی است که شما به هر ماژول و تنظیماتی برای ایجاد همپوشانی خود دسترسی دارید. این بدان معناست که شما به حدود 40 ماژول دسترسی دارید و می توانید از کدهای کوتاه دیگر افزونه ها استفاده کنید. با دسترسی به این تعداد ماژول، فقط تخیل خود را محدود می کنید.

دانلود: Divi Overlays را دانلود کنید

در این بررسی، نگاهی به نسخه 1.1 می‌اندازم که شامل برخی از ویژگی‌های جدید درخواست شده توسط مشتریان است. در نهایت، برخی از ویژگی‌هایی را که می‌توانید در نسخه 2.0 مشاهده کنید، پوشش خواهم داد. من از یک مجموعه سیمی چند منظوره برای نمونه ها استفاده می کنم. 1. بیایید حفاری کنیم …

نصب و راه اندازی

افزونه را مانند هر افزونه پریمیوم دانلود، نصب و فعال کنید. پس از فعال سازی، باید کلید مجوز خود را وارد کنید. رفتن مولفه های و انتخاب کنید فعال کردن Divi Overlays داشبورد.

کلید API و ایمیل (از حساب خود در DiviLife) را وارد کرده و انتخاب کنید ذخیره تغییرات. اکنون شما آماده ایجاد کاور هستید.

یک Divi Overlay جدید اضافه کنید

همپوشانی ها جدا از محتوای شما ایجاد می شوند و سپس با استفاده از کدهای ساده از محتوای شما باز می شوند.

برای ایجاد همپوشانی به اینجا بروید پوشش های Divi و انتخاب کنید جدید اضافه کن داشبورد. از اینجا می توانید از Divi Builder استفاده کنید. درست مانند هر صفحه یا پست معمولی با استفاده از Divi Builder، از جمله پلاگین ها و ماژول های سفارشی Divi، کار می کند و حتی می توانید با استفاده از Divi Leads آن را A/B تست کنید. آنها حتی در یک ماژول جهانی کار می کنند. همچنین می توانید کاورهای خود را وارد و صادر کنید.

انیمیشن و تنظیمات همپوشانی را از کادر کشویی در گوشه سمت راست بالا انتخاب کنید. در زیر Divi Builder گزینه ای برای رنگ های پس زمینه و فونت وجود دارد.

چند پارامتر به سمت راست اضافه می شود. کادری به نام Divi Overlay Animation دارای یک کادر کشویی است که می توانید از بین ۱۱ انیمیشن یکی را انتخاب کنید. این تعیین می کند که پوشش روی صفحه چگونه ظاهر شود.

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

من یک ماژول ویدیویی اضافه کردم و یک Genie را برای انیمیشن همپوشانی انتخاب کردم و از پیمایش صفحه اصلی جلوگیری کردم.

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

لینک ها با استفاده از شناسه CSS ایجاد می شوند. شناسه CSS و باز شده را همانطور که در مثال نشان داده شده است کپی کنید افزودن برچسب.

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

لینک متن

آن را کپی کنید کد کوتاه محتوا و آن را در یک کد یا ماژول متنی (هر ماژولی که کدهای کوتاه می پذیرد) در صفحه خود قرار دهید. من آن را در ماژول کد چسباندم. در این ماژول، می توانید هر تعداد کد کوتاه Divi Overlay را که دوست دارید قرار دهید. مهم نیست که ماژول را کجا قرار می دهید. من توصیه می کنم ماژول را آزمایش کنید تا مطمئن شوید که روی طرح شما تأثیر نمی گذارد.

من می خواهم از متن WATCH DEMO به عنوان پیوند برای باز کردن ویدیو استفاده کنم. برای این کار، شناسه CSS را از لیست پوسته های صفحه داشبورد کپی کنید.

کد را در ماژول متن خود قرار دهید و متن خود را به شکل زیر قالب بندی کنید:

<a id="overlay_unique_id_211154">WATCH A DEMO</a>

در این مورد، متن قبلاً در برخی از HTML جاسازی شده است، اما اشکالی ندارد. فقط کد را در جای درست در HTML قرار دهید.

اکنون متن آبی است که نشان می دهد پیوند است.

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

لینک تصویر

دو راه برای افزودن شناسه CSS به یک تصویر وجود دارد. روشی که باید استفاده کنید بستگی به نحوه قرار دادن تصویر در محتوای شما دارد. در اینجا دو نمونه وجود دارد:

ماژول متن

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

اکنون وقتی روی لوگوی برنامه کلیک می‌کنم، یک پوشش با پیوندهایی به دو فروشگاه برنامه مختلف دریافت می‌کنم. برای یک UX/UI بهتر، گرافیک دکمه را تغییر می‌دهم، اما این پتانسیل ارائه گزینه‌های متعدد در عین تمیز نگه داشتن محتوا را نشان می‌دهد. برای این مثال، پس‌زمینه همپوشانی را سفید با کدورت 90 و رنگ فونت را روی خاکستری تیره قرار دادم.

ماژول تصویر

در مثال بالا، من کد را به HTML اضافه کردم زیرا تصویر در یک ماژول متنی قرار می گیرد. گزینه دیگر این است که تصویر را در یک ماژول تصویر قرار دهید و از شناسه CSS در آنجا استفاده کنید CSS سفارشی نشان

در این طرح، تلفن همراه در ماژول تصویر قرار دارد. شناسه CSS را اضافه می کنم تا همپوشانی ویدیو باز شود.

به لینک URL از #open-overlay (یا متن مشابه با نماد #) استفاده کنید. حالا می توانم روی تصویر کلیک کرده و روی آن همپوشانی کنم.

اتصال دکمه

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

متن # را به URL دکمه اضافه کنید. من مانند قبل از #open-overlay استفاده کردم زیرا توصیفی است (و من آن را از تیم استریفلر دزدیدم، اما این را به او نگو).

کد شناسه CSS را اضافه کنید CSS سفارشی نشان

و بس! اکنون دکمه جدید فرم تماس را باز می کند.

لینک منو

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

انتخاب کنید گزینه های نمایش در گوشه سمت راست بالا و کادر مشخص شده را علامت بزنید اتصال پیوند (XFN).

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

اکنون آیتم منو در ساختار منو ظاهر می شود. با کلیک بر روی آن همپوشانی باز می شود. این مزیت ارائه CTA (Call to action) در ساختار ناوبری است و در کل سایت است.

ویجت

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

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

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

بسته شدن لایه بالایی

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

گزینه دیگر اضافه کردن یک کلاس نزدیک به انتقال همپوشانی است. با استفاده از این روش می توانید یک دکمه بستن یا متن ایجاد کنید. این به شما امکان می دهد یک دکمه لغو را به CTA اضافه کنید یا دکمه بستن را بیشتر نمایان کنید.

یک کلاس نزدیک به این شکل است:

class = “close-divi-overlay”>نه متشکرم

در نسخه 2.0 می آید

در اینجا چند ویژگی وجود دارد که باید منتظر آنها باشید:

یک ویژگی تأخیر زمانی به همپوشانی اجازه می‌دهد تا بر اساس زمان تعیین‌شده پس از بارگیری صفحه باز شود و به خواننده این امکان را می‌دهد که محتوای شما را برای مدت زمان مشخصی قبل از باز کردن خودکار پوشش مشاهده کند.

ویژگی پیکسل، همپوشانی را بر اساس تعداد پیکسل‌هایی که اسکرول می‌کنند یا درصد صفحه‌ای که پیمایش می‌کنند، نشان می‌دهد.

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

اسناد

اسناد در وب سایت DiviLife موجود است. این شامل یک نمای کلی و نمونه هایی از روش های مختلف استفاده از افزونه است. اسناد شامل متن، ویدئو و کد نمونه است.

ارزیابی

Divi Overlays یک افزونه ممتاز است. هزینه آن برای یک سایت 15 دلار، برای سه سایت 29 دلار، برای سایت های نامحدود 59 دلار و برای مجوز نامحدود مادام العمر 129 دلار هزینه دارد. هر مجوز شامل تمام ویژگی های کلیدی و اسناد است. سه مورد اول شامل یک سال به روز رسانی و پشتیبانی است، در حالی که آخرین مورد شامل به روز رسانی و پشتیبانی مادام العمر است.

افکار نهایی

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

ما می خواهیم از تو بشنویم! آیا Divi Overlays را امتحان کرده اید؟ از تجربیات خود در نظرات به ما بگویید.

تصویر ویژه از طریق Brickclay / shutterstock.com