Evidenziazione del plugin Divi: Divi Sensei Before After Slider

I cursori Prima e Dopo sono un ottimo modo per consentire ai visitatori di confrontare due immagini. Come suggerisce il nome, possono essere immagini prima e dopo che qualcosa è cambiato, come la perdita di peso, un'immagine che è stata ritoccata, una stanza che è stata decorata, un'auto che è stata dipinta, ecc. Naturalmente, sono utili per molto più di prima e dopo le foto. Possono essere utilizzati per confrontare grafici, prodotti, destinazioni di vacanza e molto altro.

In questo articolo, daremo un'occhiata a Divi Sensei Before and After Slider, un modulo slider prima e dopo per Divi Builder, vedremo cosa può fare e ti aiuteremo a decidere se hai bisogno di questo plugin di terze parti nel tuo Divi cassetta degli attrezzi.

Divi Sensei prima e dopo il modulo di scorrimento

Carica e installa il plug-in Divi Sensei Before and After normalmente. Tre non sono impostazioni da seguire. Una volta caricato e attivato il plug-in, vedrai un nuovo modulo aggiunto a Divi Builder chiamato Sensei Before and After Slider.

Il modulo visualizza un'immagine prima a sinistra e un'immagine dopo a destra. Visualizza una barra di scorrimento al centro che gli utenti possono afferrare e far scorrere da un lato all'altro. Passando il mouse sopra le immagini rivela le etichette prima e dopo e aggiunge una sovrapposizione. Hai il controllo del design su ciascuno di questi elementi.

Diamo un'occhiata alle caratteristiche e alle opzioni dello slider. Per questi esempi, sto usando immagini da Unsplash.com.

Scheda Contenuto

La scheda Contenuto consente di aggiungere un'immagine prima, dopo l'immagine ed etichette. In questo esempio, ho aggiunto due diverse versioni della stessa immagine per creare l'immagine prima e dopo. Questo è utile per mostrare i risultati di una foto che è stata ritoccata. Le opzioni includono anche il collegamento standard, lo sfondo e le impostazioni dell'etichetta amministratore.

Fornisce inoltre campi in cui è possibile modificare il testo delle etichette prima e dopo. Sto passando sopra le immagini per rivelare le etichette. Vengono visualizzati solo al passaggio del mouse per impostazione predefinita, ma puoi cambiarlo.

Scheda Progettazione

La scheda Design include le impostazioni per il dispositivo di scorrimento, le etichette e la sovrapposizione. Include anche le impostazioni standard per il dimensionamento, la spaziatura, il bordo, l'ombra del riquadro, i filtri, la trasformazione e l'animazione.

dispositivo di scorrimento

Le impostazioni del dispositivo di scorrimento ti consentono di scegliere la direzione del dispositivo di scorrimento tra orizzontale e verticale, impostare l'offset iniziale per determinare dove inizia il dispositivo di scorrimento sulle immagini e modificare i colori del dispositivo di scorrimento, della maniglia, dello sfondo della maniglia e dell'icona della maniglia. Ho regolato ciascuna di queste impostazioni nell'esempio sopra.

etichette

Per le etichette, puoi farle visualizzare sempre o solo al passaggio del mouse e regolare gli sfondi e i caratteri. I colori di sfondo includono i colori a tinta unita e le regolazioni dell'opacità. Puoi regolare gli sfondi individualmente, ma non ti consente di regolare i colori del testo individualmente. Puoi anche scegliere i caratteri, modificarne le dimensioni, lo stile, l'allineamento, l'altezza della linea, aggiungere un'ombra, ecc. L'altezza della linea imposta la dimensione dello sfondo.

Nell'esempio sopra, ho specificato lo sfondo e i colori dei caratteri, ho cambiato la dimensione dei caratteri e la dimensione dell'altezza della linea. Li ho anche impostati per visualizzarli sempre in modo che siano visibili senza che l'utente debba passare con il mouse sulle immagini per vederli.

Sovrapposizione

L'overlay è abilitato per impostazione predefinita. Puoi disabilitarlo, regolare il colore e regolare l'opacità. Il colore predefinito è il nero con il 50% di opacità.

Ho selezionato il blu in questo esempio e ho lasciato l'opacità al 50%. Lasciare che l'immagine traspaia mentre si sta librando sembra funzionare meglio. Se usi un colore chiaro o scuro e la quantità di opacità che imposti sarà determinata dai colori nell'immagine e da come vuoi usare la sovrapposizione.

Per questo esempio, ho usato una combinazione di colori in bianco e nero. Il testo della sovrapposizione e dell'etichetta è bianco e gli elementi del dispositivo di scorrimento sono neri. Ho ridotto l'opacità degli sfondi dell'etichetta per scurirli. Li ho lasciati alle loro dimensioni predefinite.

Divi Sensei Esempi di slider prima e dopo

Diamo un'occhiata ad alcuni esempi di modi in cui il dispositivo di scorrimento può essere utilizzato e come appaiono all'interno dei layout Divi. Sto usando immagini di Unsplash e quelle disponibili nei layout Divi gratuiti integrati in Divi. Identificherò i layout Divi che sto usando mentre procedo.

Confronto grafico

Per questo, ho usato elementi di design dal pacchetto di layout Divi Video Game. Ho disabilitato l'overlay, cambiato gli elementi del cursore in verde e fatto in modo che le etichette fossero sempre visualizzate. Lo sfondo delle etichette è blu fisso. Ho aumentato la dimensione del carattere, cambiato il colore, utilizzato la famiglia di caratteri Rubik, creato il peso medio del carattere e li ho resi tutti in maiuscolo. Complimenti se hai posseduto o giocato a questi sistemi di gioco e sai perché questo confronto grafico inventato non può esistere.

Ecco come appare all'interno del layout. È eccellente per fare confronti come questo mockup della grafica di due diverse macchine da gioco.

Servizi prima e dopo il portfolio

Questo esempio riproduce l'idea di una stanza prima e dopo la ristrutturazione. Quando le due immagini sono di dimensioni diverse, utilizzerà la dimensione per l'immagine più grande e l'immagine più piccola mostrerà uno spazio vuoto. Collocherà le loro altezze o larghezze allo stesso modo e riempirà il resto come spazio vuoto. In questo esempio, l'immagine a destra è più corta dell'immagine a sinistra. Anche se avere immagini della stessa dimensione funziona meglio, funziona ancora bene con immagini che sono vicine alla stessa dimensione.

Ho aggiunto colori e caratteri dal pacchetto di layout Home Improvement. Ecco come appare all'interno di una porzione del layout.

Ecco come appare con l'overlay. Ho spostato il cursore su un lato per mostrare più dell'immagine precedente.

Per riferimento, ecco l'immagine con la maniglia spostata per mostrare più dell'immagine successiva.

Confronto prodotti

Per questo esempio, sto sostituendo le tre immagini del tè nel layout Tea Shop con 3 cursori DS B&A. Sto usando i colori del layout per i pulsanti e i controlli del cursore. Il cursore centrale è impostato su verticale solo per essere diverso. La sovrapposizione utilizza un colore del layout con opacità ridotta.

Ecco come appaiono all'interno del layout. Questo è eccellente per confrontare i dettagli visivi di più prodotti, più posizioni, più colori, per prodotti che hanno più opzioni da mostrare con e senza le opzioni, ecc.

Posizioni a confronto

In questo esempio, sto utilizzando il dispositivo di scorrimento per confrontare due posizioni. Non devono essere simili, solo qualcosa da confrontare per un motivo o per l'altro. Ho aggiunto i colori dal layout per il dispositivo di scorrimento e le etichette, nonché i caratteri per le etichette. Ho anche aggiunto un'ombra di riquadro per aiutarlo a distinguersi dal resto delle immagini.

Ecco come appare all'interno del pacchetto di layout Siteseeing utilizzando i colori del layout. Questo è un buon esempio di come le due immagini non debbano essere un prima e un dopo della stessa cosa o addirittura cose simili. Questo è un buon modo per mostrare luoghi per matrimoni, luoghi di vacanza, ecc., per aiutare gli acquirenti a scegliere tra di loro (o rendere la selezione più difficile, ma non lo consiglio come obiettivo).

Acquistare

Puoi acquistare Divi Sensei Before and After Slider nel Divi Marketplace. Il costo è di $ 5 per l'utilizzo illimitato del sito Web e 1 anno di supporto e aggiornamenti. Questo prezzo include una garanzia di rimborso di 30 giorni.

Pensieri finali

Il Divi Sensei Before and After Slider è un modulo semplice. Ad esempio, il dispositivo di scorrimento non ha controlli di larghezza e le etichette non includono bordi, ombre della casella, gradienti, ecc., ma le impostazioni hanno reso facile adattarsi allo stile di ogni layout a cui l'ho aggiunto. Per il prezzo e per quello che può fare, il livello delle impostazioni ha senso e sono stato in grado di ottenere facilmente i design che desideravo.

Tutti i controlli erano intuitivi e non ho mai pensato di aver bisogno di istruzioni. Puoi anche utilizzare diversi tag alt per le immagini per migliorare la SEO. Se sei interessato a uno slider prima e dopo da utilizzare con i tuoi siti Web Divi, vale la pena prendere in considerazione Divi Sensei Before and After Slider.

Vogliamo sentire da voi. Hai provato Divi Sensei Before and After Slider? Fateci sapere cosa ne pensate nei commenti qui sotto.

Immagine in primo piano tramite Elvetica / shutterstock.com