Înțelegerea diferenței dintre declanșatori, efecte și ținte din Divi 5

Noile interacțiuni ale Divi 5 folosesc un model simplu - declanșare, efect, țintă. Separați ce începe, ce se întâmplă și ce se schimbă și puteți crea o mișcare clară și coordonată pe aspectul dvs. În această postare, vom explica fiecare parte, vom arăta cum se potrivesc și vom parcurge un exemplu rapid pe care îl puteți reutiliza. Hai să mergem la ea!

Ce sunt declanșatorii, efectele și țintele?

Interacțiunile din Divi 5 sunt construite din trei părți mobile care lucrează împreună. Un declanșator pune lucrurile în mișcare, un efect decide cum arată răspunsul și o țintă definește ce element se schimbă.

Abonați -vă la canalul nostru YouTube

Când configurați o interacțiune, Divi vă va cere să completați toate cele trei părți:

Înțelegerea fiecărui rol separat va face mai ușor să vedeți cum se conectează într -un singur sistem complet.

Declanșatorul este ceea ce începe

Fiecare interacțiune începe cu o acțiune de pornire numită declanșator. Este primul pas pe care îl face utilizatorul, cum ar fi un clic pe mouse, trecerea sau încărcarea paginii, care inițiază acțiunea. De exemplu, mutarea mouse -ului pe o carte de prețuri pune în mișcare lanțul.

Pe cont propriu, un declanșator nu face nimic. Are nevoie de un răspuns.

Efectul este ceea ce se întâmplă

Odată ce declanșatorul se declanșează, efectul urmează. Aici decideți reacția, cum ar fi înclinarea, decolorarea, scara, neclaritatea sau orice amestec de mișcări. Imaginează -ți aceeași scalare a cardului de preț și adăugând o umbră mai profundă pe care cursorul tău o trece peste ea - acesta este efectul.

În cele din urmă, trebuie să decideți unde să aplicați efectul.

Ținta este ce schimbări

Ținta este pur și simplu elementul care se schimbă atunci când declanșatorul se declanșează. Plecarea este o interacțiune utilizată frecvent, dar afectează doar elementul în sine. Cu alte cuvinte, elementul care a început interacțiunea (declanșatorul) este, de asemenea, elementul care se schimbă (ținta).

De exemplu, trecerea pe o coloană poate face aceeași scară de coloană, deoarece este și ținta.

Acest lucru a menținut totul limitat la un singur element. Puteți configura lucrurile în acest fel în Divi 5, dar nu vă mai limitați la acesta.

Acum declanșatorul și ținta pot fi diferite, ceea ce vă oferă mult mai mult control. De exemplu, când cursorul intră într -o secțiune, butonul se scalează, chiar dacă nu a fost atins. În acest caz, butonul este ținta.

Cum lucrează împreună

Acum că am văzut fiecare parte pe cont propriu, puterea reală vine atunci când le conectați într -un lanț:

• Trigger Fires: Vizitatorul face ceva de genul să faci clic, să muti mouse -ul, să intri, să plece sau să încarce pagina.
• Efect Definește : decideți ce fel de răspuns vizual sau de mișcare să vă arătați.
• Tinta se aplică: care schimbă terenurile pe elementul pe care l -ați ales.

Gândiți -vă la el ca la cablarea unui circuit. Comutatorul se scurge, curentul curge, becul se aprinde.

În Divi 5, puteți conecta circuitul în orice mod doriți. Un hover de pe o coloană își poate înclina butonul. O încărcare a paginii se poate estompa într -o imagine erou. Un singur clic poate anima mai multe module simultan, făcând secțiunea să se simtă coordonată.

Acest lucru este atunci când interacțiunile nu se mai simt ca un hover mai frumos și încep să lucreze ca un limbaj de proiectare. Nu mai ești blocat cu un element care reacționează la sine. Puteți lansa, eșalopa și răspândi răspunsuri pentru a conecta întregul aspect.

Aflați totul despre interacțiunile Divi 5

Formula din Divi 5

Frumusețea interacțiunilor Divi 5 este că nu sunt suplimente aleatorii. Ei urmează o formulă clară: declanșare → efect → țintă. Construirea interacțiunilor chiar complexe devine simplă și consecventă odată ce o vedeți ca un model repetabil.

Să punem această formulă în practică pentru a vă arăta cum lucrează împreună. Pentru acest exemplu, să creăm un formular de contact care apare pe ecran atunci când utilizatorul face clic pe buton.

Pentru a crea acest efect, veți seta o interacțiune pe butonul pe care doriți să îl utilizați ca declanșator. Selectați aceste setări:

• Eveniment de declanșare: Faceți clic (am decis că evenimentul va declanșa atunci când utilizatorul face clic pe buton)
• Efect Acțiune: Afișare element (formularul de contact ascuns)
• Modul țintă: Secțiunea (contact) este eticheta atribuită secțiunii de contact.

Apoi, setați legătura de ancoră pentru a deschide secțiunea de contact. În primul rând, deschideți setările secțiunii formularului de contact și accesați fila Advanced . În cadrul ID -ului și claselor CSS , setați ID -ul CSS : Contact.

Apoi, accesați setările butonului și introduceți #Contact în câmpul URL al link -ului butonului .

În cele din urmă, setați starea inițială a formularului pe ascuns, astfel încât să apară doar atunci când este declanșat. Deschideți setările secțiunii formularului de contact, accesați fila Advanced și în vizită , selectați punctele de întrerupere în care doriți să o ascundeți.

Acum testează -l. Faceți clic pe buton și apare secțiunea de contact ascunsă.

Acest flux simplu (faceți clic → Afișare → Formular de contact) este același model pe care îl veți reutiliza pentru pop-up-uri, comutatoare, dezvăluire blândă pe încărcare sau animații înlănțuite pe o secțiune. După ce vă gândiți în termeni de declanșare, efect și țintă, posibilitățile se deschid rapid.

Încercați interacțiuni în Divi 5 astăzi

Ai modelul. Acum puneți -l să funcționeze pe o pagină reală. Deschideți un aspect de testare și construiți un mic efect de interacțiune pe care îl puteți termina în zece minute. Alegeți ceva pe care l -ați folosi de fapt pe un site client.

Iată câteva mini prompturi pentru a obține rularea:

• Mouse -ul intră într -o secțiune, făcând scara butonului subtil
• Făcând clic pe un buton „Contact” dezvăluie un formular ascuns
• Concedii de mouse pe un card resetează înclinarea
• Încărcarea paginii se estompează într -o imagine erou, apoi titlul o clipă mai târziu

Spuneți -ne în comentarii dacă ați folosit încă caracteristica interacțiunilor Divi 5 și ce credeți despre asta!