Trebuie să adăugați efectul de hover în Elementor prin CSS personalizat?
Elementor are o funcție încorporată pentru a adăuga un efect de hover unui element (Am tratat acest lucru într-unul dintre articolele noastre. Deși caracteristica este suficient de utilă, are un dezavantaj. Puteți adăuga doar un efect de hover. O secțiune, o coloană, un widget Imagine, un widget Buton și un widget Postări.
Citiți și: Cum se instalează Elementor pe WordPress
Funcția integrată a efectului de hover a Elementor nu vă permite să adăugați efectul de hover la alte widgeturi, cum ar fi widgetul Editor text, widgetul Titlu, etc. Un alt dezavantaj este că puteți adăuga doar un efect de hover foarte simplu.
Există vreo altă opțiune pentru a adăuga efect de hover în Elementor?
Da este. Puteți adăuga efect de hover în Elementor prin CSS personalizat. Dar, pentru a adăuga CSS personalizat, trebuie să utilizați Elementor Pro, deoarece CSS personalizat este disponibil numai pe Elementor Pro.
Adăugarea unui efect de plutire în Elementor prin CSS personalizat
Înainte de a începe, să aruncăm o privire la exemplul efectelor de hover create prin CSS personalizat.
Spre deosebire de efectul de hover încorporat al Elementor, puteți utiliza această metodă pentru a adăuga un efect de hover la orice element din Elementor. Fie că este vorba despre o secțiune, o coloană sau un widget (toate widgeturile).
În acest exemplu, vă vom arăta cum să adăugați un efect de punct într-o coloană.
Mai întâi, faceți clic pe mânerul coloanei pentru a comuta la panoul de setări a coloanei. Odată ajuns acolo, accesați fila avansat și deschideți blocul pachet personalizat CSS și lipiți următorul cod CSS.
selector: hover {tranziție: toate .2s ușurință-în-ieșire; transformare: scară (1.1); cursor: punct; indice z: 1; }
Acolo.
Pe codul de mai sus folosim proprietatea CSS transforma () pentru a adăuga efectul hover. Tipul de transformare pe care îl folosim în acest exemplu este scala, cu o durată de 1,1 secunde.
Există alte 4 tipuri de transformare cu care puteți utiliza:transform
- Matrice
- Traduceți
- Roti
- oblic
Dacă doriți să utilizați un stil de transformare diferit, puteți înlocui doar valoarea lui transforma pe codul CSS de mai sus.
Puteți citi această pagină pentru a afla mai multe despre transformarea CSS.
Puteți urma același traseu pentru a adăuga un efect de plutire la alte elemente.
Pentru a adăuga un efect punct într-o secțiune, puteți face clic pe mânerul secțiunii și accesați fila avansat și deschideți blocul CSS personalizat.
Pentru a adăuga un efect de deplasare la un widget, puteți face clic pe mânerul widgetului și accesați din nou fila. Avansat, apoi deschideți blocul CSS personalizat.
Alte pluginuri premium WordPress suplimentare
Descoperă și altele WordPress plugin-uri premium care optimizează performanța blogului sau a site-ului dvs. WordPress.
1. Vânzări popup live
Live Sales Popup este o altă WordPress plug-in notificare cu mai multe bunătăți pe care le poți transforma în avantaj. În primul rând, el are posibilitatea afișați o fereastră pop-up când cineva finalizează o comandă. 
În al doilea rând, fereastra pop-up de vânzări în timp real poate afișa o notificare atunci când o persoană adaugă pur și simplu un articol în coș. Și în al treilea rând, puteți utiliza instrumentul pentru a stimula hype pentru un produs, arătând câți vizitatori au văzut articolul.
Cu cele mai noi tendințe web, vă puteți aștepta ca fereastra de vânzări live să se afișeze frumos pe toate dispozitivele și browserele. În ceea ce privește aspectul pop-up, îl puteți personaliza până la cel mai mic detaliu.
Citiți și: Cum de a repara o alertă de securitate pe blog-ul dvs. WordPress
Celelalte caracteristici ale Live Sales Popup sunt mai mult de treizeci de animații, sunete, numărătoarea inversă și poziționare personalizată. De asemenea, funcționează pentru notificări false și vă permite să o setați numai pentru anumite pagini în care doriți ca notificarea să își îndeplinească sarcina.
Descarca | Demo | web hosting
2. Foodify
Foodify este cea mai rapidă și ușoară modalitate prin care clienții pot comanda mâncare dintr-un magazin. Este în întregime sensibil și include funcții suplimentare, cum ar fi imaginea, opțiunea de căutare, informații despre produs. 
De asemenea, adaugă butoane la coș pentru a îmbunătăți experiența utilizatorului. Această extensie WooCommerce este o soluție de comandă rapidă și cuprinzătoare care poate fi adăugată oricărui site web WooCommerce.
Aici pentru tine Pluginurile 5 WordPress pentru a optimiza descrierile și etichetele categoriilor
Are avantajul de a fi foarte flexibil și compatibil cu multe pluginuri existente în directorul WordPress.
Descarca | Demo | web hosting
3. Mega Zoom & Pan Image Viewer
Pluginul Mega Zoom & Pan Image Viewer este un vizualizator de imagini grozav și un browser cu un aspect complet receptiv pentru afișarea imaginilor mari pe dvs. WordPress blog.
Acesta este un instrument puternic conceput pentru a prezenta produse (imagini de înaltă rezoluție ale produsului. Ex: îmbrăcăminte, mașini, diagrame tehnice etc.), afișarea hărților și a tuturor celorlalte imagini, datorită zoomului, funcției panoramic, comenzile sale de navigare, bara de derulare a acestuia, și markere / puncte de acces foarte personalizabile.
aici sunt 5 aplicații pentru smartphone pentru a vă proteja imaginile și videoclipurile
Acest plugin funcționează excelent pe iOS (iPad, iPhone), Android și Windows mobile etc. Funcționează și pe toate browserele moderne și pe browserele mai vechi precum IE7 sau IE8.
Descarca | Demo | web hosting
Alte resurse recomandate
De asemenea, vă invităm să consultați resursele de mai jos pentru a merge mai departe în controlul și controlul site-ului și blogului dvs.
- Cum să ștergeți toate comentariile în așteptare din WordPress
- Atunci când și cum se instalează WordPress într-un subdirector
- 5 plugin-uri WordPress pentru a adăuga bucuria Crăciunului pe site-ul dvs.
- Pluginurile 10 WordPress pentru a îmbunătăți vizibilitatea site-ului dvs.
Concluzie
Aici este ! Gata pentru acest ghid. Sperăm că acest articol v-a ajutat să adăugați efectul de hover în Elementor prin CSS personalizat. De asemenea, puteți citi articolul nostru pe Cum să remediați blocarea redării JavaScript și CSS în WordPress.
Cu toate acestea, veți putea, de asemenea, să ne consultați Resurse, 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.
Dacă aveți un prieten sau un comentariu, vă rugăm să îl lăsați în secțiune comentariu. Mai ales împărtășește acest articol pe diferitele rețele de socializare.
...
