Doriți să aflați cum să adăugați un efect de trecere cu mouse-ul la elementele din widgetul de postăriElementor?
Dacă sunteți un utilizator WordPress, utilizați Elementor pentru a vă crea site-ul web, ar trebui să fiți familiarizați cu caracteristica efectului de hover. Puteți găsi această caracteristică în principal în fiecare setare de widget Elementor.
Efectul de hover poate face elementele tale atractive, deci este o modalitate eficientă de a îmbunătăți experiența utilizatorului site-ul web.
Ei bine, vorbind despre efectul de hover, acest articol vă va arăta cum să îl adăugați pe acesta din urmă la elementele de postare individuale din widget Elementor Postări folosind CSS-ul personalizat al Elementor, în special, efectul de zoom-in.
Există două motive pentru care facem acest tutorial pentru tine:
- În mod implicit, puteți adăuga un efect de trecere la o postare din widgetul de postări Elementor. Dar, efectul de hover va fi foarte de bază/standard.
- În mod implicit, Elementor vă permite să adăugați un efect de fermoar la widgetul Postări (fila avansat -> Transformare -> scară). Dar efectul de hover va afecta toate elementele widget ale postărilor (nu individuale).
Pași pentru a adăuga efectul de trecere cu mouse-ul la postările individuale din widgetul de postări al lui Elementor
Înainte de a începe tutorialul, vrem să vă anunțăm că acest tutorial folosește caracteristica CSS personalizată a Elementor. Această funcție este disponibilă numai pe Elementor Pro; asigurați-vă că ați actualizat versiunea.
Pasul 1: Adăugați widget-ul de postări
Accesați editorul dvs. Elementor și vom începe totul de la zero, așa că creați o secțiune cu o singură coloană.
Citiți și: Cum se integrează MailChimp cu Elementor
Apoi, selectați widgetul Postări din panoul widget, apoi trageți și plasați-l în zona de editare. După ce ați adăugat widget-ul Postări, puteți edita și stiliza widget-ul în funcție de preferințele dvs.
Notă: Vă rugăm să vă asigurați că ați publicat deja articole despre dvs site-ul web.
Pasul 2: adăugați fragmentul CSS
După ce ați editat și ați stilizat widgetul Postări, în continuare vom adăuga un efect de trecere cu mouse-ul într-o postare individuală, adăugând fragmentul CSS simplu. În setările widget-ului Postări, accesați Tab avansat -> CSS personalizate. Copiați fragmentul CSS de mai jos și apoi inserați-l în câmp CSS personalizate.
selector .elementor-post:hover{
transition: all .50s ease-in-out;
transform: scale(1.1);
cursor: pointer;
z-index: 1;
}
Codul de mai sus va selecta elementul de postare individual din widgetul Postări folosind selectorul .élémentor-post și aplicați transformarea CSS.
Dacă sunteți mulțumit de efectul de hover care a fost utilizat, îl puteți păstra așa și puteți salva proiectul dacă doriți. Dar, dacă doriți să personalizați viteza de tranziție și valoarea scalei de transformare, puteți modifica valoarea în fragmentul CSS.
Notă: Transformarea/mărirea este un efect comun și popular utilizat pe site-uri web. Dacă doriți să aflați mai multe despre alte metode de transformare a efectelor hover, puteți vizita aceasta pagină.
Descoperiți și: toate selectoarele de widget-uri Elementor din articolul următor
Obțineți Elementor Pro acum!!!
Concluzie
Acest articol vă arată cât de ușor este să adăugați un efect de hover la elementele de postare individuale în widgetul de postări Elementor folosind CSS personalizat.
Tehnica pe care am folosit-o pentru acest efect este ( zoom-in ) care implică 2D și câteva elemente pseudo transformate. Personalizați și jucați-vă cu toate stilurile de efecte de hover până când găsiți cel mai bun efect de hover pentru site-ul dvs.
Aici este! Tocmai v-am prezentat cele mai bune instrumente pentru marketing prin e-mail pentru Elementor. Dacă aveți nelămuriri cu privire la modul în care le utilizați, anunțați-ne în termen comentarii.
Cu toate acestea, puteți consulta și resursele noastre, dacă aveți nevoie de mai multe elemente pentru a vă derula proiectele de creare a site-urilor de internet, consultați ghidul nostru cu privire la Creare blog WordPress sau cea de pe Divi: cea mai bună temă WordPress din toate timpurile.
Dar între timp, împărtășește acest articol pe diferitele rețele de socializare.
...
