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

Cercare di mostrare una trasformazione drammatica con immagini statiche affiancate può sembrare un po' piatto. Hai fatto un lavoro incredibile, ma il fattore 'wow' si perde quando i visitatori non possono interagire con il cambiamento da soli.

Abbiamo scoperto che uno dei modi migliori per evidenziare l'impatto di un prodotto o servizio è con uno slider interattivo prima e dopo. È uno strumento potente che abbiamo utilizzato nei nostri progetti per lasciare che i risultati parlino da soli.

In questo articolo, condivideremo i nostri due metodi testati e provati per aggiungere uno slider di foto prima e dopo al tuo sito WordPress. Abbiamo un'opzione facile per i principianti e una più personalizzabile per coloro che desiderano un maggiore controllo.

Quando usare uno slider di foto prima e dopo in WordPress

Un'immagine prima e dopo è una immagine interattiva che tipicamente mostra un qualche tipo di cambiamento.

I visitatori possono usare uno slider per passare tra le diverse 'versioni' dell'immagine in modo coinvolgente e interattivo.

Se gestisci un negozio online utilizzando un plugin come WooCommerce, allora una foto prima e dopo può mostrare l'effetto dei tuoi prodotti o servizi.

Devi semplicemente mostrare una foto del 'prima' con cui il cliente possa identificarsi e una foto del 'dopo' desiderabile. Questo farà sì che gli acquirenti vogliano comprare la cosa che li porta dallo stato 'prima' allo stato 'dopo'.

Se sei un affiliato, mostrare foto persuasive del prima e del dopo sul tuo sito web è un ottimo modo per promuovere i tuoi link di affiliazione e ottenere più vendite.

Trascinare un cursore per rivelare la foto del 'dopo' è anche un modo semplice per ottenere più coinvolgimento, il che può mantenere i visitatori sul tuo sito più a lungo. Questo può anche aiutare ad aumentare le tue visualizzazioni di pagina e ridurre il bounce rate in WordPress.

Detto questo, vediamo come puoi creare una foto del prima e del dopo in WordPress utilizzando un effetto di scorrimento. Usa semplicemente i collegamenti rapidi qui sotto per passare direttamente al metodo che desideri utilizzare:

• Metodo 1: Mostra una foto del prima e del dopo utilizzando un plugin gratuito (facile)
• Metodo 2: Mostra una foto del prima e del dopo utilizzando SeedProd (più personalizzabile)
• Frequently Asked Questions About Before and After Sliders

Metodo 1: Mostra una foto del prima e del dopo utilizzando un plugin gratuito (facile)

Il modo più semplice per creare foto del prima e del dopo è utilizzare il plugin Ultimate Before After Image Slider & Gallery – BEAF.

Il plugin BEAF ti consente di creare slider orizzontali e verticali e di personalizzare l'immagine con diverse etichette e colori.

Suggerimento importante: Affinché l'effetto slider funzioni perfettamente, le tue immagini ‘prima’ e ‘dopo’ devono essere esattamente delle stesse dimensioni (stessa larghezza e altezza in pixel). Questo assicura che si allineino correttamente. Puoi usare qualsiasi strumento di fotoritocco per ritagliare o ridimensionare le tue immagini prima di caricarle.

La prima cosa da fare è installare e attivare il plugin Ultimate Before After Image Slider & Gallery (BEAF). Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin WordPress.

Dopo l'attivazione, vai su Slider Prima e Dopo » Aggiungi Nuovo nella tua bacheca.

Per iniziare, digita un nome per lo slider di immagini. Questo è solo per tuo riferimento, quindi puoi usare qualsiasi cosa che ti aiuti a identificarlo.

Fatto ciò, puoi aggiungere l'immagine ‘prima’ scorrendo fino alla sezione ‘Immagine Prima’.

Qui, fai clic su ‘Carica’ e poi scegli un'immagine dalla libreria multimediale di WordPress o carica una nuova immagine dal tuo computer.

Per aiutare i motori di ricerca a comprendere questa immagine e mostrarla alle persone giuste, è una buona idea aggiungere del testo alternativo dell'immagine. Per farlo, digita semplicemente nel campo 'Testo alternativo immagine'.

Per maggiori informazioni sul testo alternativo, consulta la nostra guida per principianti all'ottimizzazione delle immagini per i motori di ricerca.

Fatto ciò, scorri fino alla sezione 'Dopo l'immagine'.

Ora puoi aggiungere l'immagine 'dopo' seguendo lo stesso processo descritto sopra. Non dimenticare di aggiungere anche del testo alternativo a questa immagine, poiché è importante per il SEO di WordPress.

Puoi anche mostrare del testo sotto l'immagine aggiungendo un titolo e una descrizione (come una didascalia).

Ad esempio, potresti incoraggiare i visitatori a interagire con lo slider. Questo è un ottimo modo per guidare i visitatori che potrebbero non avere familiarità con il funzionamento degli slider interattivi.

Questo è anche un modo semplice per aggiungere un po' di contesto all'immagine.

Per aggiungere del testo, digita semplicemente nei campi 'Titolo Slider' o 'Descrizione Slider'.

Puoi anche aggiungere un URL 'Leggi di più', che può collegarsi a qualsiasi post o pagina del tuo sito web WordPress o persino a un sito web esterno. Ad esempio, potresti inviare i visitatori a una pagina dove possono acquistare il prodotto presente nell'immagine dello slider.

Questo link apparirà sotto l'immagine prima/dopo e anche sotto qualsiasi titolo o descrizione dello slider che stai utilizzando.

Se stai collegando a un altro sito web, ti consigliamo di scegliere 'Nuova scheda' in modo da non inviare i visitatori lontano dal tuo blog WordPress.

Fatto ciò, puoi scegliere se creare uno slider verticale o orizzontale cliccando su una delle miniature nella sezione 'Stile di orientamento'.

Dopodiché, scorri fino in cima allo schermo e clicca su 'Opzioni'.

Qui vedrai che l''Offset predefinito' è impostato su 0,5. Ciò significa che il visitatore vede metà dell'immagine 'prima' quando la pagina viene caricata per la prima volta.

Se vuoi mostrare più dell'immagine precedente, digita un numero più grande, come 0,6, 0,7 o superiore.

Se vuoi mostrare l'intera immagine precedente, digita 1.

Questo posizionerà lo slider in alto o a destra dell'immagine precedente, come puoi vedere nell'immagine seguente.

Per impostazione predefinita, il plugin mostra le etichette 'Prima' e 'Dopo' quando il visitatore passa il mouse sopra l'immagine.

Potresti voler sostituire queste etichette con qualcosa di più descrittivo.

Per fare ciò, vai avanti e digita nei campi 'Etichetta prima' e 'Etichetta dopo'.

Per impostazione predefinita, i visitatori sposteranno lo slider trascinandolo. Alcune persone potrebbero trovarlo difficile, specialmente se hanno problemi di mobilità o utilizzano dispositivi più piccoli come smartphone o tablet.

Detto questo, potresti voler cambiare il modo in cui i visitatori spostano lo slider.

Se attivi il pulsante 'Attivato' accanto a 'Sposta slider al passaggio del mouse?', i visitatori potranno spostare lo slider semplicemente passando il mouse sopra l'immagine.

Se attivi il pulsante 'Clicca per spostare', i visitatori potranno cliccare in qualsiasi punto dell'immagine per spostare lo slider in quel punto.

Sebbene queste opzioni possano migliorare l'accessibilità, modificano il comportamento standard dello slider. Ti suggeriamo di testarle per vedere cosa risulta più intuitivo per i visitatori del tuo sito web.

Successivamente, clicca sulla scheda 'Stile'.

Qui, puoi cambiare i colori utilizzati per le diverse etichette, sfondi, intestazioni, descrizioni e il pulsante "leggi di più". Questo può aiutare l'immagine prima/dopo a integrarsi con il tuo tema WordPress o persino a distinguersi dal resto del design del tuo sito web.

Puoi anche cambiare la dimensione del carattere e l'allineamento del testo.

Quando sei soddisfatto di come è impostato lo slider, fai clic sul pulsante "Pubblica".

Questo crea uno shortcode che ti permette di aggiungere l'immagine prima/dopo e lo slider a qualsiasi pagina, post o area pronta per i widget.

Per maggiori informazioni su come posizionare lo shortcode, consulta la nostra guida su come aggiungere uno shortcode in WordPress.

Dopo aver aggiunto lo shortcode al tuo sito, fai semplicemente clic sul pulsante ‘Pubblica’ o ‘Aggiorna’ per rendere live l'immagine prima/dopo e l'effetto slider.

Metodo 2: Mostra una foto del prima e del dopo utilizzando SeedProd (più personalizzabile)

Se vuoi solo aggiungere un semplice slider a un post esistente, il plugin gratuito nel metodo 1 è un'ottima opzione. Tuttavia, se stai cercando di creare una landing page ad alta conversione, una sales page o anche un tema personalizzato che presenti un confronto prima e dopo, allora ti consigliamo di utilizzare SeedProd. È un potente costruttore di siti web che ti offre il controllo completo del design.

Qui a WPBeginner, utilizziamo SeedProd ampiamente per progettare siti web personalizzati per molti dei nostri marchi partner all'interno della famiglia Awesome Motive. La sua interfaccia drag-and-drop ci offre la flessibilità di creare pagine ad alta conversione rapidamente.

SeedProd è il miglior costruttore di pagine WordPress drag-and-drop. Viene fornito con oltre 300 modelli pronti all'uso che puoi utilizzare per creare landing page ad alta conversione, design di vendita, temi WordPress personalizzati e altro ancora.

Ha anche un blocco pronto all'uso 'Before After Toggle' che puoi utilizzare per creare bellissime immagini prima e dopo con cui i tuoi utenti possono interagire.

Trascina semplicemente il blocco dal menu di sinistra e poi rilascialo su qualsiasi design di pagina su cui stai lavorando, incluse le sales pages.

Se stai usando WooCommerce per vendere i tuoi prodotti, SeedProd si integra con WooCommerce e include anche blocchi speciali per l'eCommerce. Questo è perfetto se hai intenzione di utilizzare immagini prima e dopo per promuovere i tuoi prodotti WooCommerce.

Per informazioni su come utilizzare SeedProd, consulta la nostra guida su come creare una pagina personalizzata in WordPress.

Dopo aver creato una pagina, è facile aggiungere un'immagine prima e dopo al tuo design. Nell'editor di pagine di SeedProd, cerca semplicemente il blocco 'Before After Toggle'.

Puoi quindi trascinare e rilasciare questo blocco ovunque nel tuo design per aggiungerlo al layout della pagina.

Fatto ciò, fai semplicemente clic per selezionare il blocco 'Before After Toggle'. Il menu di sinistra si aggiornerà per mostrare tutte le impostazioni che puoi utilizzare per creare la tua immagine prima e dopo.

Per iniziare, dovrai aggiungere l'immagine che desideri utilizzare come immagine iniziale. Sotto 'Immagine iniziale', fai clic su 'Usa la tua immagine' o 'Usa un'Immagine di archivio' e scegli l'immagine che desideri utilizzare.

Per impostazione predefinita, SeedProd mostra l'etichetta 'Prima' sopra questa immagine. Tuttavia, puoi cambiarla in qualcosa di più descrittivo digitandola nel campo 'Etichetta iniziale'.

Fatto ciò, scorri fino alla sezione 'Dopo l'immagine'.

Ora puoi aggiungere un'immagine e personalizzare l'etichetta predefinita 'Dopo' seguendo lo stesso processo descritto sopra.

SeedProd può aggiungere un effetto di scorrimento verticale o orizzontale.

Per passare da uno stile all'altro, scorri fino alla sezione 'Orientamento slider' e quindi fai clic su 'Verticale' o 'Orizzontale'.

Per impostazione predefinita, i visitatori si sposteranno tra le immagini iniziale e finale trascinando lo slider.

Tuttavia, alcuni utenti potrebbero trovare più facile spostare il cursore passando il mouse sull'immagine. Ciò è particolarmente vero per le immagini più grandi dove il visitatore dovrebbe trascinare il cursore per una maggiore distanza.

Per provare questa impostazione, abilita ‘Muovi al passaggio del mouse’ nel menu a sinistra.

Successivamente, potresti voler aggiungere una sovrapposizione colorata sia alle immagini prima che dopo. Questo può aiutare l'immagine a fondersi con il resto dello schema di colori o a risaltare dallo sfondo.

Puoi anche rendere la sovrapposizione colorata semitrasparente per creare un effetto più sottile.

Per provare colori diversi, fai clic sulla sezione ‘Colore sovrapposizione’ e quindi apporta le modifiche nella finestra popup che appare.

Fatto ciò, puoi personalizzare la maniglia del cursore facendo clic per espandere la sezione ‘Maniglia di confronto’.

Per impostazione predefinita, SeedProd mostra metà dell'immagine 'prima' e metà dell'immagine 'dopo'. Per cambiare questo, trascina semplicemente il cursore ‘Offset iniziale maniglia’.

Per visualizzare meno dell'immagine precedente, trascina il cursore verso sinistra in modo che mostri un numero inferiore. Per mostrare più dell'immagine precedente, trascina il cursore verso destra, il che aumenta il numero.

Successivamente, puoi cambiare il colore del cursore utilizzando le impostazioni ‘Colore maniglia’.

Puoi anche rendere la maniglia più spessa o più sottile utilizzando il cursore ‘Spessore maniglia’.

In questo modo, puoi far risaltare la maniglia o creare un effetto più sottile.

Quando sei soddisfatto della maniglia, potresti voler cambiare il cerchio. Puoi rendere il cerchio più grande o più piccolo utilizzando le impostazioni ‘Larghezza cerchio’ e cambiare il ‘Raggio cerchio’ per creare angoli netti o curvi.

Mentre apporti le modifiche, l'anteprima live si aggiornerà automaticamente, così potrai provare diverse impostazioni per vedere cosa funziona meglio.

Quando sei soddisfatto del cerchio, potresti voler cambiare la dimensione dei triangoli al suo interno. Ad esempio, se hai ingrandito il cerchio, potresti voler aumentare anche la dimensione dei triangoli.

Per apportare questa modifica, trascina il cursore 'Dimensione triangolo' finché non sei soddisfatto del risultato.

Fatto ciò, puoi continuare ad aggiungere nuovi blocchi e personalizzare il contenuto della tua pagina SeedProd.

Quando sei soddisfatto dell'aspetto della pagina, fai clic sulla freccia accanto al pulsante 'Salva' e quindi seleziona 'Pubblica'.

Ora, se visiti il tuo sito web, vedrai il design della tua pagina con le immagini prima e dopo in tempo reale.

Domande frequenti sui cursori prima e dopo

Abbiamo risposto ad alcune delle domande più comuni che i nostri lettori hanno sulla creazione di cursori di foto prima e dopo in WordPress.

I plugin per foto prima e dopo sono gratuiti?

Il plugin Ultimate Before After Image Slider & Gallery, presentato nel Metodo 1, è completamente gratuito. SeedProd ha anche una versione gratuita disponibile, ma avrai bisogno di uno dei loro piani premium per accedere al blocco 'Before After Toggle'.

Quale metodo è migliore per creare un cursore prima e dopo?

Il metodo migliore dipende dalle tue esigenze. Per aggiungere rapidamente un semplice cursore a un post del blog, il plugin gratuito è un'ottima scelta. Se desideri un maggiore controllo sul design o stai creando una landing page personalizzata, ti consigliamo SeedProd per la sua flessibilità.

Posso creare un cursore con più di due immagini?

Gli strumenti in questa guida sono progettati specificamente per confrontare due immagini. Se hai bisogno di mostrare più immagini in sequenza, dovrai utilizzare un plugin per cursori WordPress dedicato come Soliloquy.

Un cursore prima e dopo rallenterà il mio sito web?

Come ogni immagine, i file di grandi dimensioni possono influire sulla velocità di caricamento del tuo sito. Per evitarlo, consigliamo sempre di ottimizzare le tue immagini per il web prima di caricarle su WordPress.

Scopri di più sui suggerimenti e trucchi per le immagini di WordPress

Vuoi altri suggerimenti e trucchi per personalizzare le tue immagini in WordPress? Dai un'occhiata a queste guide:

• Come aggiungere filtri fotografici simili a Instagram in WordPress (Passo dopo passo)
• Come creare overlay e hover Flipbox in WordPress
• Come aggiungere automaticamente una filigrana alle immagini in WordPress
• Come usare l'IA per generare immagini in WordPress
• Come aggiungere GIF animate in WordPress (Il MODO GIUSTO)
• Come creare facilmente uno slider responsive in WordPress

Speriamo che questo articolo ti abbia aiutato a imparare come aggiungere una foto prima e dopo al tuo sito web WordPress con un effetto slider. Puoi anche consultare la nostra guida su come aggiungere categorie e tag alla libreria multimediale di WordPress e le nostre scelte esperte dei migliori plugin per le immagini in evidenza di WordPress.

Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.