Come inserire in WordPress un’immagine “prima e dopo”

WordPress permette di creare un effetto "prima e dopo" con le immagini della stessa dimensione e un plugin che si utilizza senza nessuna configurazione

Uno degli effetti più belli che si possa vedere su un sito WordPress è quello relativo al confronto “prima e dopo” di un’immagine. Se non sai bene di cosa sto parlando, ti propongo un’immagine qui sotto che è sicuramente più esplicativa di mille parole.

Come inserire in WordPress un'immagine “prima e dopo”

Come puoi notare, il confronto “prima e dopo” su un’immagine è il miglior modo di presentare un lavoro eseguito e far vedere la differenza che c’è fra prima che quel lavoro venisse effettuato e dopo che il lavoro è stato portato a termine. È utile, ad esempio, in caso di opere edilizie: far vedere come varia una stanza dopo un certo tipo di tinteggiatura, dopo aver apportato alcune variazioni alle pareti e via discorrendo. È anche utile dal punto di vista del design e dell’arredamento, per mostrare come è stata rinnovata una cucina, come è stato arredato un locale angusto e per tanto altro ancora.

Il confronto “prima e dopo” su un’immagine può essere utile anche per i blog personali, ad esempio per far vedere come procede la tua dieta, rendendo partecipi i lettori dei tuoi progressi.

La cosa più bella di questa tipologia di effetto è che ottenerla in WordPress è davvero semplice.

Se non mi credi, prova a seguire le istruzioni che ti fornisco di seguito.

Un plugin per l’effetto “prima e dopo” di WordPress

Per prima cosa, accedi al tuo back-end amministrativo di WordPress. Scarica e installa il plugin TwentyTwenty e, al termine del setup, ricordati di attivarlo. Questo add-on funziona in modalità out of the box (come i servizi di Hosting Solutions 😀 e non è un caso che questa dicitura sia il nostro slogan), cioè è pronto all’uso e non devi impazzire con nessun tipo di configurazione.

A questo punto, crea un nuovo articolo come sei solito fare in WordPress, e nell’articolo carica contemporaneamente due immagini che andranno a comporre l’effetto “prima e dopo”. In questo caso, devi avere la sola accortezza che le due immagini abbiano dimensioni identiche.

Una volta inserite le immagini, devi passare con l’editor in modalità Testo, cliccando sull’apposita linguetta e devi individuare il codice dove vengono riportate le due immagini. Subito prima della prima immagine e subito dopo il tag di chiusura dell’ultima immagine inserisci questi shortcode:

[twentytwenty]…[/twentytwenty]

in questo modo:

[twentytwenty]<img src=”http://www.esempio.com/wp-content/uploads/2014/12/prima-foto.jpg” alt=”Foto del prima” width=”604″ height=”402″ class=”…” />
<img src=”http://www.esempio.com/wp-content/uploads/2014/12/dopo-foto.jpg” alt=”Foto del dopo” width=”604″ height=”402″ class=”…” />[/twentytwenty]  

Ora, puoi salvare il post e goderti l’anteprima. L’effetto “prima e dopo” verrà automaticamente applicato, e le due immagini che hai caricato verranno sovrapposte con uno slider al centro che permette ai lettori di scorrere fra l’immagine del “prima” e l’immagine del “dopo”, come ti mostro nell’immagine in apertura del pezzo.

Ricorda che la prima immagine che hai caricato è quella del “prima”, mentre la seconda immagine è quella del “dopo”. Se l’effetto non è corretto, non devi fare altro che scambiare le due immagini.

Sulle immagini compariranno anche le etichette Before e After, che scompariranno non appena l’utente cercherà di muoversi verso destra o verso sinistra con lo slider.

Ed ecco realizzato in pochi step l’effetto “prima e dopo” di un’immagine in WordPress.

Come puoi vedere, non c’è niente di più facile!