Divi Plugin Highlight - Divi Overlays

Divi Overlays este un plugin pentru Divi de către DiviLife, o companie terță parte de dezvoltare Divi de către membru al comunității Tim Strifler. Vă permite să creați cu ușurință popup-uri folosind Divi Builder. Nu este doar un mod. Puteți crea suprapuneri pe ecran complet și puteți adăuga orice tip de conținut pe care îl doriți în suprapunere folosind Divi Builder, apoi îl puteți declanșa cu orice element din pagină, inclusiv butoane, linkuri, imagini etc. Puteți ajusta culorile de fundal, fontul culori și selectați animația de deschidere.

Suprapunerile pot include formulare, tabele de prețuri, coșuri de cumpărături, videoclipuri, imagini, linkuri de descărcare, hărți și multe altele. Puteți chiar să o setați pentru a deschide o suprapunere atunci când pagina se încarcă. Acestea vă permit să afișați conținut suplimentar fără a fi nevoie să așteptați pagina pentru a încărca.

Abilitatea de a utiliza Divi Builder înseamnă, desigur, că aveți acces la fiecare modul și setare pentru a vă crea suprapunerea. Aceasta înseamnă că aveți acces la aproape 40 de module și puteți utiliza coduri scurte din alte pluginuri. Cu accesul la această sumă de module, sunteți limitat doar de imaginația dvs.

Descărcare: Divi Overlays Download

În această prezentare generală, arunc o privire asupra versiunii 1.1, care include câteva funcții noi care au fost solicitate de clienți. La final, voi acoperi câteva dintre caracteristicile pe care vă puteți aștepta să le vedeți în versiunea 2.0. Pentru exemple folosesc kitul multifuncțional wireframe vol. 1. Să sapăm ...

Instalare

Încărcați, instalați și activați pluginul așa cum ați face orice plugin premium. Odată activat, va trebui să introduceți cheia de licență. Accesați Setări și selectați Activare Divi Overlays în tabloul de bord.

Introduceți cheia API și adresa de e-mail (din contul dvs. la DiviLife) și selectați Salvați modificările . Acum sunteți gata să începeți să creați suprapuneri.

Adăugați o nouă acoperire Divi

Suprapunerile sunt create separat de conținutul dvs. și apoi deschise din conținutul dvs. utilizând coduri simple.

Pentru a crea o suprapunere, accesați Divi Overlays și selectați Adăugare nouă în tabloul de bord. De aici puteți selecta utilizarea Divi Builder. Acest lucru funcționează la fel ca orice pagină sau postare obișnuită folosind Divi Builder, inclusiv plugin-uri și module speciale Divi, și puteți chiar rula teste A / B folosind Divi Leads. Lucrează chiar într-un modul global. De asemenea, puteți importa și exporta suprapunerile.

Alegeți animația și setările de suprapunere din caseta drop-down din colțul din dreapta sus. Sub Divi Builder este o selecție pentru culorile de fundal și font.

Câteva setări sunt adăugate în partea dreaptă. O casetă numită Divi Overlay Animation include o casetă derulantă în care puteți alege dintre 11 animații. Aceasta determină modul în care suprapunerea apare pe ecran.

Este adăugată o casetă de selectare pentru a preveni derularea paginii principale atunci când este afișată o suprapunere. Acest lucru menține utilizatorul în aceeași locație pe ecran, astfel încât atunci când închide suprapunerea să știe unde se află. Acest lucru este util mai ales dacă au făcut clic pe unul dintre numeroasele butoane pentru a deschide suprapunerea. Astfel știu pe ce buton au dat clic și nu își pierd locul pe ecran.

Am adăugat un modul video și am selectat Genie pentru animația suprapusă și am selectat pentru a preveni derularea paginii principale.

Acum, că am creat suprapunerea, o pot folosi pe o pagină. Pentru a face acest lucru, accesați Divi Overlays din tabloul de bord și selectați Divi Overlays pentru a vedea lista suprapunerilor disponibile. Pentru a utiliza suprapunerea, copiați codul pe care doriți să îl utilizați și lipiți-l în locația corectă. Să aruncăm o privire la modul de a face acest lucru în detaliu.

Linkurile sunt create folosind ID-ul CSS. Copiați ID-ul CSS și adăugați o etichetă de deschidere <a id= și închidere </a> așa cum se arată în exemplu.

În acest exemplu, folosesc o pagină de destinație. Vreau să adaug un declanșator textului, siglei magazinului de aplicații, imaginii telefonului, să creez un buton și să plasez un link în meniu.

Link text

Copiați codul scurt de conținut și lipiți-l într-un modul de cod sau text (orice modul care acceptă coduri scurte) pe pagina dvs. L-am lipit într-un modul de cod. Puteți plasa cât de multe coduri scurte Divi Overlay doriți în acest modul. Nu contează unde plasați modulul. Vă recomand să testați pentru a vă asigura că modulul nu vă afectează aspectul.

Vreau să folosesc textul VIZIONEAZĂ O DEMO ca un link pentru a deschide videoclipul. Pentru aceasta, copiați ID-ul CSS din lista de suprapuneri din ecranul tabloului de bord.

Lipiți codul în modulul dvs. text și formatați textul astfel:

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

În acest caz, textul este deja încorporat într-un anumit HTML, dar este în regulă. Trebuie doar să vă puneți codul în locația corectă din HTML.

Textul este acum albastru pentru a arăta că este un link.

Când dau clic pe text, mi se prezintă videoclipul către care am plasat un link în cadrul suprapunerii. Suprapunerea este deschisă cu animația pe care am ales-o.

Link imagine

Există două moduri de a adăuga ID-ul CSS la o imagine. Metoda pe care ar trebui să o utilizați va depinde de modul în care imaginea este plasată în conținutul dvs. Iată două exemple:

Modul text

Am vrut să fac clic pe imaginea magazinului de aplicații, dar, mai degrabă decât să te duc la magazinul de aplicații, am vrut să ofere câteva opțiuni și informații. Acest lucru necesită o nouă suprapunere, care necesită și un nou shortcode în cadrul modulului de cod.

Acum, când fac clic pe sigla aplicației, primesc o suprapunere cu linkuri către două magazine de aplicații diferite. Pentru UX / UI mai bun, aș schimba grafica pentru buton, dar acest lucru arată potențialul de a oferi mai multe opțiuni, păstrând în același timp conținutul curat. Pentru acest exemplu am setat fundalul suprapus la alb cu o opacitate de 90 și culoarea fontului la gri închis.

Modulul de imagine

În exemplul de mai sus am adăugat codul la HTML deoarece imaginea a fost plasată în modulul text. O altă opțiune este să plasați imaginea într-un modul de imagine și să utilizați ID-ul CSS în fila CSS personalizată .

În acest aspect, telefonul mobil se află într-un modul de imagine. Voi adăuga ID-ul CSS, astfel încât să deschidă suprapunerea videoclipului.

În URL-ul linkului utilizați # open-overlay (sau text similar cu simbolul #). Acum pot să fac clic pe imagine și să deschid o suprapunere.

Link buton

Adăugarea linkului de suprapunere la un buton este la fel ca adăugarea la o imagine. Nu uitați să adăugați codul scurt la modulul de cod.

Adăugați textul # la adresa URL a butonului. Am folosit # open-overlay ca înainte pentru că este descriptiv (și l-am furat de la Tim Strifler, dar nu-i spune asta).

Adăugați codul CSS ID în fila CSS personalizată .

Si asta e! Noul buton deschide acum formularul de contact.

Link de meniu

Pentru a crea un link de meniu, copiați ID-ul meniului și accesați Aspect , Meniuri și selectați meniul în care doriți să adăugați linkul și să îl încărcați. (Consultați acest articol Cum să creați structuri de meniu personalizate în WordPress pentru mai multe informații).

Selectați Opțiuni ecran în colțul din dreapta sus și bifați caseta etichetată Link Relationship (XFN) .

Selectați Link personalizat . Adăugați simbolul # ca link, adăugați textul pe care doriți să îl afișeze și selectați Adăugați la meniu . Lipiți ID-ul meniului în câmpul Link Relationship și salvați meniul. Asigurați-vă că atribuiți meniul unei locații de afișare în Setări meniu, dacă nu ați făcut-o deja. În acest exemplu l-am setat la Meniul principal .

Elementul de meniu apare acum în structura meniului. Dând clic pe acesta se va deschide suprapunerea. Aceasta are avantajul de a furniza un CTA (îndemn la acțiune) în cadrul structurii de navigație și pe întregul site.

Widget

Pluginul include, de asemenea, o nouă zonă widget. Diferența între utilizarea widgetului și oricare dintre celelalte metode este locul în care plasați codul scurt. În loc să plasați codul scurt în module de mai multe ori, îl puteți plasa o singură dată, făcându-l global. Apoi îl puteți declanșa din orice element de pe orice pagină, din bara laterală, din meniul principal sau din meniul subsol.

Aceasta este pagina pe care o folosesc din kitul multifuncțional wireframe vol. 1. Vreau să fac clic pe buton pentru a deschide videoclipul într-o suprapunere. Am adăugat codurile mele scurte în zona widgetului (plasându-le într-un widget text) și am adăugat ID-ul CSS la imaginea de pe pagină.

Codurile scurte din widget funcționează fără ca widgetul să fie vizibil. Nu a trebuit să plasez o bară laterală pe pagină sau niciun widget în subsol. Funcționează doar pentru că această nouă zonă widget se încarcă în culise. Dacă introduceți alte widget-uri în această zonă widget, acestea vor fi afișate în colțul din stânga sus al paginii. Codurile scurte nu se afișează ca text în mod implicit, astfel încât widgetul poate rămâne invizibil.

Închiderea suprapunerii

Suprapunerile pot fi închise fie cu X în colț, făcând clic pe fundalul suprapunerii, fie apăsând tasta de evacuare.

O altă opțiune este să adăugați o clasă apropiată la un link din suprapunere. Folosind această metodă puteți crea un buton de închidere sau un text. Acest lucru vă permite să adăugați un buton de anulare la CTA sau să faceți butonul de închidere mai vizibil.

Clasa apropiată arată astfel:

class = „close-divi-overlay”> Nu, mulțumesc

Venind în 2.0

Iată câteva caracteristici de așteptat:

O funcție de întârziere va permite suprapunerii să se deschidă pe baza unui timp stabilit după încărcarea paginii, permițând cititorului să vă vadă conținutul pentru o anumită perioadă de timp înainte de a deschide automat suprapunerea.

O caracteristică a pixelilor va deschide suprapunerea în funcție de numărul de pixeli pe care au derulat-o sau de procentajul paginii pe care au derulat-o.

O altă opțiune va deschide suprapunerea atunci când cititorul selectează butonul Înapoi sau plasează cursorul deasupra barei de adrese.

Documentație

Documentația este furnizată pe site-ul web DiviLife. Acesta include o prezentare generală și exemple ale diferitelor moduri în care puteți utiliza pluginul. Documentația include text, videoclip și cod de probă.

Prețuri

Divi Overlays este un plugin premium. Costă 15 USD pentru utilizarea pe un singur site, 29 USD pentru trei site-uri, 59 USD pentru site-uri nelimitate și 129 USD pentru licența nelimitată pe toată durata vieții. Fiecare dintre licențe include toate caracteristicile de bază și documentația. Primele trei includ un an de actualizări și asistență, în timp ce ultimul include actualizări și asistență pe toată durata vieții.

Gânduri finale

Divi Overlays este o modalitate excelentă de a crea suprapuneri folosind Divi Builder. Divi Builder vă permite să adăugați practic orice tip de conținut la suprapunere utilizând modulele Divi sau coduri scurte de la alte pluginuri. Este dificil să ne imaginăm o suprapunere pe care Divi Overlays nu o poate crea. Este nevoie de câțiva pași pentru a adăuga codul acolo unde este necesar, dar este ușor de făcut și documentația vă pasează prin el. Recompensa depășește cu mult câteva minute pentru a învăța să o utilizați.

Vrem sa auzim de la tine! Ați încercat Divi Overlays? Spuneți-ne despre experiența dvs. în comentarii.

Imagine prezentată prin brickclay / shutterstock.com