Cum să declanșați simultan efectele de deplasare pentru un modul, o coloană și un rând

Unul dintre cele mai bune lucruri despre construirea unui site cu Divi este că fiecare bloc de construcție este plin de opțiuni de proiectare. Fiecare modul, coloană, rând și secțiune conține setări de proiectare atât pentru starea implicită, cât și pentru starea de deplasare. Aceasta deschide ușa pentru declanșarea mai multor efecte de hover atunci când combinați aceste elemente împreună.

În acest tutorial, vă voi arăta cum să declanșați simultan efecte de hover pentru un modul, o coloană și un rând. Trucul este să vă asigurați că toate elementele împărtășesc aceeași dimensiune și spațiu. Dar, odată ce aveți elementele la locul lor, puteți deveni extrem de creativ cu efectele și design-urile dvs.

Să începem.

Trage cu ochiul

Iată un exemplu rapid de cum arată simultan efectele de declanșare a diferitelor elemente Divi.

Descărcați GRATUIT exemplul de proiectare

Pentru a pune mâna pe designul acestui tutorial, va trebui mai întâi să îl descărcați folosind butonul de mai jos. Pentru a avea acces la descărcare, va trebui să vă abonați la lista noastră de e-mail Divi Daily folosind formularul de mai jos. Ca nou abonat, veți primi și mai multe bunătăți Divi și un pachet Divi Layout gratuit în fiecare luni! Dacă sunteți deja pe listă, pur și simplu introduceți adresa de e-mail mai jos și faceți clic pe descărcare. Nu veți fi „resubscris” și nu veți primi e-mailuri suplimentare.

Descărcați fișierele

Descarcă gratis

Înscrieți-vă la buletinul informativ Divi și vă vom trimite prin e-mail o copie a pachetului final de planificare a paginii de destinație Divi, plus o mulțime de alte resurse, sfaturi și trucuri uimitoare și gratuite Divi. Urmăriți-vă și veți fi un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, pur și simplu introduceți adresa de e-mail de mai jos și faceți clic pe descărcare pentru a accesa pachetul de aspect.

DESCARCA

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 layout Divi săptămânale gratuite!

Pentru a importa aspectul în pagina dvs., pur și simplu extrageți fișierul zip și trageți fișierul json în Divi Builder.

Abonați-vă la canalul nostru Youtube

Să trecem la tutorial, nu-i așa?

Înțelegerea modului de declanșare simultană a statelor de plutire pe mai multe elemente Divi.

Fiecare element din Divi (secțiune, rând sau modul) are propriul său spațiu de plutire, care este practic dimensiunea elementului în sine.

Fiecare dintre aceste elemente are opțiuni de comutare încorporate care sunt activate atunci când treceți cu mouse-ul peste acel element sau pe oricare dintre elementele copil pe care le conține.

De exemplu, dacă ați adăugat opțiuni de deplasare la o secțiune, acele opțiuni de deplasare vor deveni active ori de câte ori plasați cursorul pe secțiune.

Apoi, dacă plasați cursorul deasupra spațiului de deplasare a rândului din interiorul secțiunii, veți activa opțiunile de deplasare atât ale rândului, cât și ale secțiunii. Acest lucru se datorează faptului că rândul este un element secundar al secțiunii.

Ori de câte ori plasați cursorul peste o coloană, activați starea de deplasare a coloanei, a rândului și a secțiunii.

Și, în sfârșit, ori de câte ori treceți cu mouse-ul peste un modul, declanșați stările de hover pentru modul și toate elementele părinte ale acestuia (coloană, rând și secțiune).

În mod implicit, fiecare dintre aceste elemente va avea spațiu (umplutură) care creează goluri în spațiul de deplasare care permite utilizatorului posibilitatea de a deplasa selectiv fiecare element. Dar, dacă eliminați spațiul dintre fiecare element, veți putea declanșa stările de plutire pentru toate elementele simultan.

Aceasta deschide ușa multor combinații de efecte de hover care se pot întâmpla simultan pe măsură ce combinați opțiunile de hover pentru fiecare element și le activați într-un spațiu de hover partajat.

Un exemplu de combinare a efectelor Hover

Iată un exemplu despre cum funcționează acest lucru cu Divi.

În exemplul de mai jos, avem un rând cu o imagine de fundal. La plimbare, avem o umbră de cutie întârziată care apare ca un fel de element de proiectare a chenarului.

În interiorul rândului, avem o coloană care a fost umplută cu o umbră de cutie neagră. La deplasare, umbra casetei coloanei este redusă treptat pentru a dezvălui imaginea de fundal a rândului.

În interiorul coloanei, avem un modul blurb care are un fundal albastru. La plimbare, fundalul albastru se schimbă într-o culoare albastră semitransparentă, astfel încât să puteți vedea imaginea de fundal.

Deoarece există spațiu între fiecare element, putem vedea efectul specific de deplasare a fiecărui element pe măsură ce deplasăm deasupra fiecărui spațiu individual.

Dar, dacă scoatem spațiul și dăm rândului o lățime personalizată, toate elementele vor împărți același spațiu de plutire. Sau pentru a spune altfel, modulul ocupă întregul spațiu al coloanei și al rândului. Deci, când trecem cu mouse-ul peste modul, efectele de hover pentru modul, coloană și rând sunt activate simultan.

Întârzierile de tranziție funcționează excelent cu această configurare

Rețineți că, în exemplul de mai sus, există întârzieri de tranziție în rândul și coloana efectelor de trecere în evidență, care evidențiază cu adevărat funcționalitatea acestui concept. Dacă am încerca să adăugăm o combinație similară de efecte de hover doar la modul, nu am putea profita de aplicarea diferitelor întârzieri și durate de tranziție fiecărui efect de hover în mod individual.

Recreerea exemplului de proiectare în Divi

Pentru a vă oferi câteva instrucțiuni despre cum se desfășoară acest lucru în lumea reală a lui Divi, să recreăm exemplul descris mai sus.

Ce trebuie să începeți

Pentru a începe, va trebui să aveți următoarele:

1. Tema Divi instalată și activă
2. O nouă pagină creată pentru a construi de la zero pe partea frontală (constructor vizual)
3. Imagini care urmează să fie utilizate pentru conținut fals

După aceea, veți avea o pânză goală pentru a începe să proiectați în Divi.

Adăugarea secțiunii și rândului

Primul lucru pe care trebuie să-l faceți este să creați o secțiune obișnuită cu un rând cu o coloană.

Actualizați setările rândului și coloanei

Apoi, deschideți setările rândului și dați rândului o imagine de fundal.

Apoi, trebuie să scoatem umplutura implicită, astfel încât să nu existe spațiu în spațiul de deplasare între rând și coloană.

• Căptușeală: 0 px sus, 0 px jos

Apoi adăugați următoarea umbră a casetei la rândul de pe cursor.

• Box Shadow: vezi captura de ecran
• Puterea neclarității umbrei cutiei: 0 px
• Puterea răspândirii umbrei casetei: 0 px (desktop), 10 px (plutitor)
• Culoare umbră: # 063c68

Actualizați opțiunile de tranziție cu o durată și o întârziere după cum urmează:

• Durata tranziției: 500 ms
• Întârziere de tranziție: 700 ms

Acum deschideți setările coloanei și actualizați următoarele:

• Box Shadow: vezi captura de ecran
• Puterea neclarității umbrei cutiei: 0 px
• Puterea răspândirii umbrei casetei: 200 px (desktop), 0 px (plutitor)
• Culoare umbră: # 000000
• Durata tranziției: 500 ms
• Întârziere tranziție: 200ms

Adăugați modulul Blurb

Acum adăugați un modul de blurb pe rând.

Apoi actualizați blurb-ul după cum urmează:

• Imagine: [introduceți imaginea blurb]
• Culoare fundal: # 0c71c3
• Culoarea fundalului (hover): rgba (12.113.195,0.35)

• Alinierea textului: centru
• Culoarea textului: deschis
• Căptușeală: 20 px sus, 20 px jos, 20 px stânga, 20 px dreapta

Rezultat final

Verificați rezultatul final.

Gânduri finale și sfaturi

Înțelegerea modului de declanșare a stărilor de plutire pentru mai multe elemente Divi deschide simultan câteva posibilități de proiectare interesante. Exemplul din această postare evidențiază doar câteva dintre numeroasele combinații de efecte de hover care sunt posibile atunci când combinați stările de hover ale unui modul, coloană și rând. În plus, nici măcar nu am explorat posibilitățile care vin odată cu combinarea opțiunilor de deplasare a secțiunii, ceea ce vă va oferi și mai multe opțiuni de trecere la mouse. Pe măsură ce explorați singuri aceste efecte de plutire, iată câteva sfaturi și idei pentru a vă ajuta pe parcurs.

• Utilizați Box Shadow în loc de Borders - Borders adaugă de fapt spațiu suplimentar unui element, astfel încât acest lucru ar putea provoca goluri de trecere nedorite. Box Shadows adaugă un element de design care nu adaugă spațiu real.
• Explorați efectele de trecere pe fundal de tranziție - Fiecare element Divi are opțiuni de trecere pe fundal care pot fi combinate pentru straturi de efecte de plasare creativă.
• Utilizați opțiunile Transformare hover - Opțiunile Transformare hover pot adăuga un element creativ, cum ar fi scalarea și rotirea elementelor pe hover. Cu toate acestea, poate fi dificil să rotiți mai multe elemente pe hover, deoarece va provoca sărituri.
• Profitați de opțiunile de tranziție - Adăugarea diferitelor durate de tranziție și întârzieri la starea de deplasare a fiecărui element poate crea animații de trecere unice.

Sper că acest tutorial vă va inspira să explorați câteva combinații uimitoare de efecte hover în Divi.

Aștept cu nerăbdare să aud de la dvs. în comentarii.

Noroc!