Cum să adăugați efecte de hover pentru imagini în WordPress (Pas cu Pas)

Știm cât efort depuneți pentru a alege imaginile perfecte pentru site-ul dvs. web. Dar uneori, chiar și cele mai bune fotografii pot părea puțin statice, nereușind să capteze atenția completă a unui vizitator.

Adăugarea unei animații simple de hover poate fi detaliul mic care face ca site-ul dvs. să pară mai profesionist și mai captivant. Mulți cred că acest lucru necesită cod personalizat, dar am găsit mai multe modalități ușoare de a face acest lucru în propriile noastre proiecte, fără niciun fel de codare.

În acest articol, vă vom ghida prin cinci metode simple, pas cu pas, pentru a adăuga efecte frumoase de hover pe imagini în WordPress. Vom acoperi totul, de la fade-uri simple la flipbox-uri interactive.

De ce să folosiți efecte de hover pe imagini în WordPress?

Efectele de hover la imagini vă permit să adăugați scurte animații imaginilor dvs., cum ar fi zoom, fade, popup și multe altele. Acest lucru va face imaginile dvs. mai interesante și mai captivante, chiar dacă o pagină are multe imagini.

Puteți folosi, de asemenea, efecte de hover pentru a atrage atenția vizitatorului asupra celui mai important conținut. De exemplu, ați putea folosi animații CSS pentru a evidenția logo-ul site-ului dvs. web sau un apel la acțiune.

Să explorăm 5 moduri prietenoase pentru începători de a adăuga diferite efecte de hover pentru imagini pe site-ul dvs. WordPress. Pur și simplu utilizați linkurile rapide de mai jos pentru a sări direct la efectul pe care doriți să îl utilizați:

• Opțiunea 1: Adăugați efecte Flipbox în WordPress (Rapid și Ușor)
• Opțiunea 2: Adăugați efecte de zoom și mărire a imaginii (Ideal pentru magazine online)
• Opțiunea 3: Estomparea imaginilor la trecerea mouse-ului în WordPress (Cel mai bun pentru performanță)
• Opțiunea 4: Adăugați efecte multiple de hover pentru imagini în WordPress (Cel mai personalizabil)
• Opțiunea 5: Adăugați efecte de popup la hover pentru imagini folosind un editor CSS vizual
• Întrebări frecvente despre efectele de hover pe imagini
• Aflați mai multe modalități de a utiliza și gestiona imaginile în WordPress

Opțiunea 1: Adăugați efecte Flipbox în WordPress (Rapid și Ușor)

Cel mai simplu mod de a adăuga efecte de hover în WordPress este să folosești cutii flip. O cutie flip este pur și simplu o cutie care se răstoarnă atunci când treci mouse-ul peste ea. Acest lucru îți permite să afișezi o imagine, text sau un apel la acțiune diferit la trecerea mouse-ului.

Dacă ești fotograf, atunci ai putea afișa o fotografie pe o parte a flipbox-ului și informații despre modelul camerei sau rezoluție pe cealaltă parte.

Dacă vindeți artă digitală sau grafică online, atunci ați putea chiar să adăugați un buton pe care vizitatorii îl pot apăsa pentru a cumpăra acea fotografie.

Cel mai simplu mod de a crea flipbox-uri este folosind Flipbox – Awesomes Flip Boxes Image Overlay. Acest plugin gratuit vine cu mai multe stiluri diferite de flipbox, prezentând un amestec de imagini, text și butoane de apel la acțiune.

Primul lucru pe care va trebui să îl faceți este să instalați și să activați pluginul Flipbox. Pentru mai multe detalii, consultați ghidul nostru pas cu pas despre cum să instalați un plugin WordPress.

Odată ce pluginul este instalat și activat, puteți crea prima dvs. cutie flip accesând Flip Box » Create New.

Aceasta arată toate șabloanele diferite pe care le puteți utiliza.

Pentru a alege un design, continuați și faceți clic pe butonul său „Creați stil”.

În fereastra pop-up care apare, introduceți un nume pentru designul flipbox-ului. Acesta este doar pentru referința dvs., deci puteți folosi orice doriți.

Puteți alege, de asemenea, ce aspect doriți să utilizați, făcând clic pe 1, 2 sau 3.

După alegerea unui stil de flipbox, puteți modifica fonturile, spațierea și marginile.

Puteți apoi adăuga text, imagini și pictograme pe ambele părți ale casetei flip.

Când sunteți mulțumit de aspectul flipbox-ului, s-ar putea să doriți să adăugați mai multe casete făcând clic pe „+” în secțiunea „Adăugați noi casete flip”.

Acest lucru vă permite să creați mai multe flipbox-uri cu același stil și apoi să le organizați în coloane și rânduri.

De exemplu, ați putea crea un flipbox pentru fiecare plan de preț.

Cumpărătorii pot apoi să treacă cu mouse-ul peste un plan pentru a vedea costul.

Când sunteți mulțumit de animațiile de hover, o puteți adăuga pe orice pagină, postare sau zonă pregătită pentru widget folosind un shortcode pe care pluginul îl oferă automat.

Pentru instrucțiuni pas cu pas, consultați ghidul nostru despre cum să creați suprapuneri și efecte de hover pentru Flipbox.

Opțiunea 2: Adăugați efecte de zoom și mărire a imaginii (Ideal pentru magazine online)

Efectele de zoom permit utilizatorilor să vadă detalii care în mod normal nu ar fi vizibile. Dacă ai un magazin de eCommerce sau o piață online, atunci acest lucru permite cumpărătorilor să exploreze un produs în mai multe detalii, ceea ce îți poate aduce mai multe vânzări.

Efectele de zoom pot adăuga, de asemenea, mai multă interacțiune și implicare site-ului dvs.

De exemplu, ați putea crea puzzle-uri și jocuri simple care provoacă vizitatorii să identifice detalii mici în imaginile dvs. Acest lucru îi poate menține pe site mai mult timp, ceea ce va crește numărul de vizualizări ale paginilor și să scadă rata de respingere.

Cel mai bun plugin WordPress pentru a adăuga efecte de zoom și mărire a imaginilor este WP Image Zoom.

Acest plugin pentru efecte de hover vă permite să personalizați cum va arăta și cum va funcționa efectul de zoom pe întregul dvs. site WordPress. Puteți apoi activa zoom-ul pentru orice imagine.

Vom folosi versiunea gratuită în acest ghid, dar dacă doriți mai multe opțiuni de personalizare, ați putea dori să verificați WP Image Zoom Pro. Consultați recenzia WP Image Zoom pentru mai multe detalii.

Mai întâi, trebuie să instalați și să activați pluginul WP Image Zoom . Pentru mai multe detalii, consultați ghidul nostru pas cu pas despre cum să instalați un plugin WordPress.

După activare, trebuie să accesați pagina WP Image Zoom » Zoom Settings din bara laterală de administrare WordPress. Dacă nu este deja selectată, faceți clic pe „Zoom Settings”.

Pentru început, poți alege între câteva forme diferite de lentile.

Puteți, de asemenea, să selectați un tip de cursor, să setați un efect de animație, să activați zoom-ul la trecerea mouse-ului sau la clic, și să definiți un nivel de zoom.

Când sunteți mulțumit de modul în care este configurată funcția de zoom, puteți adăuga efectul oricărei imagini. În editorul de blocuri Gutenberg, faceți clic pentru a selecta imaginea la care doriți să adăugați un efect de zoom. Sau, încărcați o imagine mai întâi în WordPress.

În meniul din dreapta, selectați butonul „cu Zoom”.

Dacă utilizați WooCommerce, puteți activa zoom-ul pe toate imaginile produselor dvs. în setările plugin-ului. Acest lucru este ideal dacă doriți să activați zoom-ul pe întregul dvs. magazin online fără a fi nevoie să actualizați fiecare produs individual.

În fila „Setări generale”, bifează căsuța „Activare zoom...”, iar clienții vor putea mări orice imagine de produs.

Pentru mai multe detalii, vezi ghidul nostru despre cum să adaugi zoom de mărire pentru imagini în WordPress.

Opțiunea 3: Estomparea imaginilor la trecerea mouse-ului în WordPress (Cel mai bun pentru performanță)

O altă opțiune este o animație simplă de estompare, unde imaginile dvs. apar sau dispar lent atunci când un vizitator trece cu mouse-ul peste ele. Acesta este un mod excelent de a evidenția imaginile pe măsură ce utilizatorul se deplasează pe pagină.

Puteți folosi acest efect pentru a ghida vizitatorul prin conținutul dvs. sau chiar pentru a adăuga un element narativ la o postare.

Spre deosebire de unele animații complexe, efectul de estompare este foarte subtil. Nu va afecta negativ experiența de lectură și nu va interfera cu eforturile dvs. de optimizare a imaginilor.

Acest lucru îl face o alegere perfectă pentru paginile care au multe fotografii de înaltă rezoluție.

Cel mai simplu mod de a adăuga acest efect este folosind pluginul gratuit WPCode. Acesta vă permite să adăugați CSS personalizat fără a fi nevoie să editați fișierele temei direct, ceea ce este mult mai sigur.

Aici, la WPBeginner, folosim WPCode pentru a gestiona toate fragmentele personalizate care alimentează site-ul nostru. Este un instrument fiabil pe care îl recomandăm pentru adăugarea oricărui tip de cod personalizat. Pentru mai multe detalii, puteți citi recenzia noastră completă WPCode.

Pentru instrucțiuni complete despre utilizarea WPCode pentru acest efect, consultați ghidul nostru despre cum să estompezi imaginile la trecerea mouse-ului în WordPress.

Opțiunea 4: Adăugați efecte multiple de hover pentru imagini în WordPress (Cel mai personalizabil)

S-ar putea să doriți să utilizați mai multe efecte de hover diferite pentru imagini pe site-ul dvs. web. De exemplu, dacă aveți multe galerii de imagini, atunci ați putea dori să animați aceste fotografii în moduri diferite și interesante.

Cea mai bună modalitate de a adăuga efecte multiple de hover la WordPress este prin utilizarea Image Hover Effects Ultimate. Acest plugin gratuit suportă o gamă largă de efecte pe care le puteți personaliza pentru a se potrivi nevoilor dvs.

Primul lucru pe care trebuie să îl faci este să instalezi și să activezi pluginul Image Hover Effects Ultimate. Pentru mai multe detalii, vezi ghidul nostru pas cu pas despre cum să instalezi un plugin WordPress.

La activare, selectați „Image Hover” din tabloul de bord WordPress. Veți vedea acum toate tipurile diferite de efecte de hover pe care le puteți utiliza.

Pentru acest ghid, vom selecta „Efecte de legendă”, care adaugă text animat peste o imagine.

Puteți crea orice tip de efect de hover doriți, deși opțiunile pe care le vedeți pot varia.

După ce faceți clic pe „Caption Effects”, veți vedea toate stilurile diferite pe care le puteți utiliza.

Pur și simplu treceți mouse-ul peste un stil pentru a vedea o previzualizare a modului în care va arăta animația.

Când găsiți un stil care vă place, faceți clic pe butonul său „Create Style”.

Aceasta deschide o fereastră pop-up unde puteți alege exact aspectul pe care doriți să îl utilizați. Pur și simplu mergeți mai departe și faceți clic pe primul, al doilea sau al treilea.

Cu asta gata, introduceți un titlu în câmpul „Name”. Acesta este doar pentru referința dvs., deci puteți folosi orice vă ajută să identificați imaginea animată în tabloul de bord WordPress.

După aceea, faceți clic pe „Salvare”.

Aceasta vă duce la un ecran unde puteți personaliza efectul de hover. Acesta include modificarea lățimii și înălțimii conținutului, creșterea spațierii și adăugarea unei umbre de cutie.

Pe măsură ce faceți modificări, previzualizarea live se va actualiza automat, astfel încât să puteți încerca diferite setări pentru a vedea ce arată cel mai bine.

Pentru unele efecte de hover, puteți schimba direcția efectului.

De exemplu, în imaginea următoare, schimbăm direcția efectului de „jaluzele” astfel încât să meargă spre dreapta.

Puteți, de asemenea, să faceți efectul mai rapid sau mai lent trăgând glisorul „Timpul efectelor”. Dacă folosiți un număr mai mare, efectul va dura mai mult. Dacă micșorați numărul, efectul va fi mai rapid și mai scurt.

Dacă aveți în minte un număr specific, îl puteți introduce în caseta de lângă glisorul „Effects Time”.

Când sunteți mulțumit de modul în care este configurat efectul, este timpul să adăugați conținut.

Pentru a face acest lucru, plasați cursorul peste secțiunea „Preview” și faceți clic pe butonul „Edit” atunci când apare.

Aceasta deschide o fereastră pop-up unde puteți introduce un titlu și o scurtă descriere.

Acesta este conținutul care va apărea atunci când un vizitator trece cu mouse-ul peste imagine.

După aceea, puteți înlocui imaginea implicită cu propria dumneavoastră fotografie.

Pur și simplu plasați cursorul peste fotografia placeholder și apoi faceți clic pe „Alege imagine” când apare.

Acum puteți fie să alegeți o imagine din biblioteca media WordPress, fie să încărcați un fișier nou de pe computerul dvs.

Uneori, puteți folosi efecte de hover pentru a trimite oamenii către alte zone ale blogului dvs. WordPress sau site-ului web. De exemplu, dacă aveți o boutique online, atunci ați putea adăuga un link către produsul afișat în imagine.

Puteți face acest lucru adăugând un buton CTA, care va apărea sub descrierea scurtă.

Pentru a începe, adăugați URL-ul în câmpul „Link”.

Apoi, adăugați mesajul dumneavoastră tastând în câmpul Text buton.

Când sunteți mulțumit de informațiile introduse, faceți clic pe „Trimite”.

Acum că ați adăugat text, este o idee bună să faceți clic pe fila „Tipografie”.

Aici puteți modifica dimensiunea fontului, adăuga o umbră text, mări sau micșora marginile și multe altele.

Dacă utilizați un buton CTA, asigurați-vă că faceți clic pentru a extinde secțiunea „Setări buton”.

Aici, puteți schimba cum arată butonul în starea sa implicită și în starea „hover”, adică cum arată atunci când vizitatorul trece mouse-ul peste el. Puteți schimba, de asemenea, alinierea butonului.

Majoritatea acestor setări sunt simple, așa că merită să le parcurgeți pentru a vedea ce fel de efecte diferite puteți crea.

Când sunteți mulțumit de cum arată previzualizarea, faceți clic pe „Salvare” pentru a stoca modificările.

Doriți să creați un rând sau o coloană de imagini animate?

De exemplu, ați putea folosi efecte de hover pe imagini pentru a vă promova cele mai bune caracteristici ale produsului. În imaginea următoare, vizitatorul poate trece cu mouse-ul peste fiecare imagine pentru a citi despre o caracteristică diferită.

Doriți să creați un rând întreg sau o galerie a acestor imagini animate? Nicio problemă. Pentru a adăuga o altă imagine, derulați pur și simplu înapoi la secțiunea „Adaugă o nouă imagine hover”.

Aici, faceți clic pe butonul „+”.

Aceasta deschide o fereastră pop-up unde puteți crea un nou efect de hover la imagini, urmând același proces descris mai sus.

Când sunteți mulțumit de modul în care este configurat efectul, faceți clic pe butonul „Trimite” pentru a salva modificările.

Pentru a crea mai multe efecte de hover, pur și simplu repetați același proces descris mai sus.

Când sunteți mulțumit de modul în care sunt configurate efectele, derulați la caseta „Shortcode”. Puteți adăuga acest efect de hover la orice pagină sau postare prin copierea și lipirea acestui cod.

Pentru mai multe informații despre cum să plasați shortcode-ul, vă rugăm să consultați ghidul nostru despre cum să adăugați un shortcode în WordPress.

Opțiunea 5: Adăugați efecte de popup la hover pentru imagini folosind un editor CSS vizual

Multe dintre pluginurile de mai sus îți permit să construiești imagini animate avansate, cum ar fi flipbox-uri, și apoi să le plasezi pe o pagină folosind shortcode. Cu toate acestea, uneori, s-ar putea să vrei să adaugi un efect de hover unei imagini care se află deja pe pagină.

În acest caz, puteți utiliza un plugin CSS personalizat pentru WordPress. Acesta vă permite să faceți modificări vizuale imaginilor dvs. fără codare și, de asemenea, nu trebuie să creați efecte de hover separat în panoul de administrare WordPress.

Aici, recomandăm utilizarea CSS Hero. Acest plugin vă permite să editați aproape fiecare stil CSS de pe site-ul dumneavoastră WordPress folosind un editor vizual. De asemenea, vine cu efecte de hover încorporate pe care le puteți aplica imaginilor cu un singur clic.

Primul lucru pe care trebuie să-l faceți este să instalați și să activați pluginul CSS Hero. Pentru mai multe detalii despre instalarea unui plugin, consultați ghidul nostru despre cum să instalezi un plugin WordPress.

Odată ce pluginul este instalat, va trebui să faceți clic pe butonul „Continuare la activarea produsului”.

Acest lucru vă va duce pe site-ul CSS Hero, unde vă puteți conecta la contul dvs. și puteți obține o cheie de licență. Pur și simplu urmați instrucțiunile de pe ecran și veți fi redirecționat înapoi pe site-ul dvs. în câteva clicuri.

După aceea, deschideți pagina sau postarea care conține imaginea pe care doriți să o animați. Apoi, faceți clic pe ‘CSS Hero’ din bara de administrare WordPress.

Aceasta va deschide pagina sau postarea respectivă în editorul CSS Hero.

Aici, făcând clic pe orice element de conținut se va deschide un panou cu toate setările pe care le puteți utiliza pentru a personaliza acel conținut. Acestea fiind spuse, pur și simplu faceți clic pentru a selecta orice imagine.

În meniul din stânga, selectați fila „Snippets”.

Apoi, faceți clic pe „Efecte de hover”. Veți vedea acum toate efectele CSS diferite.

Pentru a previzualiza un efect, pur și simplu treceți cu mouse-ul peste butonul său albastru din meniul din stânga.

Când găsiți un efect pe care doriți să îl utilizați, faceți pur și simplu clic pe „Aplicare”.

Important: Implicit, CSS Hero va aplica acest efect de hover tuturor imaginilor de pe pagină. Acest lucru este excelent pentru a crea un stil uniform, dar dacă doriți să animați doar o singură imagine specifică, atunci una dintre celelalte metode de plugin din acest ghid ar putea fi mai potrivită.

Pentru a face această modificare live, faceți clic pe butonul „Salvare și publicare”.

Întrebări frecvente despre efectele de hover pe imagini

După ce am ajutat mii de utilizatori WordPress, am auzit practic toate întrebările posibile despre adăugarea de elemente interactive pe un site web. Iată câteva dintre cele mai frecvente întrebări pe care le primim despre efectele de hover pe imagini.

Efectele de hover pe imagini funcționează pe dispozitive mobile?

Efectele de hover sunt concepute pentru cursoarele mouse-ului, deci nu funcționează pe dispozitive tactile precum smartphone-uri și tablete. Pe mobil, imaginea va afișa de obicei starea sa implicită, fără nicio animație.

Unele plugin-uri oferă opțiuni de rezervă, cum ar fi declanșarea unei animații la prima atingere. Din acest motiv, recomandăm întotdeauna verificarea paginilor dvs. pe un smartphone sau tabletă pentru a vedea exact cum vor apărea imaginile dvs. vizitatorilor mobili.

Acest lucru asigură o experiență excelentă pentru toată lumea, indiferent de dispozitivul pe care îl folosesc! 👍

Adăugarea efectelor de hover pe imagini va încetini site-ul meu?

Majoritatea efectelor moderne de hover sunt create folosind CSS, care este foarte ușor și eficient. Când folosiți un plugin de calitate, aceste efecte nu ar trebui să aibă un impact vizibil asupra vitezei sau performanței site-ului dvs. web.

Pot adăuga efecte de hover pentru imagini fără un plugin?

Da, este posibil să adăugați efecte de hover pentru imagini scriind propriul cod CSS personalizat. Cu toate acestea, această metodă necesită cunoștințe tehnice și implică editarea fișierelor temei dvs., ceea ce poate fi riscant pentru începători.

Utilizarea unui plugin este cea mai sigură și mai ușoară metodă pentru majoritatea utilizatorilor, deoarece acesta se ocupă de tot codul pentru dvs.

Aflați mai multe modalități de a utiliza și gestiona imaginile în WordPress

Efectele de hover la imagini nu sunt singura modalitate de a adăuga mai mult interes vizual site-ului dvs. web. Iată și alte tutoriale pe care le puteți citi despre utilizarea imaginilor în WordPress:

• Cum să creați imagini interactive în WordPress
• Cum să măriți imaginile la clic în WordPress (3 metode ușoare)
• Cum să afișezi o fotografie înainte și după în WordPress (cu efect de glisare)
• Cum să adăugați o galerie în WordPress cu efect de lightbox
• Cum să adaugi filtre foto ca pe Instagram în WordPress (Pas cu Pas)
• Cum să folosiți AI pentru a genera imagini în WordPress
• Cum să adăugați GIF-uri animate în WordPress (Metoda CORECTĂ)

Sperăm că acest articol v-a ajutat să învățați cum să adăugați efecte de hover pentru imagini în WordPress. De asemenea, ați putea dori să vedeți selecțiile noastre de experți ale celor mai bune pluginuri de slider WordPress și lista noastră de surse de imagini gratuite din domeniul public.

Dacă ți-a plăcut acest articol, te rugăm să te abonezi la canalul nostru de YouTube pentru tutoriale video WordPress. Ne poți găsi, de asemenea, pe Twitter și Facebook.