Cum să adăugați zoom de mărire pentru imagini în WordPress

Doriți să adăugați un zoom de mărire, similar cu cel de la Amazon, pentru imaginile din WordPress? Un zoom de mărire este mai mult decât o funcție elegantă, este un instrument util care permite vizitatorilor dvs. să vadă detalii mici în imagini pe care în mod normal nu le pot vedea. 

Recomandăm cu tărie adăugarea unei funcții de zoom pentru magazinele online, unde clienții doresc să vadă textura și calitatea articolelor. Este utilă și pentru site-urile de fotografie, unde vizitatorii doresc să vadă fiecare detaliu dintr-o imagine.

Prin adăugarea unei funcții de mărire la imaginile dumneavoastră, puteți îmbunătăți experiența utilizatorului, puteți menține utilizatorii interesați mai mult timp și chiar puteți crește vânzările.

În acest articol, vă vom arăta cum să adăugați cu ușurință zoom de mărire pentru imagini în WordPress.

De ce să adăugați un zoom de mărire pentru imagini?

Adăugarea unei funcționalități de zoom cu lupă pe site-ul tău WordPress va permite vizitatorilor să vadă clar detaliile complexe ale imaginilor.

Dacă aveți un site web de fotografie, adăugarea unei funcții de mărire va permite utilizatorilor să mărească fotografiile dumneavoastră pentru a vedea detaliile fine.

Similar, dacă aveți un magazin online, atunci clienții dvs. vor putea mări imaginile produselor.

Multe site-uri web mari de comerț electronic folosesc deja zoom-ul de mărire pentru imaginile produselor. Permite clienților să examineze produsul și creează o experiență de cumpărare mai bună în magazinul dvs.

Acestea fiind spuse, vă vom arăta cum să adăugați cu ușurință un zoom de mărire pentru imagini în WordPress folosind trei metode diferite. Puteți folosi linkurile de mai jos pentru a sări la metoda preferată.

• Metoda 1: Adăugați un zoom cu lupă pentru imagini în WordPress cu Envira Gallery (Recomandat)
• Metoda 2: Adăugați un zoom de mărire pentru imaginile WordPress cu WP Image Zoom
• Method 3: Add a Magnifying Zoom for Images in WordPress with WPCode

Metoda 1: Cum să adăugați un zoom de mărire pentru imagini în WordPress cu Envira Gallery (Recomandat)

Envira Gallery este cel mai bun plugin de galerie pentru WordPress. Îl puteți folosi pentru a crea cu ușurință galerii de imagini frumoase pentru site-ul dvs. WordPress. De asemenea, vine cu un Addon Zoom, care vă permite să adăugați funcționalitate de zoom imaginilor din galerie.

Alte funcționalități puternice Envira includ un constructor drag and drop, teme de galerie predefinite, ferestre pop-up lightbox, compresie de imagini, protecție a imaginilor și multe altele.

Pentru a începe, trebuie să instalați și să activați pluginul Envira Gallery. Pentru mai multe detalii, puteți urma tutorialul nostru despre cum să instalezi un plugin WordPress.

După activare, trebuie să accesați pagina Envira Gallery » Settings și să introduceți cheia de licență. Puteți găsi cheia de licență în zona contului dvs. Envira Gallery.

După aceea, faceți clic pe butonul „Verify Key”.

Apoi, trebuie să accesați Envira Gallery » Addons. De aici, derulați în jos pentru a găsi Addon-ul Zoom și faceți clic pe butonul „Instalare”.

Odată ce Addon-ul Zoom este instalat, trebuie, de asemenea, să îl activați comutând comutatorul.

Următorul pas este să adăugați o galerie nouă. Pentru a face acest lucru, accesați Envira Gallery » Adăugare Nouă din tabloul de bord WordPress.

De aici, puteți introduce un nume pentru galeria dumneavoastră și puteți face clic pe butonul „Selectați fișiere de pe computer” pentru a încărca imagini în galeria dumneavoastră.

De asemenea, puteți face clic pe butonul „Selectați fișiere din alte surse” pentru a adăuga imagini din biblioteca media WordPress în galeria dvs.

Odată ce ați încărcat imagini în galeria dvs., le puteți rearanja trăgând și plasând miniaturile la locul lor.

Există și alte opțiuni pentru personalizarea galeriei de imagini. De exemplu, puteți selecta un aspect al galeriei, puteți adăuga titluri imaginilor și text alternativ, puteți activa lightbox-ul galeriei, puteți afișa legendele imaginilor, puteți edita dimensiunile imaginilor și multe altele.

Pentru mai multe detalii, consultați ghidul nostru despre cum să creezi galerii de imagini responsive cu Envira.

Configurați setările de zoom pentru imagini

Pentru a adăuga un zoom de mărire la imaginile galeriei dvs., faceți clic pe fila „Zoom”. Apoi, bifați căsuța pentru a activa funcționalitatea de zoom.

Odată ce funcționalitatea de zoom este activată, vor apărea setările pentru adăugarea zoom-ului la imaginile dvs.

Puteți configura setări precum zoom la hover, efect de zoom, tip de zoom, poziția ferestrei de zoom, dimensiunea ferestrei de zoom, culoarea nuanței și multe altele.

Când sunteți mulțumit de setările de zoom, faceți clic pe butonul „Publicare” pentru a salva modificările și a face această galerie disponibilă.

Încorporarea galeriei de imagini cu zoom de mărire

Acum că galeria dvs. este gata, o puteți adăuga direct pe orice pagină sau postare în WordPress.

Din editorul de conținut WordPress, pur și simplu faceți clic pe butonul „+” pentru a adăuga blocul Envira Gallery. Apoi, faceți clic pe meniul derulant din interiorul blocului Envira Gallery pentru a alege ce galerie să afișați.

Apoi, veți vedea o previzualizare a galeriei de imagini în editorul de blocuri WordPress. Dacă sunteți mulțumit de cum arată, puteți publica postarea sau pagina.

Acum puteți vizita site-ul dumneavoastră pentru a vedea funcția de mărire în acțiune.

Envira Gallery este un plugin excelent pentru adăugarea funcționalității de zoom pe site-urile de fotografie. Dar, funcționează perfect și pentru magazinele online.

Pentru a afla mai multe, consultați ghidul nostru despre cum să creați o galerie de imagini de produse WooCommerce (pas cu pas).

Metoda 2: Cum să adăugați un zoom de mărire pentru imagini în WordPress cu WP Image Zoom

WP Image Zoom este un plugin gratuit pentru WordPress care vă permite să creați cu ușurință o lupă pe imaginile dvs.

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.

Vom folosi versiunea gratuită în acest tutorial, dar dacă doriți mai multe opțiuni de personalizare, ați putea dori să consultați WP Image Zoom Pro. Puteți afla mai multe despre plugin în recenzia noastră WP Image Zoom.

După activare, trebuie să accesați pagina WP Image Zoom » Zoom Settings din bara laterală de administrare WordPress.

Apoi, trebuie să configurați setările efectului de zoom comutând la fila „Setări zoom” și alegând o formă de lentilă pe care doriți să o utilizați.

Puteți alege dintre formele de lentilă rotundă, pătrată și fereastră de zoom. Puteți chiar alege opțiunea „Fără lentilă” (⨯) dacă nu doriți să folosiți o formă pentru efectul de mărire.

După ce ați ales lentila preferată, trebuie să derulați în jos la următorul pas, unde puteți previzualiza o imagine cu lentila selectată pentru a vedea cum funcționează. Pluginul are o imagine de previzualizare pe care o puteți folosi pentru a vă testa modificările.

În continuare, trebuie să comutați la fila „General”.

De aici, puteți selecta un tip de cursor, puteți seta un efect de animație, puteți activa zoom-ul la hover sau la click pe mouse și puteți defini un nivel de zoom.

Dacă doriți și mai multe opțiuni, unele dintre funcționalități sunt disponibile doar pentru versiunea pro a pluginului WP Image Zoom.

După ce ați făcut alegerile în consecință, pur și simplu accesați fila ‘Lens’ din partea de sus.

Acum puteți configura setări precum dimensiunea lentilei, culoarea lentilei, opțiunile de margine ale lentilei și multe altele dacă ați selectat lentila ‘circulară’ sau ‘pătrată’ la Pasul 1.

Dacă ați selectat Zoom Window Lens, atunci trebuie să comutați la fila de configurare ‘Zoom Window’.

De aici, puteți schimba lățimea și înălțimea ferestrei de zoom, poziționarea, distanța față de imaginea principală, culorile marginilor și multe altele.

Apoi, trebuie pur și simplu să faceți clic pe „Save Changes” pentru a salva setările.

După aceea, tot ce trebuie să faceți este să configurați câteva setări generale.

Configurați setările generale ale pluginului

Apoi, trebuie să comutați la fila General Settings sub setările pluginului.

De aici, puteți activa acum funcții precum zoom pe imaginile produselor WooCommerce, miniaturi, dispozitive mobile, pagini de atașament, pagini de categorii de produse și multe altele.

Tot ce trebuie să faceți este să bifați pur și simplu căsuțele de lângă aceste opțiuni.

Puteți, de asemenea, să eliminați efectul LIGHBOX, astfel încât utilizatorii să poată mări imaginile lin.

Cu toate acestea, veți avea nevoie de versiunea Pro a pluginului pentru această funcționalitate.

Dacă nu veți elimina lightbox-ul pentru imagini, atunci trebuie să derulați în jos la opțiunea ‘Enable inside a Lightbox’ și să bifați căsuța de lângă ea.

Notă: Puteți vedea lightbox-urile suportate pentru a vă asigura că zoom-ul funcționează corect în interiorul unui lightbox pe site-ul dvs.

Odată ce ați terminat de ajustat setările, nu uitați să faceți clic pe butonul ‘Save Changes’ pentru a salva setările.

Zoom-ul de mărire va fi acum activat pentru produsele WooCommerce.

Puteți vizita magazinul dvs. online pentru a verifica funcția noastră de zoom.

Cu toate acestea, dacă doriți să activați zoom-ul pentru imaginile de pe postările și paginile WordPress, trebuie să urmați pasul de mai jos.

Activați zoom-ul de mărire pentru imagini în editorul de blocuri

În mod implicit, zoom-ul cu lupă nu este activat pentru imaginile din postările și paginile dvs. Trebuie să o faceți manual după adăugarea unei imagini la conținutul dvs.

Mai întâi, trebuie să deschideți un post pe care doriți să îl editați în editorul de blocuri.

Apoi, trebuie să încărcați o imagine în acel post din biblioteca media sau de pe computer.

Odată ce ați făcut acest lucru, faceți clic pe imagine pentru a deschide panoul Setări bloc în colțul din dreapta al ecranului.

De aici, pur și simplu accesați fila „Styles” și faceți clic pe butonul „With Zoom” pentru a aplica zoom-ul de mărire imaginii dvs.

După aceea, pur și simplu faceți clic pe butonul „Update” sau „Publish” din partea de sus pentru a salva setările.

Funcția de zoom va arăta așa pe site-ul dvs.:

Notă: Va trebui să repetați acest pas de fiecare dată când doriți să adăugați efectul de zoom unei imagini individuale.

Metoda 3: Cum să adăugați un zoom de mărire pentru imagini în WordPress cu WPCode

Puteți adăuga, de asemenea, o funcție de zoom de mărire imaginilor dvs. în WordPress folosind pluginul gratuit WPCode.

WPCode este cel mai bun plugin pentru fragmente de cod de pe piață, permițându-vă să adăugați în siguranță și ușor cod personalizat pe site-ul dvs. Vine cu peste 393 de fragmente de cod gata făcute pe care le puteți adăuga în doar câteva clicuri, inclusiv o lupă pentru imagini.

Pentru a începe, trebuie să instalați și să activați pluginul gratuit WPCode. Dacă aveți nevoie de ajutor, consultați tutorialul nostru despre cum se instalează un plugin WordPress.

După activare, accesați Code Snippets » Library din tabloul de bord WordPress.

Acest lucru te va duce la Biblioteca de Snippet-uri, unde poți vedea toate snippet-urile diferite pe care le poți adăuga pe site-ul tău.

De aici, caută pur și simplu fragmentul „Magnfier Glass for Images” în bibliotecă.

Odată ce îl găsești, plasează cursorul mouse-ului peste el și apasă butonul „Use snippet”.

WPCode va adăuga automat codul pentru dvs., precum și va selecta metoda corectă de inserare.

Acum, tot ce trebuie să faci este să comuți comutatorul din „Inactive” în „Active” și apoi să apeși butonul „Update”.

Gata! Când vizitați site-ul dvs. WordPress, veți vedea că toate imaginile dvs. vor avea o lupă care apare atunci când treceți cursorul peste ele.

Notă: Recomandăm utilizarea imaginilor de înaltă calitate pentru ca funcția de zoom să arate grozav. Imaginile de înaltă calitate sunt, în mod normal, mai mari ca dimensiune a fișierului și durează mai mult să se încarce, ceea ce va afecta viteza și performanța site-ului tău.

Pentru a rezolva această problemă, trebuie să optimizezi imaginile pentru web înainte de a le încărca în WordPress.

Tutorial video

Dacă nu sunteți un fan al tutorialelor scrise, puteți viziona în schimb tutorialul nostru video:

Abonează-te la WPBeginner

Sperăm că acest articol v-a ajutat să învățați cum să adăugați zoom de mărire pentru imagini în WordPress. De asemenea, ați putea dori să consultați ghidul nostru despre cum să optimizați imaginile pentru motoarele de căutare și selecțiile noastre de top pentru cele mai bune pluginuri de compresie a imaginilor.

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.