Cum să afișați imagini înainte și după cu efect glisor în WordPress

Să presupunem că sunteți un blogger de fitness și doriți să vă inspirați publicul împărtășind imaginile înainte și după transformarea corpului. În loc să plasați doar imaginile unul lângă altul, ar fi destul de interesant dacă puteți folosi un glisor de imagine înainte și după care să arate diferența.

Aștepta! Ce este un glisor de imagine înainte și după?

Este un glisor de imagine care stivuiește o imagine peste alta și folosește un glisor interactiv pentru a dezvălui imaginile. Dacă glisorul se deplasează orizontal, atunci prima imagine va fi dezvăluită atunci când glisorul se deplasează spre extrema dreaptă și a doua va fi vizibilă când se deplasează spre stânga.

Astfel de glisoare sunt utile pentru a compara două imagini similare. Prin urmare, poate fi util pentru un număr de profesioniști precum fotografi, cosmeticieni, designeri, medici și dentiști.

Dacă sunteți utilizator WordPress și vă întrebați cum îl puteți folosi pe site-ul dvs., atunci sunteți la locul potrivit. În acest articol, voi împărtăși cum puteți adăuga imagini înainte și după cu efect glisor pe site-ul dvs. web.

Deci, fără alte întrebări, să începem.

Abonați-vă la canalul nostru Youtube

Cum se adaugă înainte de glisorul de imagine

Există multe plugin-uri gratuite și premium cu ajutorul cărora puteți adăuga glisorul de imagine înainte-după pe o pagină web.

Cu toate acestea, vom folosi pluginul Twenty20 Image Before After din acest articol. Mai târziu, voi menționa și câteva alternative populare gratuite și premium.

Instalați Twenty20 Image Before After Plugin

Twenty20 este un plugin gratuit și este disponibil în depozitul de pluginuri WordPress. Vă permite să adăugați glisoare de imagine înainte-după în postări, pagini și bara laterală. De asemenea, acceptă constructori de pagini populari precum Elementor și WPBakery.

Pentru a instala acest plugin, accesați Plugins -> Add New și căutați Twenty20 Image Before-After. După ce găsiți pluginul, instalați-l și activați-l:

Adăugați o imagine înainte-după în postarea sau pagina dvs.

Pluginul Twenty20 nu vine cu nicio pagină de setări. Deci, puteți începe să faceți lucrurile murdare după instalarea pluginului.

Acum, după actualizarea WordPress 5.0, este posibil să folosiți fie editorul Classic, fie editorul Gutenberg. Deci, permiteți-mi să vă arăt cum funcționează acest plugin atât pentru editori.

Editor Gutenberg

Pluginul Twenty20 nu are un bloc până acum, dar puteți utiliza funcționalitatea shortcode și adăugați codul în blocul shortcode.

Să aruncăm o privire la un exemplu de cod scurt:

[twenty20 img1 = ”3442 ″ img2 =” 3442 ″ direction = ”horizontal” offset = ”0,4 ″ align =” none ”width =” 100% ”before =” Before ”after =” After ”hover =” false ”]

Permiteți-mi să explic fiecare dintre parametri:

• img1 - Aici trebuie să adăugați ID-ul imaginii (nu adresa URL a imaginii) a primei imagini.
• img2 - Adăugați ID-ul (și nu adresa URL a imaginii) pentru a doua imagine.
• direcție - Aceasta vă permite să decideți dacă doriți cursorul în direcția orizontală sau verticală. Deci, valoarea va fi orizontală sau verticală.
• offset - Valoarea offsetului ar trebui să fie între 0,1 și 1.
• align - Aceasta determină alinierea imaginii înainte-după. Valoarea nu poate fi nici una, nici stânga, nici dreapta.
• lățime - Lățimea imaginii poate fi în procente sau pixeli.
• înainte - Puteți adăuga subtitrarea imaginii anterioare aici.
• after - Adăugați legenda imaginii after.
• hover - Acest parametru decide dacă doriți să mutați glisorul în mișcarea mouse-ului. Acceptă o valoare adevărată sau falsă.

Nu știți cum să găsiți ID-ul unei imagini? Accesați Media -> Library din bara laterală stângă a tabloului de bord WordPress și faceți clic pe imagine. Acum verificați bara de adrese a browserului dvs. web:

În exemplul de mai sus, puteți vedea articolul = 50 în adresa URL. Deci, 50 este ID-ul acelei imagini.

Bine! Acum, că știți cum să utilizați codul scurt Twenty20, creați (sau editați) o postare sau o pagină în care doriți să adăugați glisorul de imagine înainte-după. Apoi, adăugați un bloc nou și căutați widgetul cu cod scurt:

Copiați codul pe care l-am folosit în exemplul de mai sus, lipiți-l în caseta shortcode și modificați-l conform cerințelor dvs.:

Asta e. Acum puteți previzualiza postarea (sau pagina) și puteți verifica dacă funcționează corect sau nu.

Editor clasic

Dacă utilizați Editorul clasic, veți vedea un nou buton Adăugați douăzeci și 20 după instalarea pluginului. Faceți clic pe butonul respectiv și se va deschide o fereastră pop-up care vă va cere să selectați două imagini:

După ce ați selectat două imagini și ați făcut clic pe Inserare, se va deschide o nouă fereastră care vă va solicita câteva detalii pentru generarea codului scurt:

După ce ați terminat setările, puteți face clic pe butonul Insert Shortcode.

De asemenea, puteți face modificări la acest scurtcod mai târziu - urmați exemplul din secțiunea Editor Gutenberg.

Adăugați o imagine înainte-după în bara laterală

Pluginul Twenty20 vă permite, de asemenea, să adăugați imagini înainte-după în bara laterală a site-ului dvs. web. Vine cu un widget care face treaba grozavă pentru tine.

Accesați Aspect -> Widgeturi. Acum găsiți widgetul Twenty20 și trageți-l în zona barei laterale. Setările acestui widget sunt similare cu secțiunea anterioară - doar aveți două butoane suplimentare pentru selectarea (sau încărcarea) imaginilor înainte și după.

După ce ați terminat, salvați setările widgetului și apoi verificați site-ul web. Simplu, nu-i așa?

Unele pluginuri alternative

Deși îmi place pluginul Twenty20, deoarece este simplu și gratuit, este posibil să preferați altceva. Prin urmare, am decis să împărtășesc câteva alternative gratuite și premium la acest plugin:

1. Înainte + După imagini pentru Divi

Dacă sunteți un utilizator Divi, Înainte + După imagini pentru pluginul Divi este cel mai potrivit pentru nevoile dvs. Este ușor, receptiv și acceptă încărcarea leneșă. Se creează un nou modul care vă ajută să adăugați imagini înainte și după site-ul dvs. web. Acest plugin gratuit va funcționa cu pluginul Divi Builder, tema Divi și alte teme de la Elegant Themes.

Preț - Gratuit | Mai multe informatii

2. Multipurpose Before After Slider

Multipurpose Before After Slider este un plugin premium activat prin atingere și glisare. Acesta vine cu un panou de administrare ușor de utilizat, care vă ajută să modificați fiecare glisor de imagine în funcție de nevoile dvs. și nu necesită utilizarea codurilor scurte. Puteți crea imagini nelimitate înainte și după și le puteți utiliza în postări, pagini și în bara laterală.

Preț - 18 USD | Mai multe informatii

3. Smart Before After After Viewer

Smart Before After After Viewer este un plugin premium complet receptiv și tactil. Vă permite să adăugați texte de etichetă personalizate pe imagini înainte și după. Și puteți schimba poziția și culoarea etichetelor fără probleme. Acest plugin vă permite, de asemenea, să adăugați mai multe imagini pe o singură pagină.

Preț - 18 USD | Mai multe informatii

Notă finală

Un glisor de imagine înainte-după este o modalitate excelentă de a arăta diferențele dintre două imagini identice. Și puteți utiliza astfel de glisante pe site-ul dvs. WordPress urmând acest tutorial.

Deci, ați folosit vreodată vreunul dintre pluginurile menționate în acest articol? Sau, doriți să sugerați un anumit plugin care să fie adecvat pentru a obține același lucru? Spuneți-ne în secțiunea de comentarii.

Imagine prezentată prin __ / shutterstock.com