Cum să adăugați efecte de trecere a imaginii în WordPress 2024? [4 cei mai buni pași de urmat]

Ce sunt efectele hover în WordPress? Site-ul dvs. ar trebui să fie construit pentru a fi unic. Este dificil când toți ceilalți gândesc la fel. Vestea bună este că tehnologia contemporană simplifică designul site-ului.

Adăugarea de efecte de hover la fotografiile statice este un exemplu. Despre beneficiile aplicării efectelor hover la o imagine în WordPress. Apoi vă vom arăta cum să le încorporați pe site-ul dvs. web. Sa incepem!

Cum să adăugați efecte de trecere a imaginii în WordPress? 4 cei mai buni pași

După ce ați aflat despre efectele hover și avantajele acestora, este posibil să vă întrebați cum să le implementați. Din fericire, am creat un ghid cuprinzător pentru a face exact asta:

Efectele de hover pot fi adăugate prin cod personalizat. Cu toate acestea, dacă nu sunteți un programator experimentat, acesta poate fi un efort consumator de timp și uneori periculos.

Cu toate acestea, atunci când utilizați un plugin, lucrurile devin considerabil mai puțin complicate.

plugin gratuit Beaver Builder WordPress simplifică procesul de creare a site-urilor WordPress pe deplin funcționale și plăcute din punct de vedere estetic.

De la CSS modular la intuitiv glisați și plasați editorul de pagini, totul este proiectat având în vedere dezvoltatorul.

Ca un bonus suplimentar, această aplicație simplifică aplicarea efectelor de hover imaginilor sale. Nu puteți greși cu Beaver Builder pentru orice imagine care necesită un element interactiv suplimentar.

De asemenea, vă sugerăm să utilizați tema noastră Beaver Builder. Utilizați șabloanele de postări WordPress pentru a crea rapid o varietate de tipuri de postări, inclusiv pagini.

În acest fel, în loc să vă faceți griji cu privire la dezvoltarea machetelor, vă puteți concentra pe crearea de funcții captivante, cum ar fi efectele hover. Pe de altă parte, puteți utiliza Beaver Builder cu orice temă WordPress pe care o alegeți.

Pasul 1: Adăugarea unui modul foto

Înainte de a începe, activați pluginul Beaver Builder. Apoi accesați Pagini în administratorul WordPress. Activați editorul creând o pagină nouă sau selectând una existentă.

Apoi faceți clic pe semnul Plus din dreapta sus. Veți adăuga un modul Foto. Drag-and-drop vă permite să poziționați rapid acest modul.

Pasul 2: Activați modulul foto

Acest modul vă permite să postați fotografii pe site-ul dvs. Selectați o fotografie din biblioteca dvs. sau introduceți o adresă URL. În Biblioteca Media, decupați imaginea.

De asemenea, puteți modela o fotografie. Imaginile peisaj, panoramice, portret sau circulare pot folosi efectul de hover. Acum puteți include un link de imagine. Efectele de trecere cu mouse-ul pot fi folosite pentru a direcționa traficul către anumite adrese URL.

Pasul 3: Adăugați o clasă personalizată

După configurarea modulului de imagine, selectați Avansat. Acesta este Element HTML.

Derulați în jos la Clasă. Introduceți aici informațiile despre clasa personalizată a efectului. Așa că am adăugat hover-unblur la clasă. Efectele de trecere cu mouse-ul vă permit să schimbați culoarea și mișcarea unei imagini. Efecte de ridicare în Beaver Builder. Pe baza impactului, este necesară o clasă specială.

Pasul 4: Integrați efectul CSS

În cele din urmă, adăugați hover CSS pe site-ul dvs. Baza noastră de cunoștințe are CSS-ul hover. Timpul dintre efectele de hover este de 0.3 secunde. Sau când trimiteți CSS-ul. Puteți accelera sau încetini tranziția.

Selectați Setări globale din bara de titlu din stânga. Acum adăugați codul CSS la eticheta CSS.

Pe fiecare pagină Beaver Builder, accesați Instrumente > Setări globale și salvați-o. De asemenea, conținutul non-Beaver Builder este supus regulilor dvs. CSS.

O singură pagină în LayoutCSS&Jscript. Salvați modificările CSS. VEZI FIRST HOVER EFF Treceți cu mouse-ul peste imagine pentru a testa.

Aplicați efectul pe un rând sau pe o coloană de fotografii.

Link-uri rapide:

• Cum să creezi o paletă de culori pentru site-ul tău WordPress?
• Cum se creează o pagină în modul de întreținere în WordPress?
• Cum să creezi o pagină personalizată de eroare 404 în WordPress?
• Cum să gestionezi eficient comunicarea cu clienții?

Concluzie: Cum să adăugați efecte de trecere a imaginii în WordPress?

Există o mulțime de metode de personalizare a unui site web, dar una dintre cele mai simple este să folosești un efect de hover pe imagini. Efectele de trecere cu mouse-ul sunt o modalitate distractivă de a implica vizitatorii site-ului dvs. și de a-i menține acolo mai mult timp.

Aveți un efect de hover preferat pe care vă place să îl utilizați? Pune-l în zona de comentarii de mai jos!