Cum să afișați o fotografie înainte și după în WordPress (cu efect de glisare)

Încercarea de a arăta o transformare dramatică cu imagini statice, una lângă alta, poate părea puțin fadă. Ați făcut o treabă uimitoare, dar factorul wow se pierde atunci când vizitatorii nu pot interacționa singuri cu schimbarea.

Am constatat că una dintre cele mai bune modalități de a evidenția impactul unui produs sau serviciu este cu un glisor interactiv înainte și după. Este un instrument puternic pe care l-am folosit în propriile noastre proiecte pentru a lăsa rezultatele să vorbească de la sine.

În acest articol, vom împărtăși cele două metode încercate și testate pentru adăugarea unui glisor de fotografii înainte-după pe site-ul dvs. WordPress. Avem o opțiune ușoară pentru începători și una mai personalizabilă pentru cei care doresc mai mult control.

Când să folosiți un glisor de imagini înainte-după în WordPress

O imagine înainte și după este o imagine interactivă care arată de obicei un fel de schimbare.

Vizitatorii pot folosi un glisor pentru a comuta între diferitele „versiuni” ale imaginii într-un mod captivant și interactiv.

Dacă aveți un magazin online folosind un plugin precum WooCommerce, atunci o fotografie înainte și după poate arăta efectul produselor sau serviciilor dumneavoastră.

Trebuie pur și simplu să arătați o fotografie „înainte” cu care clientul se poate identifica și o fotografie „după” dorită. Acest lucru îi va face pe cumpărători să vrea să cumpere lucrul care îi duce de la starea „înainte” la starea „după”.

Dacă sunteți un marketer afiliat, atunci afișarea unor fotografii persuasive înainte și după pe site-ul dvs. este o modalitate excelentă de a vă promova linkurile afiliate și de a obține mai multe vânzări.

Glisarea unui slider pentru a dezvălui fotografia „după” este, de asemenea, o modalitate ușoară de a obține mai multă implicare, ceea ce poate menține vizitatorii pe site-ul dvs. mai mult timp. Acest lucru poate, de asemenea, crește numărul de vizualizări ale paginilor și să reducă rata de respingere în WordPress.

Acestea fiind spuse, să vedem cum puteți crea o fotografie înainte și după în WordPress folosind un efect de glisare. Pur și simplu folosiți linkurile rapide de mai jos pentru a sări direct la metoda pe care doriți să o utilizați:

• Metoda 1: Afișați o fotografie înainte și după folosind un plugin gratuit (Ușor)
• Metoda 2: Afișarea unei fotografii înainte și după folosind SeedProd (Mai personalizabil)
• Frequently Asked Questions About Before and After Sliders

Metoda 1: Afișați o fotografie înainte și după folosind un plugin gratuit (Ușor)

Cel mai simplu mod de a crea fotografii înainte și după este prin utilizarea pluginului Ultimate Before After Image Slider & Gallery – BEAF.

Pluginul BEAF vă permite să creați glisoare orizontale și verticale și să personalizați imaginea cu diferite etichete și culori.

Sfat important: Pentru ca efectul de glisare să funcționeze perfect, imaginile dvs. „înainte” și „după” trebuie să aibă exact aceeași dimensiune (aceeași lățime și înălțime în pixeli). Acest lucru asigură că se aliniază corect. Puteți folosi orice instrument de editare foto pentru a decupa sau redimensiona imaginile înainte de a le încărca.

Primul lucru pe care trebuie să îl faceți este să instalați și să activați pluginul Ultimate Before After Image Slider & Gallery (BEAF). Pentru mai multe detalii, consultați ghidul nostru pas cu pas despre cum să instalați un plugin WordPress.

După activare, accesați Before and After Slider » Add New în tabloul de bord.

Pentru a începe, introduceți un nume pentru glisorul de imagini. Acesta este doar pentru referința dvs., deci puteți folosi orice vă ajută să-l identificați.

Cu asta făcut, puteți adăuga imaginea „înainte” derulând la secțiunea „Imagine înainte”.

Aici, faceți clic pe „Încărcare” și apoi alegeți o imagine din biblioteca media WordPress sau încărcați o imagine nouă de pe computerul dvs.

Pentru a ajuta motoarele de căutare să înțeleagă această imagine și să o afișeze persoanelor potrivite, este o idee bună să adăugați text alternativ pentru imagine. Pentru a face acest lucru, pur și simplu tastați în câmpul „Alt imagine”.

Pentru mai multe informații despre textul alternativ, vă rugăm să consultați ghidul nostru pentru începători despre SEO imagini.

Cu asta făcut, derulați la secțiunea „Imagine după”.

Acum puteți adăuga imaginea „după” urmând același proces descris mai sus. Nu uitați să adăugați și text alternativ la această imagine, deoarece este important pentru optimizarea SEO WordPress.

De asemenea, puteți afișa text sub imagine adăugând un titlu și o descriere (cum ar fi o legendă).

De exemplu, ați putea încuraja vizitatorii să interacționeze cu glisorul. Aceasta este o modalitate excelentă de a ghida vizitatorii care ar putea să nu fie familiarizați cu modul în care funcționează glisoarele interactive.

Aceasta este, de asemenea, o modalitate ușoară de a adăuga context imaginii.

Pentru a adăuga text, pur și simplu tastați în câmpurile „Titlu glisor” sau „Descriere glisor”.

Puteți adăuga, de asemenea, un URL „Citește mai mult”, care poate lega către orice postare sau pagină de pe site-ul dvs. WordPress sau chiar către un site web extern. De exemplu, ați putea trimite vizitatorii către o pagină unde pot cumpăra produsul prezentat în imaginea glisorului.

Acest link va apărea sub imaginea înainte/după și, de asemenea, sub orice titlu sau descriere a glisorului pe care îl utilizați.

Dacă faceți legătura către un alt site web, atunci recomandăm să alegeți „Fila nouă”, astfel încât să nu trimiteți vizitatorii departe de blogul dvs. WordPress.

Cu aceasta făcută, puteți alege dacă doriți să creați un glisor vertical sau orizontal, făcând clic pe una dintre miniaturile din secțiunea „Orientation Style”.

După aceea, derulați în partea de sus a ecranului și faceți clic pe „Opțiuni”.

Aici, veți vedea că „Offset implicit” este setat la 0,5. Aceasta înseamnă că vizitatorul vede jumătate din imaginea „înainte” atunci când pagina se încarcă pentru prima dată.

Dacă doriți să afișați mai mult din imaginea de dinainte, introduceți un număr mai mare, cum ar fi 0,6, 0,7 sau mai mare.

Dacă doriți să afișați întreaga imagine înainte, introduceți 1.

Acest lucru va plasa glisorul în partea de sus sau în dreapta imaginii inițiale, așa cum puteți vedea în imaginea următoare.

În mod implicit, pluginul afișează etichetele „Înainte” și „După” atunci când vizitatorul trece cu mouse-ul peste imagine.

S-ar putea să doriți să înlocuiți aceste etichete cu ceva mai descriptiv.

Pentru a face acest lucru, pur și simplu mergeți mai departe și tastați în câmpurile „Etichetă înainte” și „Etichetă după”.

În mod implicit, vizitatorii vor muta glisorul prin tragere și plasare. Unii oameni ar putea găsi acest lucru dificil, mai ales dacă au probleme de mobilitate sau folosesc dispozitive mai mici, cum ar fi smartphone-uri sau tablete.

Acestea fiind spuse, s-ar putea să doriți să schimbați modul în care vizitatorii mută glisorul.

Dacă activați butonul „Activat” de lângă „Mută glisorul la trecerea mouse-ului peste imagine?”, atunci vizitatorii pot muta glisorul pur și simplu trecând mouse-ul peste imagine.

Dacă activați butonul „Click To Move”, vizitatorii pot face clic oriunde pe imagine pentru a muta glisorul în acel punct.

Deși aceste opțiuni pot îmbunătăți accesibilitatea, ele modifică comportamentul standard al glisorului. Vă sugerăm să le testați pentru a vedea ce se simte cel mai intuitiv pentru vizitatorii site-ului dvs. web.

Apoi, faceți clic pe fila „Stil”.

Aici, puteți schimba culorile utilizate pentru diferitele etichete, fundaluri, titluri, descrieri și butonul „citește mai mult”. Acest lucru poate ajuta imaginea înainte/după să se îmbine cu tema dvs. WordPress sau chiar să iasă în evidență față de restul designului site-ului dvs. web.

Puteți, de asemenea, să schimbați dimensiunea fontului și alinierea textului.

Când sunteți mulțumit de modul în care este configurat glisorul, faceți clic pe butonul „Publicare”.

Acest lucru creează un shortcode care vă permite să adăugați imaginea înainte/după și glisorul în orice pagină, postare sau zonă pregătită pentru widget-uri.

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.

După ce adăugați shortcode-ul pe site-ul dvs., pur și simplu faceți clic pe butonul „Publicare” sau „Actualizare” pentru a face ca imaginea înainte/după și efectul de glisor să fie live.

Metoda 2: Afișarea unei fotografii înainte și după folosind SeedProd (Mai personalizabil)

Dacă doriți doar să adăugați un glisor simplu la un articol existent, metoda gratuită din metoda 1 este o opțiune excelentă. Cu toate acestea, dacă doriți să creați o pagină de destinație cu conversie ridicată, o pagină de vânzări sau chiar o temă personalizată care prezintă o comparație înainte și după, atunci vă recomandăm să utilizați SeedProd. Este un constructor de site-uri puternic care vă oferă control complet asupra designului.

Aici, la WPBeginner, folosim SeedProd extensiv pentru a proiecta site-uri web personalizate pentru multe dintre mărcile noastre partenere din familia Awesome Motive. Interfața sa drag-and-drop ne oferă flexibilitatea de a crea rapid pagini cu conversie ridicată.

SeedProd este cel mai bun constructor de pagini WordPress drag-and-drop. Acesta vine cu peste 300 de șabloane gata făcute pe care le puteți utiliza pentru a crea pagini de destinație cu conversie ridicată, designuri de vânzări, teme WordPress personalizate și multe altele.

De asemenea, are un bloc „Before After Toggle” gata făcut pe care îl puteți folosi pentru a crea imagini frumoase înainte și după cu care utilizatorii dvs. pot interacționa.

Pur și simplu trageți blocul din meniul din stânga și apoi plasați-l pe orice design de pagină la care lucrați, inclusiv pe pagini de vânzări.

Dacă folosiți WooCommerce pentru a vă vinde produsele, atunci SeedProd se integrează cu WooCommerce și vine chiar cu blocuri speciale pentru eCommerce. Acest lucru este perfect dacă intenționați să folosiți imagini înainte și după pentru a vă promova produsele WooCommerce.

Pentru informații despre cum să utilizați SeedProd, vă rugăm să consultați ghidul nostru despre cum să creați o pagină personalizată în WordPress.

După crearea unei pagini, este ușor să adăugați o imagine înainte și după în designul dvs. În editorul de pagini SeedProd, găsiți pur și simplu blocul „Before After Toggle”.

Puteți apoi să trageți și să plasați acest bloc oriunde în designul dvs. pentru a-l adăuga la aspectul paginii.

Cu asta făcut, pur și simplu faceți clic pentru a selecta blocul „Before After Toggle”. Meniul din stânga se va actualiza acum pentru a afișa toate setările pe care le puteți utiliza pentru a crea imaginea dumneavoastră înainte și după.

Pentru a începe, va trebui să adăugați imaginea pe care doriți să o utilizați ca imagine înainte. Sub „Imagine Înainte”, fie faceți clic pe „Utilizați propria imagine”, fie pe „Utilizați o Imagine de stoc” și alegeți imaginea pe care doriți să o utilizați.

Implicit, SeedProd afișează o etichetă „Înainte” deasupra acestei imagini. Cu toate acestea, o puteți schimba cu ceva mai descriptiv, tastând-o în câmpul „Etichetă Înainte”.

Cu asta făcut, derulați la secțiunea „Imagine după”.

Acum puteți adăuga o imagine și puteți personaliza eticheta implicită „După” urmând același proces descris mai sus.

SeedProd poate adăuga un efect de glisare verticală sau orizontală.

Pentru a comuta între aceste două stiluri, derulați la secțiunea „Orientare glisor” și apoi faceți clic pe „Vertical” sau „Orizontal”.

În mod implicit, vizitatorii vor naviga între imaginile înainte și după prin glisarea cursorului.

Cu toate acestea, unii utilizatori ar putea considera mai ușor să mute glisorul trecând mouse-ul peste imagine. Acest lucru este valabil în special pentru imaginile mai mari, unde vizitatorul ar trebui să tragă glisorul pe o distanță mai mare.

Pentru a încerca această setare, activați „Mutare la trecerea cu mouse-ul” în meniul din stânga.

Apoi, s-ar putea să doriți să adăugați o suprapunere colorată ambelor imagini, înainte și după. Acest lucru poate ajuta imaginea să se îmbine cu restul schemei de culori sau să iasă în evidență față de fundal.

Puteți chiar face stratul de suprapunere colorat semi-transparent pentru a crea un efect mai subtil.

Pentru a încerca diferite culori, faceți clic pe secțiunea „Overlay Color” și apoi faceți modificările în fereastra pop-up care apare.

Cu asta făcut, puteți personaliza mânerul glisorului făcând clic pentru a extinde secțiunea „Comparison Handle”.

Implicit, SeedProd afișează jumătate din imaginea „înainte” și jumătate din imaginea „după”. Pentru a schimba acest lucru, pur și simplu trageți glisorul „Offset Inițial”.

Pentru a afișa mai puțin din imaginea de dinainte, trageți glisorul spre stânga, astfel încât să arate un număr mai mic. Pentru a afișa mai mult din imaginea de dinainte, trageți glisorul spre dreapta, ceea ce mărește numărul.

Apoi, puteți schimba culoarea glisorului utilizând setările „Culoare mâner”.

Puteți, de asemenea, să faceți mânerul mai gros sau mai subțire folosind glisorul „Grosimea mânerului”.

În acest fel, puteți face ca mânerul să iasă în evidență sau să creați un efect mai subtil.

Când sunteți mulțumit de mâner, s-ar putea să doriți să schimbați cercul. Puteți face cercul mai mare sau mai mic folosind setările „Lățimea cercului” și puteți schimba „Raza cercului” pentru a crea colțuri ascuțite sau rotunjite.

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.

Când sunteți mulțumit de cerc, s-ar putea să doriți să schimbați dimensiunea triunghiurilor din interiorul acelui cerc. De exemplu, dacă ați mărit cercul, atunci s-ar putea să doriți să măriți și dimensiunea triunghiurilor.

Pentru a face această modificare, trageți glisorul „Triangle Size” până când sunteți mulțumit de aspectul său.

Cu asta făcut, puteți continua să adăugați noi blocuri și să personalizați conținutul paginii dvs. SeedProd.

Când sunteți mulțumit de aspectul paginii, faceți clic pe săgeata de lângă butonul „Salvare” și apoi selectați „Publicare”.

Acum, dacă vizitați site-ul dvs. web, veți vedea designul paginii dvs. cu imaginile înainte și după live.

Întrebări frecvente despre glisoarele înainte și după

Am răspuns la unele dintre cele mai frecvente întrebări pe care cititorii noștri le au despre crearea de glisoare foto înainte și după în WordPress.

Sunt pluginurile pentru fotografiile înainte și după gratuite?

Pluginul Ultimate Before After Image Slider & Gallery prezentat în Metoda 1 este complet gratuit. SeedProd are, de asemenea, o versiune gratuită disponibilă, dar veți avea nevoie de unul dintre planurile lor premium pentru a accesa blocul „Before After Toggle”.

Care metodă este mai bună pentru crearea unui glisor înainte și după?

Cea mai bună metodă depinde de nevoile dumneavoastră. Pentru a adăuga rapid un slider simplu la o postare de blog, pluginul gratuit este o alegere excelentă. Dacă doriți mai mult control asupra designului sau construiți o pagină de destinație personalizată, recomandăm SeedProd pentru flexibilitatea sa.

Pot crea un glisor cu mai mult de două imagini?

Instrumentele din acest ghid sunt concepute special pentru compararea a două imagini. Dacă trebuie să prezentați mai multe imagini într-o secvență, veți dori să utilizați un plugin dedicat de glisare WordPress, cum ar fi Soliloquy.

Va încetini un glisor înainte și după site-ul meu web?

Ca orice imagine, fișierele mari pot afecta viteza de încărcare a site-ului dvs. Pentru a preveni acest lucru, recomandăm întotdeauna optimizarea imaginilor pentru web înainte de a le încărca în WordPress.

Aflați mai multe despre sfaturile și trucurile pentru imagini WordPress

Doriți mai multe sfaturi și trucuri pentru a vă personaliza imaginile în WordPress? Consultați aceste ghiduri:

• Cum să adaugi filtre foto ca pe Instagram în WordPress (Pas cu Pas)
• Cum să creezi suprapuneri și efecte de hover pentru flipbox în WordPress
• Cum să adăugați automat o filigran la imaginile din WordPress
• Cum să folosiți AI pentru a genera imagini în WordPress
• Cum să adăugați GIF-uri animate în WordPress (Metoda CORECTĂ)
• Cum să creezi ușor un slider responsive în WordPress

Sperăm că acest articol v-a ajutat să învățați cum să adăugați o fotografie înainte și după pe site-ul dvs. WordPress cu un efect de glisare. Puteți, de asemenea, să consultați ghidul nostru despre cum să adăugați categorii și etichete în biblioteca media WordPress și selecțiile noastre de experți ale celor mai bune pluginuri pentru imagini de afișare WordPress.

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.