Tot ce trebuie să știți despre interacțiunile Divi 5

Dacă doriți să atrageți vizitatori cu pop-up-uri dinamice, comutatoare și efecte de defilare fără un plugin sau CSS personalizat, vă va plăcea unul dintre cele mai recente versiuni de caracteristici Public Alpha Divi 5. Interacțiunile din DIVI 5 permit utilizatorilor DIVI să creeze elemente interactive captivante în interiorul constructorului vizual. În această postare, ne vom scufunda în tot ceea ce trebuie să știți despre interacțiunile DIVI 5, explorând caracteristicile sale, câteva sfaturi și aplicații din lumea reală pentru a vă ajuta să vă familiarizați cu funcția.

Notă importantă: Divi 5 este în prezent în Alpha publică și optimizat pentru noi site -uri web. Nu recomandăm migrarea site -urilor Divi 4 existente, din cauza dezvoltării în curs de desfășurare și a problemelor potențiale de compatibilitate cu modulele moștenite. Rămâneți la curent pentru actualizări, deoarece Divi 5 se apropie de lansarea completă!

Să mergem la ea.

Ce sunt interacțiunile Divi 5?

Interacțiunile Divi 5 este un constructor care vă permite să creați elemente interactive pentru site -ul dvs. direct în cadrul constructorului vizual. Mult mai mult decât un simplu constructor, această caracteristică vă permite să creați o serie de interacțiuni personalizate, de la pop-up-uri până la animații declanșate de defilare, toate fără a atinge o linie de cod.

Abonați -vă la canalul nostru YouTube

Integrată perfect în fila avansată a oricărui modul, coloană, rând sau secțiune, interacțiuni oferă o flexibilitate nelimitată pentru a construi experiențe antrenante, orientate către utilizator.

Componentele de bază ale interacțiunilor Divi 5

În centrul interacțiunilor Divi 5 sunt trei componente cheie care lucrează împreună pentru a vă aduce design -urile la viață:

Evenimente declanșatoare

Declanșatorii sunt evenimentele care inițiază o interacțiune. Exemple includ acțiuni ale utilizatorului, cum ar fi să faceți clic pe un buton sau să treceți peste o imagine, evenimente bazate pe defilare, cum ar fi atingerea unui punct specific pe o pagină sau declanșatoarele bazate pe timp, cum ar fi o întârziere după o încărcare a paginii.

Declanșatoarele disponibile includ:

• Faceți clic : Un utilizator face clic pe un buton, o imagine sau un alt element pentru a lansa o interacțiune.
• Mouse Enter/Ieșire: un utilizator se ridică sau lasă un element.
• Viewport Enter/Ieșire: Un element intră sau iese din zona vizibilă a ecranului pe măsură ce utilizatorul defilează.
• Încărcare: o interacțiune începe atunci când pagina se încarcă, cu o întârziere opțională de timp.

De exemplu, puteți declanșa un pop-up la 5 secunde după încărcarea unei pagini sau puteți anima un element atunci când un utilizator defilează.

Acțiuni de efect

Odată ce un declanșator este activat, efectele determină ce se întâmplă. Opțiunile includ afișarea sau ascunderea elementelor, animarea cu decolorarea, scale, rotație sau aplicarea tranzițiilor presetate pentru un stil consistent.

• Comutarea vizibilității: comută un element între vizibil și ascuns.
• Afișare/ascunde element: face un element vizibil sau ascuns.
• Turggle Presetate: activează sau oprită o presetare pentru un element de proiectare cu capacitatea de a înlocui o presetare existentă.
• Adăugați presetare: folosit pentru a adăuga o clasă de stil presetat la un element. De asemenea, puteți înlocui presetările existente.
• Scoateți presetarea: utilizați pentru a elimina un stil presetat dintr -un element.
• Atribut de comutare: adaugă sau elimină atributul HTML al unui element, cum ar fi o clasă CSS sau un ID CSS.
• Adăugare atribut: Aceasta adaugă o valoare specifică a atributului HTML în care unul nu există în prezent.
• Eliminați atributul: elimină orice atribut aplicat unui element.
• Cookie Toggle: adaugă sau elimină o valoare a cookie -ului. De exemplu, puteți seta un cookie atunci când apare un pop-up și setați să apară doar o dată folosind setările de condiție Divi 5.
• Adăugați cookie: adaugă o valoare a cookie -ului pe care o puteți defini în browserul utilizatorului.
• Scoateți cookie -ul: elimină un cookie specificat anterior.
• Derulați la element: Permite paginii să deruleze fără probleme, aducând elementul țintă în vedere.
• Mișcarea mouse -ului oglindă: vă permite să setați mișcarea care urmează mișcările mouse -ului utilizatorului. Opțiunile includ traducere, scară, opacitate, înclinare sau rotire. De asemenea, puteți ajusta sensibilitatea mișcării.

Vizați un modul

Ținta este elementul pe care îl afectează interacțiunea, cum ar fi un modul, un rând, o coloană sau o secțiune întreagă. Puteți viza elementul în sine sau un alt element din pagină, oferind flexibilitate pentru a crea interacțiuni complexe.

Caracteristici cheie ale interacțiunilor Divi 5

DIVI 5 Interacțiuni se remarcă pentru setul său de caracteristici ușor de utilizat și versatil:

• Fără interfață de cod: Configurați declanșatoarele, efectele și țintele printr -o interfață intuitivă în fila avansată a oricărui element fără a utiliza vreun CSS sau JavaScript.
• Tipuri de interacțiune diversă: Crearea pop-up-urilor pentru capturarea plumbului, comutări pentru întrebări frecvente, efecte declanșate de defilare pentru secțiuni Hero sau efecte de mouse asemănătoare cu paralaxa pentru portofolii.
• Performanță ușoară: încorporate direct în DIVI 5, interacțiunile elimină nevoia de pluginuri terțe, reducând balonarea site-ului și îmbunătățirea timpilor de încărcare.
• Combinații dinamice de declanșare: combinați mai multe declanșatoare, cum ar fi un eveniment de defilare cu o întârziere de timp, pentru interacțiuni sofisticate, cum ar fi un pop-up care apare după ce un utilizator defilează în jos pagina.
• Design receptiv: personalizați interacțiunile desktop, tabletă și mobile folosind punctele de întrerupere responsabile ale Divi 5.

Cum să accesați și să utilizați interacțiunile DIVI 5

Crearea unei interacțiuni în Divi 5 este simplă, datorită integrării sale în cadrul constructorului vizual. Urmați acești pași simpli pentru a începe:

Începeți prin deschiderea unei pagini în Divi 5. Alegeți un modul, rând, coloană sau secțiune la care doriți să adăugați o interacțiune. De exemplu, selectați un modul de imagine din pagina dvs.

Navigați la fila Advanced și faceți clic pe derularea interacțiunilor . Faceți clic pe butonul + Adăugare de interacțiune de acolo.

Vrem să creăm un efect de înclinare/transformare a mouse-ului pentru imaginea noastră. Pentru a face acest lucru, va trebui să creăm două interacțiuni - una pentru imagine și alta pentru coloana care conține imaginea. Începeți să dați interacțiunii dvs. un nume în eticheta de administrare , apoi introduceți următoarele setări:

• Eveniment de declanșare: mouse -ul intră
• Acțiune cu efect: mișcarea mouse -ului oglindă
• Modul țintă: imagine
• Întârziere de timp: 0
• Tip de mișcare: traducere
• Sensibilitate: 10

Odată ce toate setările sunt în vigoare, faceți clic pe butonul Salvare interacțiune pentru a continua.

În continuare, vom crea interacțiunea de transformare pe coloană. Faceți clic din nou la interacțiunea + Adăugare. Introduceți următoarele setări pentru a crea interacțiunea:

• Etichetă de administrare: coloană înclinată
• Eveniment de declanșare: mouse -ul intră
• Acțiune cu efect: mișcarea mouse -ului oglindă
• Modul țintă: coloană
• Întârziere de timp: 0
• Tip de mișcare: înclinare
• Sensibilitate: 30

Odată ce setările sunt introduse, interacțiunea dvs. ar trebui să arate astfel:

Utilizați butonul Previzualizare pentru a vizualiza interacțiunea dvs.

Pagina dvs. va apărea într -o nouă filă, permițându -vă să previzualizați și să vă testați interacțiunea.

Tipuri de interacțiuni pe care le puteți crea

Iată câteva exemple practice pentru a prezenta versatilitatea interacțiunilor Divi 5, completate cu declanșatoare, efecte și aplicații din lumea reală.

Bine ați venit pop -up pentru noi vizitatori

Pop-up-urile sunt excelente pentru a solicita vizitatorilor să se înscrie la buletine informative, promoții sau evenimente. Cu interacțiunile DIVI 5, puteți crea un pop-up binevenit care apare după încărcarea unei pagini.

Pentru a crea această interacțiune, va trebui să creați o secțiune pentru pop-up-ul dvs. și să atribuiți următoarele setări:

• Etichetă de administrare: pop -up
• Eveniment de declanșare: încărcare
• Efect Acțiune: Afișare element
• Modul țintă: Secțiune (pop-up)-Asigurați-vă că vă numiți secțiunea înainte de a crea interacțiunea
• Întârziere în timp: 5 secunde

De asemenea, va trebui să creăm o interacțiune pentru a închide pop-up-ul. Cel mai simplu mod este să adăugați un modul de pictogramă în colțul din dreapta sus al secțiunii pop-up și să atribuiți următoarele setări:

• Etichetă de administrare: Buton închidere
• Eveniment de declanșare: Faceți clic
• Efect Acțiune: Ascundeți elementul
• Modul țintă: secțiune (pop -up)
• Întârziere de timp: 0

Pentru a controla plasarea pop -up -ului dvs., utilizați setările de poziție ale Divi 5. În fila Advanced , localizați meniul derulant Poziție și setați poziția pe Fix . De acolo, alegeți locația pe care doriți să o apară pop-up-ul pe pagină. În acest exemplu, îl avem setat la centru . De asemenea, este o idee bună să setați indexul Z, astfel încât pop-up-ul să apară deasupra tuturor celorlalte pe pagină, precum 99999 .

Ultimul pas este să setați vizibilitatea pop-up-ului pe ascuns pe toate dispozitivele. Pentru a face acest lucru, navigați la fila Avansată , derulați la meniul derulant Visibility și comutați toate opțiunile pentru a ascunde secțiunea pop-up pe toate dispozitivele.

Comutați vizibilitatea unui element

Comutațiile sunt perfecte pentru a crea secțiuni de conținut pliabile, cum ar fi întrebările frecvente, meniurile de acordeon, tabele de prețuri sau servicii. Acestea permit utilizatorilor să se extindă sau să se prăbușească cu un clic, păstrând pagina curată și interactivă. De exemplu, puteți dezvălui o listă completă de servicii care este vizibilă numai după ce este clic pe un buton.

Pentru a crea acest efect, veți seta o interacțiune pe butonul pe care doriți să îl setați ca declanșator pentru secțiunea dvs. Introduceți următoarele setări pentru interacțiune:

• Etichetă de administrare: Show Services
• Eveniment de declanșare: Faceți clic
• Efect Acțiune: Afișare element
• Modul țintă: secțiune (Servicii de dezvăluire)
• Întârziere de timp: 0

Apoi, setați legătura de ancoră pentru a deschide secțiunea. Deschideți setările butonului și introduceți #Services în câmpul URL al link -ului butonului din fila Conținut.

Faceți clic pe secțiunea Caracteristici de sub buton și navigați la fila Advanced. Setați ancora adăugând servicii la câmpul ID CSS din meniul ID și clase CSS.

În timp ce vă aflați în fila Advanced, va trebui, de asemenea, să setați vizibilitatea secțiunii pe ascunsă, așa cum am făcut-o cu pop-up-ul nostru.

Efecte de mișcare a mouse-ului

Interacțiunile DIVI 5 vă permit să creați efecte dinamice de mișcare a mouse -ului atunci când un utilizator trece peste un element de proiectare. De exemplu, puteți combina interacțiuni pentru a crea un efect de înclinare pe o rubrică și coloana părinte.

Va trebui să creați mai întâi o interacțiune pentru rubrica pentru a realiza această interacțiune. Introduceți următoarele setări în fila avansată a imaginii:

• Etichetă de administrare: titlu animat
• Eveniment de declanșare: mouse -ul intră
• Acțiune cu efect: mișcarea mouse -ului oglindă
• Modul țintă: text
• Întârziere de timp: 0
• Tip de mișcare: înclinare
• Sensibilitate: 30

Când sunt introduse setări, acestea ar trebui să arate ca imaginea de mai jos.

Apoi, setați o interacțiune pe coloana care conține rubrica folosind următoarele setări:

• Etichetă de administrare: înclinare a coloanei
• Eveniment de declanșare: mouse -ul intră
• Acțiune cu efect: mișcarea mouse -ului oglindă
• Modul țintă: coloană
• Întârziere de timp: 0
• Tip de mișcare: înclinare
• Sensibilitate: 50

Odată finalizate, setările dvs. ar trebui să arate similar cu imaginea de mai jos.

Interacțiuni bazate pe presetare

Puteți utiliza interacțiuni DIVI 5 alături de presetări pentru a crea efecte fie cu mouseover sau cu declanșatoarele de intrare/ieșire. De exemplu, dacă doriți să prezentați o secțiune pe pagina dvs. schimbând culoarea de fundal sau adăugând un stil de umbră de frontieră, puteți utiliza interacțiuni pentru a o face. În exemplul de mai jos, culoarea de fundal, lățimea și frontiera se schimbă atunci când un utilizator trece peste secțiune.

Pentru a crea acest efect, mai întâi va trebui să creați o presetare pentru a arăta secțiunea înainte și după mouseOver. În acest exemplu, am creat două - unul cu un fundal galben solid și altul cu diverse efecte și un fundal verde.

Odată ce presetările dvs. sunt create, puteți utiliza interacțiuni pentru a comuta modificările pe hover. Începeți prin crearea primei interacțiuni cu următoarele setări:

• Etichetă de administrare: fundal galben
• Eveniment de declanșare: mouse -ul intră
• Efect Acțiune: Presetarea de comutare
• Modul țintă: secțiune (prețuri)
• Întârziere în timp: 1 secundă
• Presetare: fundal galben

În continuare, creați o a doua interacțiune pentru mouse-over prin introducerea următoarelor setări:

• Etichetă de administrare: fundal verde
• Eveniment de declanșare: ieșire mouse
• Efect Acțiune: Presetarea de comutare
• Modul țintă: secțiune (prețuri)
• Întârziere de timp: 0
• Presetare: Presetare verde

Beneficiile utilizării interacțiunilor Divi 5

DIVI 5 Interactions oferă o abordare puternică, simplificată pentru construirea de site -uri web, oferind o serie de avantaje care o fac o caracteristică de excepție pentru utilizatorii DIVI. Iată o privire mai profundă a motivului pentru care această caracteristică este un plus util pentru Divi 5:

1. Nu este necesar pluginuri

Deoarece interacțiunile DIVI 5 sunt integrate în miezul Divi, elimină nevoia de pluginuri terțe pentru a crea pop-up-uri și alte interacțiuni. Această abordare nativă reduce numărul de scripturi care rulează pe site -ul dvs., ceea ce duce la timp de încărcare mai rapid și la valori îmbunătățite de performanță.

De exemplu, în loc să se bazeze pe un plugin pop-up, DIVI 5 Interactions se ocupă de totul în cadrul constructorului Visual, asigurând o bază de cod mai slabă și o experiență de utilizator mai ușoară. Acest lucru înseamnă, de asemenea, mai puține actualizări pentru gestionarea și riscurile mai mici ale conflictelor de pluginuri, ceea ce face ca site -ul dvs. să fie mai fiabil.

2. Este ușor de utilizat

Interacțiunile DIVI 5 sunt concepute intuitiv, necesitând doar câteva clicuri pentru a crea interacțiuni. Începătorii pot înțelege rapid elementele de bază, iar dezvoltatorii Pro se pot scufunda în combinații complexe fără a scrie o singură linie de cod.

Setările interacțiunilor sunt organizate perfect în fila avansată a oricărui element, cu etichete clare și sfaturi de instrumente care vă ghidează pe întregul proces. De exemplu, configurarea unui pop-up necesită câteva clicuri pentru a selecta un declanșator și un efect, ceea ce face ușor să folosească oricine.

3. Libertatea de personalizare

Flexibilitatea interacțiunilor DIVI 5 și a setărilor sale vaste - declanșatoare, efecte și ținte - vă permit să creați experiențe unice pentru vizitatorii site -ului dvs. Puteți amesteca mai multe declanșatoare, cum ar fi combinarea unui Viewport bazat pe defilare cu o întârziere de timp, pentru a crea interacțiuni sofisticate, cum ar fi un banner promoțional care se estompează după ce un utilizator derulează la jumătatea paginii.

Posibilitatea de a viza orice modul, rând, coloană sau secțiune înseamnă că puteți aplica efecte exact acolo unde este necesar, indiferent dacă animăm un singur buton sau transformați o întreagă secțiune Hero.

4. Implicarea îmbunătățită a utilizatorilor

Elementele interactive stimulează implicarea utilizatorilor, făcând site -urile web mai imersive și mai receptive. Interacțiunile DIVI 5 ajută la menținerea vizitatorilor pe site-ul dvs., încurajând interacțiunea, cum ar fi clic pe comutații pentru a dezvălui prețuri alternative sau declanșarea pop-up-urilor pentru capturarea plumbului. De exemplu, un site web al restaurantului ar putea utiliza o animație declanșată de defilare pentru a dezvălui o secțiune de meniu.

Sfaturi practice pentru a începe

Pentru a profita la maxim de interacțiunile DIVI 5, abordați -o strategic pentru a asigura rezultate optime. Iată câteva sfaturi pentru a vă ghida prin proces:

• Start Simple: Începeți cu interacțiuni simple, cum ar fi pop-up-uri sau comută pentru a vă familiariza cu funcția înainte de a aborda efecte avansate, cum ar fi mouse-ul sau animațiile multi-trigger.
• Utilizați câmpul de etichetă de administrare: etichetarea interacțiunilor și elementelor dvs. este crucială, în special pe pagini complexe cu mai multe secțiuni. Adăugarea unui nume la câmpul de etichetă de administrare din fila Conținut a fiecărui modul vă permite să mențineți lucrurile organizate și să recunoașteți cu ușurință elementul țintă potrivit.
• Utilizați presetări: sistemul presetat al Divi 5 este excelent pentru economisirea timpului și menținerea consecvenței între interacțiuni. Presetările vă permit să definiți stiluri reutilizabile, cum ar fi o animație fade-in sau o tranziție a culorilor și să le aplicați la mai multe elemente.
• Testează -te în detaliu: Previzualizați întotdeauna interacțiunile dvs. folosind funcția de previzualizare a Divi 5 pentru a prinde orice probleme înainte de publicare. Puteți utiliza, de asemenea, punctele de întrerupere a răspunsului personalizabile ale Divi 5 pentru a testa modul în care interacțiunile se comportă pe toate dispozitivele.

Ridicați -vă site -ul cu interacțiunile DIVI 5

Interacțiunile DIVI 5 este caracteristica perfectă pentru crearea de elemente interactive captivante, fără cod, pentru a stimula experiența utilizatorului site-ului dvs. De la pop-up-uri care captează duce la animații declanșate de defilare, care îți aduc viața design-urilor, această caracteristică permite oricui să construiască site-uri dinamice, profesionale, fără a atinge o linie de cod. Integrarea sa ușoară și opțiunile de declanșare diverse îl fac un instrument esențial pentru designul web modern.

Sunteți gata să începeți? Descărcați cea mai recentă alfa Divi 5 și scufundați-vă în interacțiuni pentru a crea pop-up, a comutat conținut, efecte de defilare și multe altele. O notă rapidă: Divi 5 este gata pentru site -urile noi, dar nu vă recomandăm să îl utilizați pe site -urile existente.

Comentați mai jos sau contactați canalele noastre de socializare pentru a vă împărtăși creațiile cu noi. Ne -ar plăcea să le vedem!