Interacțiuni pentru Divi 5 (pop-up-uri, comutații, efecte de mouse și multe altele)

Astăzi, suntem încântați să lansăm interacțiuni pentru Divi 5, un sistem robust pentru crearea de elemente interactive, cum ar fi pop-up-uri și comutatoare, și efecte creative bazate pe defilare și bazate pe mouse.

Nu este un constructor pop-up; Este un constructor de orice . Creați un declanșator, alocați un efect, alegeți o țintă și aduceți -vă interacțiunile personalizate la viață. Puteți face atât de multe lucruri uimitoare cu acest sistem și abia aștept să vă arăt cum funcționează, așa că haideți să sărim.

Consultați următorul videoclip pentru a vedea noua caracteristică în acțiune.

Construiește -ți propriile elemente interactive

Veți observa un nou grup de interacțiuni în fila avansată a tuturor elementelor. Făcând clic pe butonul Adăugare Interacțiune va deschide editorul de interacțiune, unde puteți configura declanșatorul, efectul și ținta fiecărei interacțiuni.

Declanșatorul inițiază interacțiunea, cum ar fi atunci când faceți clic sau plutind. Efectul se întâmplă atunci când interacțiunea este declanșată, cum ar fi comutarea vizibilității, presetarea sau atributul, iar ținta este elementul afectat de pe pagină.

Exemple de interacțiune

Înainte de a intra mai adânc în aceste setări, permiteți -mi să vă arăt câteva exemple despre ce interacțiuni pot realiza.

Exemplul 1: Construirea unui pop-up

În exemplul video de mai jos, am folosit interacțiuni pentru a crea un pop-up.

Am adăugat un declanșator Enter Viewport la o secțiune, care aplică efectul de vizibilitate de comutare la pop-up-ul meu. Secțiunea intră în viziunea mea, declanșând vizibilitatea pop -up -ului și alunecă în utilizarea setărilor de animație Divi.

În plus, un modul de pictogramă din pop-up are o interacțiune bazată pe clicuri, care comută vizibilitatea pe pop-up pentru a-l închide. Puteți crea orice tip de pop-up sau banner plutitor!

Exemplul 2: Construirea unui comutator

În exemplul video de mai jos, am folosit interacțiuni pentru a comuta tabele de prețuri lunare și anuale.

Am adăugat două interacțiuni la rând pentru a comuta vizibilitatea alternativării secțiunilor de prețuri anuale și lunare. În continuare, am adăugat încă două interacțiuni pentru a comuta vizibilitatea a două module de pictograme, oferind utilizatorului feedback suplimentar la Click.

Exemplul 3: Tranziția între presetări

Unul dintre cele mai puternice efecte este efectul presetat de comutare. Deoarece presetările vă permit să modificați setările unui element, nu există nicio limită la ceea ce puteți face. Când un declanșator schimbă presetarea pe un element țintă, acesta îl poate transforma în multe feluri.

În exemplul video de mai jos, am configurat două interacțiuni pentru a adăuga și elimina o presetare pe rând, deoarece intră și iese din Viewport. Presetarea evidențiată modifică culoarea și scala de fundal a rândului și adaugă o umbră de cutii, prinzând atenția utilizatorilor în timp ce derulează în jos pagina!

Exemplul F: efecte de mișcare a mouse -ului

Efectele bazate pe mouse-uri ale sistemelor de interacțiune sunt foarte distractive.

În exemplul video de mai jos. Am adăugat mai multe interacțiuni la o secțiune de eroi, vizând diverse elemente cu efecte bazate pe mișcare a mouse-ului de sensibilități diferite.

Interacțiunile declanșează pe mouse -ul intră, aplicând opacitate, mișcare și efecte de înclinare asupra elementelor care se schimbă pe măsură ce mouse -ul meu se mișcă. De asemenea, am adăugat o interacțiune la modulul buton, care comută o presetare pentru a schimba stilul conturului pătrat.

Posibilitățile sunt interminabile!

Aș putea continua cu diferite exemple și sunt încântat să văd cu ce ai venit.

Privind mai îndeaproape editorul de interacțiune, puteți vedea câteva efecte suplimentare pentru a juca cu care nu am menționat încă, cum ar fi comutarea atributelor, cookie -urile și derularea la elemente.

De exemplu, puteți utiliza efecte de atribut pentru a schimba clasele CSS ale unui element, ID -ul sau orice altceva.

Versiunea Una dintre interacțiuni acceptă următoarele efecte:

• Comutarea vizibilității - comută automat un element între stările vizibile și cele ascunse.
• Show Element - face vizibil un element ascuns.
• Elementul ascunzător - face ascuns un element vizibil.
• Toggle Preset - Purtează o presetare/oprire pentru un element, cu înlocuirea opțională a presetărilor existente.
• Adăugați presetare - aplică o clasă de stil presetat la un element, cu înlocuirea opțională a presetărilor existente.
• Eliminați presetarea - elimină o clasă de stil presetat dintr -un element.
• Atributul de comutare - adaugă sau elimină valoarea specifică a atributului HTML a unui element, cum ar fi o clasă CSS și ID.
• Adăugare atribut - adaugă o valoare specifică a atributului HTML unui element dacă nu există deja.
• Eliminați atributul - elimină o valoare specifică a atributului HTML dintr -un element.
• Comutați cookie -ul - adăugați sau scoateți o valoare a cookie -ului dintr -un cookie. De exemplu, setați un cookie atunci când un pop-up pare să urmărească atunci când un utilizator a văzut un pop-up. Apoi, utilizați opțiunile de condiție ale Divi pentru a ascunde pop -up -ul în viitoarele vizite ale paginii pentru utilizatorul respectiv.
• Adăugați cookie - adaugă o valoare a cookie -urilor și a cookie -ului pe care o definiți în browserul vizitatorului.
  Scoateți cookie -ul - Scoateți un cookie specificat.
• Derulați la element - defilează fără probleme pagina pentru a aduce elementul țintă în vizualizare.
• Mișcarea mouse -ului oglindă - face ca elementul țintă să urmeze mișcarea mouse -ului în cadrul elementului de declanșare folosind diferite tipuri de mișcare (traducere, scară, opacitate, înclinare sau rotire) cu sensibilitate reglabilă.

Încercați Divi 5 astăzi

Interacțiunile pentru DIVI 5 sunt disponibile astăzi și este una dintre numeroasele caracteristici care vin la Divi în acest an.

Puteți urmări pe măsură ce progresăm prin versiunea finală a Divi 5 și nu numai, cu actualizări la fiecare două săptămâni. În funcție de prioritățile dvs., puteți utiliza acum Divi 5 pentru a construi noi site -uri web sau așteptați până când adăugăm mai multe funcții, orice funcționează cel mai bine pentru dvs.

Așa cum s-a subliniat în programul inițial de lansare a lui Divi 5, alfa Public Divi 5 este ca „Divi 5 Lite”. Lipsește câteva caracteristici și este posibil să nu fie potrivit pentru site -urile web existente, dar este gata să fie utilizat pe site -urile noi, dacă preferați experiența Divi 4.

Vrem să îl încercați și, dacă îl iubiți, folosiți -l; Când toată lumea o iubește, o vom face oficială.

Ați încercat culori relative?

În cazul în care ați ratat -o, am lansat recent culori relative pentru Divi 5, făcând Divi liderul clar în gestionarea culorilor și sistemul de culori avansate. Vă permite să creați sisteme de culori bazate pe variabile din punct de vedere matematic, cu relații de culoare cuibărită folosind HSL. Nu vrei să dormi pe această caracteristică.

Urmăriți acest videoclip pentru toate detaliile.

Mai multe actualizări Divi 5 sunt pe drum

2025 este anul Divi 5 . Munca obositoare este în spatele nostru. Am construit fundația super-rapidă, iar acum este timpul ca Divi să-și facă revenirea.

Dacă sunteți aici pentru revenirea Divi, faceți -ne o favoare uriașă și anunțați -ne pe placul acestui videoclip și lăsând un comentariu. Pentru noi înseamnă mult să vă vedem înveselind divi și este esențial să hrănim algoritmul și să răspândim cuvântul.

Nu uitați să ne urmați pe YouTube și să vă abonați la Buletinul Buletinului Divi, astfel încât să nu pierdeți niciodată o actualizare. Ne vedem în curând pentru un alt anunț de caracteristici Divi 5, despre care promit că va fi chiar după colț.