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!

  • Luca Tumminello

    Buongiorno,
    Vorrei sapere come fosse possibile posizionare al centro dell’articolo il plug-in. Attraverso il CSS? E nell’eventualità cosa bisogna scrivere? Grazie mille

    • internetpost

      Ciao Luca,
      il posizionamento del plugin dipende sia da com’è strutturata la pagina che lo visualizzerà che dal contenitore (oggetto html) in cui verrà collocato il plugin stesso all’interno della pagina. In generale, la centratura si ottiene via HTML e le impostazioni di stile (CSS) e quindi, ad esempio, proprietà come padding-left/right, margin-left/right.