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

Doriți să afișați fotografiile înainte și după pe site-ul dvs.? O fotografie înainte și după fotografie poate fi utilă pentru afișarea comparativă a două imagini identice cu diferențe minore. În acest articol, vom împărtăși cum să arătăm cu ușurință înainte și după fotografie în WordPress.

Cum funcționează efectul foto înainte și după fotografie?

În mod normal, utilizatorii utilizează Photoshop pentru a crea o imagine înainte și după. Este o singură fotografie care prezintă efectele înainte / după, și o puteți adăuga ca o imagine statică pe site-ul dvs. WordPress.

Un slider foto funcțional este un mod interactiv de a afișa 2 versiuni diferite ale unei imagini similare în dimensiune completă. Puteți deplasa mânerul cursorului pentru a compara cele două imagini una lângă alta.

Să aruncăm o privire asupra modului de a afișa cu ușurință înainte și după fotografie în WordPress.

Tutorial video

Dacă nu doriți să urmăriți tutorialul video, puteți continua să citiți versiunea textului de mai jos:

Afișarea fotografiilor înainte și după în WordPress

Primul lucru pe care trebuie să-l faceți este să instalați și să activați pluginul Twenty20 Image Before-After. Pentru mai multe detalii, consultați ghidul nostru pas cu pas despre cum să instalați un plugin WordPress.

La activare, trebuie să creați sau să editați o pagină / post în zona de administrare WordPress unde doriți să afișați imaginea înainte și după. Acum, faceți clic pe Adăugați Twenty20 deasupra editorului de text.

Acesta va deschide Biblioteca Media WordPress într-un popup. De aici, trebuie să selectați două imagini pentru cursorul anterior și după.

Odată ce imaginile sunt selectate, faceți clic pe Introduce buton.

Apoi, va afișa câmpurile de text pentru a adăuga conținut în partea de sus a fotografiilor înainte și după. De asemenea, puteți adăuga lățimea pentru cursor, valoarea offset, direcția glisorului și multe altele.

După aceea, faceți clic pe Introduceți codul scurt pentru a adăuga fotografiile înainte și după în pagina WordPress.

De asemenea, puteți utiliza widgetul imagine Twenty20 pentru a afișa fotografiile înainte și după în bara laterală WordPress. Pur și simplu du-te la Aspect »Widgeturi secțiune din adminul dvs. WordPress, apoi trageți widgetul Slider Twenty20 în zona dvs. widget laterală.

Widgetul Twenty20 Slider are setări similare pentru fotografiile anterioare și ulterioare, așa cum am făcut mai sus în acest ghid. Puteți selecta cele două imagini una câte una în setările widgetului pentru a crea cursorul înainte și după fotografie.

Acum, puteți vizita site-ul dvs. web pentru a vedea înainte și după fotografie în acțiune.

Pe măsură ce utilizatorii glisă mânerul spre fiecare imagine, cealaltă imagine va deveni vizibilă. Utilizatorii pot lua cursorul până la dreapta sau în stânga pentru a vedea imaginea deplină înainte și după fotografie. Pe măsură ce utilizatorii glisă înainte și după etichetele vor dispărea automat.

Acest plugin funcționează excelent cu cei mai populari constructori de pagini WordPress cum ar fi Beaver Builder și Elementor pentru a afișa rapid înainte și după fotografie în paginile site-ului dvs. fără a utiliza coduri scurte.

Sperăm că acest articol v-a ajutat să învățați cum să afișați înainte și după fotografie în WordPress. De asemenea, este posibil să doriți să vedeți ghidul nostru privind modul de adăugare a zoom-ului pentru imagini în WordPress.

Dacă v-ați plăcut acest articol, vă rugăm să vă abonați la tutorialele video YouTube pentru canalul YouTube pentru WordPress. Ne puteți găsi pe Twitter și pe Facebook.