Come mostrare prima e dopo la foto in WordPress (con effetto slide)

Vuoi mostrare le foto prima e dopo sul tuo sito web? Una foto prima e dopo può essere utile per visualizzare il confronto affiancato di due immagini identiche con differenze minori. In questo articolo, condivideremo come mostrare facilmente foto prima e dopo in WordPress.

Come funziona l'effetto foto prima e dopo?

Normalmente le persone usano Photoshop per creare un'immagine prima e dopo. È una singola foto che mostra gli effetti before / after e puoi aggiungerla come immagine statica sul tuo sito Web WordPress.

Un dispositivo di scorrimento fotografico funzionale è un modo interattivo per mostrare 2 diverse versioni di un'immagine simile a grandezza originale. È possibile spostare la maniglia del cursore per confrontare entrambe le immagini affiancate.

Diamo un'occhiata a come mostrare facilmente foto prima e dopo in WordPress.

Video Tutorial

Se non vuoi guardare il video tutorial, puoi continuare a leggere la versione di testo qui sotto:

Mostrare la foto prima e dopo in WordPress

La prima cosa che devi fare è installare e attivare il plug-in Immagine Prima-Dopo Twenty20. Per ulteriori dettagli, consulta la nostra guida passo passo su come installare un plug-in di WordPress.

Dopo l'attivazione, è necessario creare o modificare una pagina / post nell'area di amministrazione di WordPress in cui si desidera visualizzare l'immagine prima e dopo. Ora, fare clic su Aggiungi Twenty20 pulsante sopra l'editor di testo.

Aprirà la libreria multimediale di WordPress in un popup. Da qui, è necessario selezionare due immagini per il cursore prima e dopo.

Una volta selezionate le immagini, fare clic su Inserire pulsante.

Successivamente, visualizzerà i campi di testo per aggiungere contenuti in cima alle foto prima e dopo. È inoltre possibile aggiungere larghezza per il cursore, il valore di offset, la direzione del cursore e altro.

Successivamente, fai clic su Inserisci Shortcode pulsante per aggiungere la foto prima e dopo nella tua pagina di WordPress.

Puoi anche utilizzare il widget di immagini Twenty20 per visualizzare la foto prima e dopo nella barra laterale di WordPress. Semplicemente vai Aspetto »Widget sezione nel tuo amministratore di WordPress, quindi trascina il widget Dispositivo di scorrimento Twenty20 nell'area widget di Sidebar.

Il widget Dispositivo di scorrimento Twenty20 ha impostazioni simili per la foto prima e dopo come abbiamo condiviso sopra in questa guida. È possibile selezionare le 2 immagini una ad una nelle impostazioni del widget per creare il cursore della foto prima e dopo.

Ora puoi visitare il tuo sito Web per vedere la foto prima e dopo l'azione.

Mentre gli utenti fanno scorrere la maniglia verso ciascuna immagine, l'altra immagine diventerà visibile. Gli utenti possono portare il cursore completamente a destra o a sinistra per vedere l'intera immagine prima e dopo. Mentre gli utenti fanno scorrere le etichette prima e dopo scompariranno automaticamente.

Questo plugin funziona alla grande con i popolari costruttori di pagine WordPress come Beaver Builder ed Elementor per mostrare rapidamente foto prima e dopo nelle pagine del tuo sito web senza utilizzare i codici brevi.

Speriamo che questo articolo ti abbia aiutato a imparare come mostrare foto prima e dopo in WordPress. Potresti anche voler vedere la nostra guida su come aggiungere lo zoom ingranditore per le immagini in WordPress.

Se questo articolo ti è piaciuto, ti preghiamo di iscriverti al nostro canale YouTube per le esercitazioni video di WordPress. Puoi anche trovarci su Twitter e Facebook.