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 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!