Come mostrare le immagini prima e dopo con effetto slider in WordPress

Supponiamo che tu sia un blogger di fitness e desideri ispirare il tuo pubblico condividendo le immagini prima e dopo la trasformazione del tuo corpo. Invece di posizionare semplicemente le immagini fianco a fianco, sarebbe piuttosto interessante poter utilizzare un dispositivo di scorrimento dell'immagine prima e dopo per mostrare la differenza.

Aspettare! Che cos'è un dispositivo di scorrimento dell'immagine prima e dopo?

È un cursore di immagine che impila un'immagine sopra l'altra e utilizza un cursore interattivo per rivelare le immagini. Se il cursore si sposta orizzontalmente, la prima immagine verrà rivelata quando il cursore si sposta all'estrema destra e la seconda sarà visibile quando si sposta a sinistra.

Tali dispositivi di scorrimento sono utili per confrontare due immagini simili. E quindi, può essere utile per un numero di professionisti come fotografi, estetisti, designer, medici e dentisti.

Se sei un utente WordPress e ti stai chiedendo come puoi usarlo sul tuo sito web, allora sei nel posto giusto. In questo articolo, condividerò come puoi aggiungere immagini prima e dopo con l'effetto slider sul tuo sito web.

Quindi, senza ulteriori indugi, iniziamo.

Iscriviti al nostro canale Youtube

Come aggiungere il cursore dell'immagine prima dopo?

Esistono molti plug-in gratuiti e premium con i quali è possibile aggiungere il dispositivo di scorrimento dell'immagine prima-dopo su una pagina web.

Tuttavia, in questo articolo utilizzeremo il plugin Twenty20 Image Before After. Più avanti, menzionerò anche alcune popolari alternative gratuite e premium.

Installa Twenty20 Image Before After Plugin

Twenty20 è un plugin gratuito ed è disponibile nel repository dei plugin di WordPress. Ti consente di aggiungere dispositivi di scorrimento delle immagini prima e dopo nei tuoi post, pagine e barra laterale. Supporta anche i page builder più diffusi come Elementor e WPBakery.

Per installare questo plugin, vai su Plugin -> Aggiungi nuovo e cerca Twenty20 Image Before-After. Una volta trovato il plugin, installalo e attivalo:

Aggiungi un'immagine prima-dopo nel tuo post o pagina

Il plugin Twenty20 non viene fornito con alcuna pagina delle impostazioni. Quindi puoi iniziare a fare il lavoro sporco dopo aver installato il plugin.

Ora, dopo l'aggiornamento di WordPress 5.0, potresti utilizzare l'editor Classic o Gutenberg. Quindi lascia che ti mostri come funziona questo plugin su entrambi gli editor.

Gutenberg Editore

Il plugin Twenty20 non ha ancora un blocco, ma puoi usare la sua funzionalità shortcode e aggiungere il codice nel blocco shortcode.

Diamo un'occhiata a un esempio di shortcode:

[twenty20 img1=”3442″ img2=”3442″ direction=”horizontal” offset=”0.4″ align=”none” width=”100%” prima=”Prima” dopo=”Dopo” hover=”false”]

Lascia che ti spieghi ciascuno dei parametri:

• img1 – Qui devi aggiungere l'ID immagine (non l'URL dell'immagine) della prima immagine.
• img2 – Aggiungi l'ID (e non l'URL dell'immagine) della seconda immagine.
• direzione – Questo ti permette di decidere se vuoi che il cursore sia in direzione orizzontale o verticale. Quindi, il valore sarà orizzontale o verticale.
• offset : il valore dell'offset deve essere compreso tra 0,1 e 1.
• align – Determina l'allineamento dell'immagine prima-dopo. Il valore può essere nessuno, sinistro o destro.
• larghezza – La larghezza dell'immagine può essere in percentuale o in pixel.
• prima : qui puoi aggiungere la didascalia dell'immagine precedente.
• dopo : aggiunge la didascalia dell'immagine successiva.
• hover – Questo parametro decide se vuoi spostare il cursore al movimento del mouse. Accetta un valore vero o falso.

Non sai come trovare l'ID di un'immagine? Vai su Media -> Libreria dalla barra laterale sinistra della dashboard di WordPress e fai clic sull'immagine. Ora controlla la barra degli indirizzi del tuo browser web:

Nell'esempio sopra, puoi vedere item = 50 nell'URL. Quindi, 50 è l'ID di quella particolare immagine.

Va bene! Ora che sai come utilizzare lo shortcode Twenty20, crea (o modifica) un post o una pagina in cui desideri aggiungere il dispositivo di scorrimento dell'immagine prima-dopo. E poi, aggiungi un nuovo blocco e cerca il widget shortcode:

Copia il codice che ho usato nell'esempio sopra, incollalo nella casella shortcode e modificalo secondo le tue esigenze:

Questo è tutto. Ora puoi visualizzare l'anteprima del post (o della pagina) e verificare se funziona correttamente o meno.

Editor classico

Se stai usando l'editor classico, vedrai un nuovo pulsante Aggiungi Twenty 20 dopo aver installato il plugin. Fai clic su quel pulsante e si aprirà una finestra pop-up che ti chiederà di selezionare due immagini:

Una volta selezionate due immagini e cliccato su Inserisci, si aprirà una nuova finestra che ti chiederà alcuni dettagli per generare lo shortcode:

Una volta che hai finito con le impostazioni, puoi fare clic sul pulsante Inserisci Shortcode.

Puoi anche apportare modifiche a questo shortcode in un secondo momento: segui l'esempio nella sezione Editor Gutenberg.

Aggiungi un'immagine prima-dopo nella barra laterale

Il plugin Twenty20 ti consente anche di aggiungere immagini prima e dopo nella barra laterale del tuo sito web. Viene fornito con un widget che fa il lavoro fantastico per te.

Vai su Aspetto -> Widget. Ora trova il widget Twenty20 e trascinalo nell'area della barra laterale. Le impostazioni di questo widget sono simili alla sezione precedente: hai solo due pulsanti extra per selezionare (o caricare) le immagini prima e dopo.

Al termine, salva le impostazioni del widget e controlla il tuo sito web. Semplice, no?

Alcuni plugin alternativi

Anche se mi piace il plugin Twenty20 perché è semplice e gratuito, potresti preferire qualcos'altro. Quindi, ho deciso di condividere alcune alternative gratuite e premium a questo plugin:

1. Prima + Dopo le immagini per Divi

Se sei un utente Divi, il plug-in Before + After Images per Divi è il migliore per le tue esigenze. È leggero, reattivo e supporta il caricamento lento. Crea un nuovo modulo che ti aiuta ad aggiungere immagini prima e dopo al tuo sito web. Questo plugin gratuito funzionerà con il plugin Divi Builder, il tema Divi e altri temi di Elegant Themes.

Prezzo – Gratuito | Maggiori informazioni

2. Dispositivo di scorrimento multiuso prima dopo

Multiuso Before After Slider è un plug-in premium abilitato al tocco e allo scorrimento. Viene fornito con un pannello di amministrazione facile da usare che ti aiuta a modificare ogni dispositivo di scorrimento dell'immagine secondo le tue esigenze e non richiede l'uso di shortcode. Puoi creare immagini prima-dopo illimitate e usarle su post, pagine e barra laterale.

Prezzo – $ 18 | Maggiori informazioni

3. Smart Before After Viewer

Smart Before After Viewer è un plug-in premium completamente reattivo e touch-friendly. Ti consente di aggiungere testi di etichette personalizzati sulle immagini prima e dopo. E puoi cambiare la posizione e il colore delle etichette senza problemi. Questo plugin ti consente anche di aggiungere più immagini su una singola pagina.

Prezzo – $ 18 | Maggiori informazioni

Nota di chiusura

Un dispositivo di scorrimento dell'immagine prima-dopo è un ottimo modo per mostrare le differenze tra due immagini identiche. E puoi utilizzare tali slider sul tuo sito WordPress seguendo questo tutorial.

Quindi, hai mai usato uno dei plugin menzionati in questo articolo? Oppure, vorresti suggerire un plugin particolare adatto a realizzare lo stesso? Fatecelo sapere nella sezione commenti.

Immagine in primo piano tramite __ / shutterstock.com