Cum să construiți un pop-up cu interacțiunile Divi 5 (descărcare gratuită)

Pop-up-urile sunt un instrument excelent pentru a capta atenția și a conduce implicarea pe site-ul dvs. web. Indiferent dacă doriți să vă dezvoltați lista de e-mailuri, să promovați o ofertă specială sau să ghidați vizitatorii către o acțiune specifică, un pop-up bine proiectat poate face toată diferența. Odată cu lansarea interacțiunilor DIVI 5, crearea de pop-up-uri personalizate, dinamice, nu a fost niciodată mai ușoară.

În această postare, vă vom parcurge prin crearea unui pop-up folosind caracteristica interacțiunilor Divi 5. Hai să ne scufundăm!

Ce sunt interacțiunile Divi 5?

Interacțiunile Divi 5 este o nouă caracteristică integrată în constructorul vizual, conceput pentru a face site -urile web mai dinamice și mai antrenante. Vă permite să creați animații și răspunsuri personalizate pe baza acțiunilor utilizatorului sau a evenimentelor de pagină, cum ar fi clicuri, hovers sau derulare. Spre deosebire de modelele statice, interacțiunile vă permit să creați pop-up-uri, comutații, mișcări ale mouse-ului și efecte de defilare, toate cu interfața familiară a Divi.

Abonați -vă la canalul nostru YouTube

Componente cheie ale interacțiunilor DIVI

Fiecare interacțiune din Divi 5 este formată din trei componente de bază:

• Trigger: Evenimentul care inițiază interacțiunea, cum ar fi un clic, un hover sau un element care intră sau iese din Viewport.
• Efect: Acțiunea care apare atunci când declanșatorul este activat, cum ar fi comutarea vizibilității, aplicarea unui stil presetat sau schimbarea unui atribut.
• Țintă: elementul specific afectat de interacțiunea, care poate fi același element, o altă secțiune, rând, coloană sau modul din pagina identificată de eticheta sa de administrare.

Aceste componente funcționează împreună, permițându-vă să creați interacțiuni complexe cu o interfață simplă, fără cod.

De ce ar trebui să utilizați interacțiuni pentru crearea pop-up-urilor

DIVI 5 Interacțiuni oferă mai multe avantaje pentru construirea pop-up-urilor:

• Nu aveți nevoie de pluginuri: spre deosebire de constructorii pop-up tradiționali, interacțiunile DIVI 5 sunt construite direct în Visual Builder, eliminând nevoia de pluginuri terțe.
• Situat în cadrul constructorului vizual: puteți construi pop-up-uri folosind interfața familiară, modulele și opțiunile de stil ale Divi, ceea ce face ușor pentru utilizatorii de orice nivel de abilități.
• Opțiuni și efecte versatile: combinați pop-up-uri cu alte interacțiuni, cum ar fi animații bazate pe defilare sau efecte de mișcare a mouse-ului, pentru a crea experiențe unice și antrenante.
• Control complet: personalizați declanșările, efectele și țintele pentru a crea pop-up-uri pentru obiectivele dvs. specifice, toate fără a scrie cod.

Ghid pas cu pas pentru construirea unui pop-up în Divi 5

Crearea unui pop-up în Divi 5 este simplă, simplificarea ușoară a designului existent al site-ului dvs. În această secțiune, vom demonstra cât de ușor este să creăm un pop-up care să se potrivească cu unul dintre machetele noastre pre-făcute, să vă arătăm cum să-l stilați și să setați interacțiunile pentru a afișa pop-up-ul cu o întârziere cronometrată.

1. Instalați un pachet de aspect

Pentru acest tutorial, vom simplifica lucrurile începând cu unul dintre proiectele noastre de pachete de aspect și apoi construind un pop-up cu aceleași stiluri. Pentru a face acest lucru, faceți clic pe pictograma + din colțul din stânga sus al constructorului vizual.

Când apare caseta de dialog, alegeți Premade Layout din opțiunile disponibile.

Faceți clic pe pachetul de layout de învățare online pentru a evidenția paginile disponibile.

Selectați designul paginii de destinație și faceți clic pe Utilizați acest aspect pentru a -l încărca în Visual Builder.

Ultimul pas în importul pachetului de aspect este să alegeți dacă importarea presetărilor. După ce ați ales, faceți clic pe butonul Import.

2. Creați o secțiune pentru pop-up

Acum că pachetul de aspect este importat, trebuie să creăm o nouă secțiune pentru pop-up-ul nostru din partea de jos a paginii. Parcurgeți la sfârșitul paginii și adăugați o secțiune nouă.

Faceți clic pe pictogramă pentru a introduce un nou rând. Alegeți a doua opțiune sub coloane Offset .

3. Proiectați pop-up-ul

Acum putem începe să adăugăm conținut la pop-up-ul nostru. Când apare modulul de dialog Insert sau Row , faceți clic pentru a adăuga un modul de titlu .

Introduceți „Vrei 15% reducere?” În câmpul de rubrică sub fila Conținut.

Pentru a menține design-urile consecvente pe întreaga pagină, puteți utiliza funcția de atribute Divi 5 pentru a copia setările unui alt modul de titlu pentru pop-up-ul nostru. În secțiunea direct de mai sus, treceți peste modulul de rubrică, faceți clic dreapta și faceți clic pe Copiați atributele .

În continuare, treceți peste modulul de rubrică pe care tocmai l-am creat, faceți clic dreapta, selectați Lipire atribute , apoi faceți clic pe Lipire a Textului de proiectare a atributelor . Aceasta va lipi stilurile din celălalt modul de rubrică, permițând consistența proiectării.

Sub modulul de rubrică, adăugați un nou modul de text .

Ca și în cazul modulului de rubrică, localizați modulul de text în secțiunea de mai sus, faceți clic dreapta și selectați Atribute de copiere . De acolo, faceți clic pe noul modul de text, atingeți atributele de paste și apoi lipiți atributele de proiectare a textului .

Puteți adăuga textul dvs. în câmpul de text sau puteți utiliza Divi AI pentru a -l genera pentru dvs.

În continuare, vom adăuga un modul de opțiune prin e-mail sub modulul de text.

Secțiunea de mai sus are un modul de opțiune prin e-mail, astfel încât să puteți copia atributele sale și să le lipiți în noul opțiune de e-mail pe care am adăugat-o la pop-up-ul nostru.

Ultimul pas este să adăugați o imagine în coloana din dreapta a pop-up-ului nostru. Localizați modulul de imagine și adăugați -l la a doua coloană a aspectului nostru.

Încărcați o imagine și adăugați -o la modulul de imagine. Până în acest moment, secțiunea dvs. ar trebui să arate similară cu aceasta:

4. Creați un buton de închidere

Acum că designul pop-up-ului nostru este în vigoare, trebuie să adăugăm un nou rând deasupra lui pentru a adăuga o pictogramă cu buton de închidere. Acest lucru va permite vizitatorilor dvs. să închidă pop-up-ul la confortul lor. Faceți clic pe pictograma verde + pentru a adăuga un nou rând.

Când apare caseta de dialog Insert Row , faceți clic pe aspectul unei singure coloane sub coloane egale pentru a o adăuga la secțiune.

Faceți clic pentru a adăuga un modul de pictogramă la rând.

Selectați pictograma Close din opțiunile disponibile. Poate fi localizat cu ușurință tastând „Închidere” în caseta de căutare de deasupra listei de pictograme.

Treceți la fila Design și introduceți următoarele setări de proiectare:

• Culoarea pictogramei: #5344B9
• Dimensiunea pictogramei: 36px
• Alinierea: corect

Ultimul pas este să mutați rândul deasupra rândului cu două coloane care conține conținutul pop-up-ului nostru. Utilizați vizualizarea straturilor pentru a reorganiza rândurile în ordinea corectă. În timp ce este acolo, redenumiți secțiunea pentru a pop-up .

5. Reglați setările secțiunii

Înainte de a ne crea interacțiunile, trebuie să ne asigurăm că pop-up-ul este dimensionat corespunzător pentru lățimea browserului. Nu vrem să fie un pop-up cu lățime completă, așa că navigați la proiectare pentru a face unele ajustări. Extindeți meniul derulant de dimensionare pentru a dezvălui setările.

În câmpul de lățime , introduceți 80% pentru lățime. Apoi, setați opțiunea de aliniere a secțiunii la centru .

Sub graniță , setați o rază de frontieră de 10px.

Vom adăuga, de asemenea, o umbră de cutii, astfel încât pop-up-ul nostru să se remarcă în restul conținutului. Localizați meniul derulant Shadow Box și extindeți-l. Sub Cutie Shadow , alegeți presetarea 1 .

În cele din urmă, accesați fila Conținut pentru a adăuga o culoare pentru fundalul secțiunii noastre pop-up.

6. Creați interacțiunea pentru a afișa pop-up-ul

Cu designul în loc, ne putem stabili interacțiunile. Vom seta secțiunea noastră pop-up pentru a afișa 5 secunde după ce un utilizator aterizează pe pagină. Navigați la fila Avansată a secțiunii și localizați meniul derulant Interacțiuni . Faceți clic pe + Adăugați interacțiune pentru a începe.

Alegeți încărcare din opțiunile disponibile. Această setare va permite pop-up-ului să apară la încărcarea paginii.

Când apare caseta de dialog Editare interacțiune , introduceți următoarele setări și faceți clic pe Salvați :

• Etichetă de administrare: interacțiune pop-up
• Eveniment de declanșare: încărcare
• Efect Acțiune: Afișare element
• Modul țintă: secțiune (pop-up)
• Întârziere în timp: 5 secunde

În continuare, trebuie să adăugăm o interacțiune pentru butonul nostru de închidere. Selectați modulul pictogramei din primul rând al secțiunii noastre pop-up. Navigați la fila Advanced, faceți clic pe + Adăugați interacțiunea și introduceți următoarele setări și salvați:

• Etichetă de administrare: Închideți pop-up
• Eveniment de declanșare: Faceți clic
• Acțiune de efect: Comutați vizibilitatea
• Modul țintă: secțiune (pop-up)
• Întârziere de timp: 0

7. Testați și perfecționați-vă pop-up-ul cu punctele de întrerupere personalizabile ale Divi 5

Înainte de a trece la ultimul pas, este o idee bună să utilizați punctele de întrerupere a răspunsului personalizabile ale Divi 5 pentru a vă asigura că pop-up-ul dvs. arată bine pe toate dimensiunile ecranului. În Divi 5, acum există 7 puncte de întrerupere din care să alegeți.

În mod implicit, doar trei sunt activate. A avea 7 vă permite să vă testați pop-up-ul pe mai multe puncte de întrerupere, asigurând o experiență de utilizator fără probleme cu orice dimensiune a ecranului. Pentru a permite tuturor celor 7, faceți clic pe meniul Elipsis din mijlocul de sus al barei de administrare. De acolo, activați toate punctele de întrerupere, comicându -le.

Noul sistem FlexBox Layout de la Divi 5 vă permite să faceți cu ușurință modificări pentru a vă asigura că pop-up-ul dvs. arată excelent pe orice dispozitiv. De exemplu, puteți utiliza câmpul Structura coloanei de schimbare a Divi 5 pentru a schimba numărul de coloane afișate pe dispozitive mai mici. Această opțiune va stiva conținutul pe mobil cu un singur clic.

8. Setați opțiuni de afișare

Pentru ca pop-up-ul dvs. să fie afișat corect, trebuie să ajustăm vizibilitatea, poziționarea și indexul secțiunii pop-up. Acest lucru va permite pop-up-ului dvs. să afișeze acolo unde doriți, să-l păstreze ascuns până când este timpul să vă afișați și să vă asigurați că apare deasupra restului conținutului paginii.

Navigați la fila Advanced pentru secțiunea pop-up. Localizați meniul derulant vizibil . Faceți clic pentru a dezactiva secțiunea din toate vizualizările (telefon, tabletă și desktop).

Apoi, faceți clic pe meniul derulant Poziție. Setați poziția la Fix și alegeți o origine compensată. În cele din urmă, adăugați un index Z de 99999 pentru a vă asigura că pop-up-ul se afișează deasupra restului conținutului paginii.

Odată ce toate setările sunt în vigoare, salvați pagina și previzualizați -o într -o altă filă. Pop-up-ul ar trebui să fie afișat în 5 secunde după încărcarea paginii. De asemenea, ar trebui să puteți închide pop-up-ul folosind interacțiunea apropiată pe care am creat-o.

Opțiuni avansate de personalizare pop-up

Interacțiunile Divi 5 vă permit să vă duceți pop-up-ul la nivelul următor cu funcții avansate, cum ar fi condițiile de afișare, combinarea efectelor sau chiar utilizarea Divi AI pentru a genera pop-up-uri. Să ne uităm la unele moduri în care puteți face pop-up-urile dvs. mai avansate fără a avea nevoie de fragmente personalizate CSS sau JavaScript.

Condiții de afișare

Puteți utiliza opțiunile de condiție ale Divi pentru a afișa pop-up-ul pe baza comportamentului utilizatorului, cum ar fi rolurile utilizatorului. De exemplu, puteți afișa pop-up-ul doar pentru utilizatorii înregistrați pentru a încuraja înregistrările.

De asemenea, puteți permite condițiile de afișare a pop-up-ului pe baza vizitelor de pagină. De exemplu, ar trebui să dezactivați pop-up-ul dacă un anumit utilizator a vizitat deja pagina. De asemenea, puteți seta pe afișat doar dacă un utilizator nu a vizitat pagina. Acest lucru poate fi util pentru vizitatorii care găsesc site -ul dvs. printr -o pagină diferită și faceți clic pe pagina principală următoare.

Combinați efectele

Vă puteți îmbunătăți pop-up-ul cu animații bazate pe defilare sau efecte de mișcare a mouse-ului. Acestea pot fi adăugate ca interacțiuni suplimentare prin selectarea declanșatoarelor și efectelor suplimentare. Interacțiunile pot fi combinate și nu există nicio limită la numărul pe care îl puteți crea. De exemplu, puteți aplica cu ușurință o interacțiune asupra imaginii în pop-up-ul nostru folosind efecte de mișcare a mouse-ului.

Integrarea divi AI

Accelerați procesul de proiectare folosind Divi AI pentru a genera un aspect. Puteți instrui Divi AI să creeze secțiuni specifice, inclusiv una pe care o puteți converti într-un pop-up. În exemplul de mai jos, am solicitat Divi AI să creeze un aspect pentru un antrenor de afaceri, completat cu o secțiune CTA pe care o putem transforma într-un pop-up.

Cele mai bune practici pentru pop-up-uri eficiente

Pentru a vă asigura că pop-up-ul dvs. îmbunătățește experiența utilizatorului și conduce rezultatele, luați în considerare aceste bune practici:

1. Păstrați-l ușor de utilizat

Evitați pop-up-uri intruzive folosind întârzieri cronometrate, între 5 și 10 secunde, în loc de declanșatoare imediate. Acest lucru oferă utilizatorilor timp să se angajeze cu conținutul dvs. înainte de a fi solicitat. Lansarea unui pop-up prea curând poate distrage atenția, determinând utilizatorii să închidă pop-up-ul și, eventual, să rateze o promoție, o înregistrare a newsletter-ului sau alte măsuri importante pe care doriți să le întreprindă.

Setați o întârziere cronometrată pe pop-up-ul dvs. pentru a evita pierderea implicării utilizatorilor.

În plus, includeți întotdeauna un buton de închidere clar, ușor de identificat, astfel încât utilizatorii să respingă pop-up-ul și să mențină o experiență pozitivă de navigare.

2. optimizați pentru performanță

Optimizarea performanței este esențială pentru pop-up-uri eficiente. Pentru a menține timpul de încărcare rapid, minimizați animațiile grele sau imagini mari, neoptimizate. Optați pentru imagini comprimate și limitați efectele complexe pentru a asigura o experiență snappy, perfectă, în special pentru utilizatori pe conexiuni mai lente sau dispozitive mobile. Această abordare îmbunătățește satisfacția utilizatorilor și acceptă rate mai bune de implicare și conversie.

3. Proiectarea pop-up-urilor cu standarde de accesibilitate în minte

Accesibilitatea este o altă considerație esențială pentru a face pop-up-ul dvs. incluziv pentru toți utilizatorii. Adăugați întotdeauna text descriptiv alt la imagini pentru a ajuta cititorii de ecran, asigurați un contrast ridicat între text și fundal pentru lizibilitate și utilizați dimensiuni de fonturi de 16px sau mai mari pentru a găzdui utilizatorii cu deficiențe de vedere.

Aceste practici vă ajută să vă asigurați că pop-up-ul dvs. este accesibil pentru o audiență diversă, alinându-se la standardele de accesibilitate Web.

4. Testați pe toate dimensiunile ecranului

În cele din urmă, testați-vă cu atenție pop-up-ul pe toate dimensiunile ecranului pentru a asigura o experiență consistentă pe toate dispozitivele. Puncte de întrerupere personalizabile ale lui Divi 5 pentru a vă asigura că pop-up-ul dvs. arată excelent și funcționează așa cum este prevăzut pe desktop, tablete și smartphone-uri.

Acordați o atenție deosebită butonului de închidere pentru a vă asigura că funcționează așa cum trebuie și acel text este lizibil pe ecrane mai mici. În plus, verificați distanțarea, dimensionarea și aspectul, după cum este necesar pentru a oferi un aspect profesional șlefuit.

Descărcați fișierele

Descărcați gratuit

Alăturați -vă buletinului informativ Divi și vă vom trimite prin e -mail o copie a pachetului de aspect final al paginii Divi Divi, plus tone de alte resurse, sfaturi și trucuri Divi uimitoare și gratuite. Urmați -vă și veți fi un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, introduceți pur și simplu adresa de e -mail de mai jos și faceți clic pe Descărcare pentru a accesa pachetul de aspect.

Descărcare

V -ați abonat cu succes. Vă rugăm să verificați adresa de e -mail pentru a vă confirma abonamentul și pentru a obține acces la pachetele de aspect Divi gratuit săptămânal!

Creați pop-up-uri cu interacțiuni DIVI 5

Funcția Divi 5 Interactions face ca crearea unui pop-up ușor, permițându-vă să construiți modele personalizate, antrenând direct în cadrul constructorului vizual. Combinarea declanșatoarelor, efectelor și țintelor vă permite să construiți pop-up-uri care să capteze atenția și să conducă conversii în timp ce se potrivesc perfect cu designul site-ului dvs. Explorați alte caracteristici, cum ar fi grupurile de module și rândurile cuibărite pentru a crea machete pop-up și mai dinamice.

Ești gata să încerci Divi 5? Descărcați cea mai recentă Alpha Publică Divi 5, experimentați cu interacțiuni și împărtășiți -vă gândurile în secțiunea de comentarii de mai jos. Vă rugăm să vă împărtășiți creațiile cu noi pe canalele noastre de socializare și vizitați blogul nostru pentru mai multe tutoriale folosind caracteristicile inovatoare ale Divi 5. Așteptăm cu nerăbdare să vedem ce creați!