Cum să adăugați un efect hover în divi builder

Wordpress

Există o mulțime de modalități de a face ca o pagină web de pe site-ul dvs. să arate mai atractivă. Unul dintre acestea este că puteți adăuga un efect hover la un anumit element din pagină. Dacă aveți un site web bazat pe WordPress construit cu Divi Builder , puteți adăuga fără efort un efect hover la un element de pe pagină. Apropo, ce este Divi Builder?

În cazul în care nu ați știut despre Divi Builder. Este un plugin de construire a paginilor pentru WordPress, la fel ca Elementor (Elementor este cel mai popular constructor de pagini WordPress). De asemenea, vine cu un editor vizual pentru a vă facilita crearea paginii. Divi Builder vine cu câteva funcții încorporate pentru a adăuga efecte de animație, inclusiv cele pe care le puteți adăuga atunci când un vizitator plutește pe un anumit element de pe pagina dvs. Aruncați o privire la screencastul de mai jos.

Efectele hover de mai sus sunt create cu Divi Builder. Divi Builder utilizează el însuși transformarea CSS pentru funcția de efect hover. Deci, din punct de vedere tehnic, atunci când adăugați un efect de hover la un anumit element în Divi Builder, implementați transformarea CSS în pagina dvs.

În Divi Builder, elementul de design se încadrează în trei tipuri: secțiune, rând și modul. Puteți adăuga un efect hover la aceste trei tipuri de elemente. În acest exemplu, vă vom arăta cum să adăugați un hover la un modul de imagine (așa cum puteți vedea în screencastul de mai sus).

Cum să adăugați un efect de hover în Divi Builder

În primul rând, trebuie să pregătiți o secțiune, precum și un rând în zona canvas a Divi Builder. Pentru a face acest lucru, faceți clic pe butonul albastru plus pentru a adăuga o nouă secțiune (puteți adăuga o secțiune obișnuită pentru acest exemplu). Introduceți un rând și selectați structura coloanelor în funcție de nevoile dvs. În acest exemplu, selectăm structura cu trei coloane.

După ce rândul este adăugat, faceți clic pe pictograma gri plus pe una dintre coloane pentru a adăuga un modul. Deoarece dorim să adăugăm efectul hover la imagine, atunci selectați Image (Imagine) pentru a adăuga modulul Image (Imagine).

Panelul de setări al modulului Image (Imagine) va apărea imediat după ce ați adăugat modulul Image (Imagine). Pentru a adăuga o imagine, puteți face clic pe suportul de imagine de pe blocul Image de sub fila Content .

După ce imaginea este adăugată, mergeți la fila Design și deschideți blocul Transform . În blocul Transformare , faceți clic pe pictograma cursorului și apoi faceți clic pe fila de transformare (care este, de asemenea, reprezentată cu o pictogramă cu cursor).

Selectați un tip de transformare pe care doriți să îl adăugați făcând clic pe una dintre filele disponibile și utilizați mouse-ul pentru a seta valoarea. Sau puteți, de asemenea, să setați valoarea transformării manual, tastând valoarea preferată.

Asta este. Puteți aplica modificările făcând clic pe pictograma verde a listei de verificare din colțul din dreapta jos al panoului de setări.

Pentru a vă face pagina mai atractivă, puteți, de asemenea, să afișați o imagine diferită la hover. Puteți acest articol pentru a afla mai multe.

Puteți parcurge același traseu pentru a adăuga un efect hover la o secțiune și la un rând. Mai întâi, deschideți panoul de setări și apoi mergeți la fila Design . În fila Design , puteți deschide blocul Transformare . Puteți seta efectul hover pe acest bloc, așa cum tocmai am abordat mai sus.

YouTube video: Cum să adăugați un efect Hover în Divi Builder


.

Rate article