Come creare uno slider per il confronto delle immagini in Elementor

Il successo di qualsiasi web design oggi dipende in gran parte dall'efficacia con cui comunica visivamente i suoi messaggi e le sue idee agli utenti. Lo slider per il confronto delle immagini è un concetto potente che può elevare il potere della narrazione visiva del tuo sito web a un livello superiore. Puoi facilmente realizzare questi cursori utilizzando uno strumento WordPress.

Elementor può aiutarti in questo senso. Questo potente plug-in per la creazione di pagine ti consente di creare slider di confronto di immagini straordinari e accattivanti sul tuo sito Web senza alcuna codifica. In questo post del blog, tratteremo un tutorial dettagliato che spiega come creare uno slider per il confronto delle immagini in Elementor.

Prima di ciò, discuteremo brevemente cos'è lo slider di confronto immagini e alcuni dei suoi casi d'uso speciali.

Cos'è lo slider di confronto delle immagini?

Lo slider di confronto immagini è un elemento web che consente a utenti e visitatori di visualizzare due immagini affiancate e confrontarle con un divisore. Puoi vedere l'effetto facendo scorrere il divisore avanti e indietro. Questa funzionalità/elemento web ti consente di mostrare visivamente gli scenari prima e dopo di qualsiasi prodotto o informazione, evidenziandone le differenze.

Alcuni casi d'uso speciali dello slider di confronto delle immagini

Di seguito, abbiamo elencato diversi casi d'uso speciali in cui lo slider di confronto immagini può migliorare la tua narrazione visiva. Dai un'occhiata veloce a loro per trovare ispirazione.

• Confronto visivo prima e dopo

Ciò è particolarmente utile in settori come la moda, il fitness, la bellezza, il design, la ristrutturazione della casa, ecc., dove è possibile mostrare la trasformazione derivante da un prodotto o servizio.

• Evidenzia Modifica foto

Se sei un fotografo o un grafico, puoi dimostrare le tue capacità di editing confrontando foto modificate e non modificate.

• Risultati da Trattamenti e Rinnovi

Questa funzione viene utilizzata nel settore della bellezza per visualizzare i risultati dei trattamenti viso e pelle, tagli di capelli, rifacimenti e prodotti cosmetici utilizzati.

• Spiegare il miglioramento delle funzionalità

Gli sviluppatori di software possono utilizzare questa funzionalità per dimostrare le modifiche apportate al miglioramento visivo di qualsiasi software, applicazione Web, tema o applicazione mobile.

• Visualizza modifiche storiche

Nel campo dell’architettura, puoi dire visivamente come le città urbane appariranno diverse dopo lo sviluppo. Inoltre, puoi anche mostrare come l'ambiente circostante è cambiato nel tempo.

Come creare uno slider per il confronto delle immagini in Elementor: guida passo passo

Elementor è immensamente popolare sul mercato, con oltre 7 milioni di utenti attivi, un numero in costante aumento. Se hai mai sognato di progettare il tuo sito web su WordPress senza alcuna codifica manuale, ti innamorerai sicuramente di questo generatore di pagine grazie alla sua ricchezza di funzionalità e facilità d'uso.

Tuttavia, Elementor stesso non dispone dello strumento o della funzionalità di confronto delle immagini. Ma non preoccuparti! HappyAddons, un potente componente aggiuntivo di Elementor, ha un widget chiamato "Confronto immagini", che puoi utilizzare proprio come bere il tuo succo preferito. Iniziamo il tutorial.

Passaggio 01: installa Elementor e HappyAddons sul tuo sito

All'inizio, assicurati di avere i seguenti plugin installati e attivati ​​sul tuo sito web.

• Elementor
• HappyAddons

Non hai bisogno di versioni premium per questa funzionalità, poiché HappyAddons la fornisce gratuitamente.

Passaggio 02: apri un post/una pagina con Elementor

Ora apri il post/pagina che desideri con Elementor su cui desideri creare una sezione di confronto immagini. L'Elementor Canvas si aprirà sullo schermo.

Passaggio 03: crea una sezione per il widget di confronto delle immagini sulla tela

Se hai già utilizzato Elementor, sai come creare una nuova sezione per aggiungere widget. Lo stiamo ancora mostrando per il bene dei nuovi utenti.

Fai clic sull'icona più (+) su Elementor Canvas.

Successivamente, seleziona una struttura di colonne in base alla larghezza della sezione Confronto immagini.

Puoi vedere che una nuova sezione è stata aggiunta all'area di disegno. Aggiungeremo e creeremo una sezione di confronto delle immagini all'interno di questa colonna.

Passaggio 04: trascina e rilascia il widget di confronto immagini nella colonna

Digita Confronto immagini nella casella di ricerca nella parte superiore del pannello Elementor sul lato sinistro di Elementor Canvas.

Ora trascina e rilascia il widget Confronto immagini nella sezione che hai creato poco fa.

Puoi vedere che il widget Confronto immagini è stato aggiunto all'area di disegno. Successivamente, aggiungeremo il contenuto al widget nel passaggio successivo.

Nota: se riscontri 500 errori interni del server, puoi risolverli seguendo questa guida su come correggere 500 errori interni del server.

Passaggio 05: aggiungi immagini al widget

Devi aggiungere due immagini al widget, una delle quali può essere la versione precedente o originale e l'altra è la versione modificata.

Vieni alla scheda Contenuto . Appena sotto la scheda vedrai la sezione Immagini . Puoi aggiungere due immagini, una per il prima e l'altra per il dopo. Aggiungi subito le immagini.

Abbiamo aggiunto due immagini al widget. Uno è leggermente di bassa qualità e l'altro è di prim'ordine.

Passa il cursore sul widget. Le etichette saranno visibili. Puoi modificare i nomi delle etichette utilizzando l'opzione evidenziata nell'immagine seguente. Fallo se vuoi.

Passaggio 06: personalizzare le impostazioni per il widget di confronto immagini

Espandi la sezione Impostazioni nella scheda Contenuto. Avrai quattro opzioni: rapporto visibilità, orientamento, nascondi sovrapposizione e maniglia di spostamento. Puoi fare le seguenti cose con loro.

• Rapporto visibilità – Aumentando o diminuendo il rapporto visibilità, puoi riposizionare il divisore tra le immagini dei widget.

• Orientamento: mostra il divisore, sia in orizzontale che in verticale.

• Nascondi sovrapposizione: mostra o nasconde l'effetto di sovrapposizione.

• Sposta maniglia: puoi controllare il modo in cui gli utenti esploreranno le immagini prima e dopo tramite questa opzione.

Passaggio 07: stilizza il widget di confronto immagini

Vai alla scheda Stili del widget Confronto immagini. Avrai opzioni per personalizzare la maniglia e gli elementi dell'etichetta.

L' opzione Maniglia ti consentirà di personalizzare l'aspetto della maniglia tra le due immagini sullo schermo. Le cose che puoi personalizzare qui sono la barra della maniglia, la freccia della maniglia, l'altezza della casella, il tipo di bordo, la larghezza del bordo e il raggio del bordo .

Successivamente, espandi la sezione Etichetta . Da questa sezione è possibile personalizzare la spaziatura dell'etichetta, la posizione, il tipo di bordo, il raggio del bordo, il colore, il colore dello sfondo, l'ombra della casella e la tipografia .

Passaggio 08: visualizzare in anteprima il widget di confronto immagini

Vieni alla modalità anteprima della pagina. Trascina la maniglia del widget a sinistra e a destra per vedere se funziona. Nel video clip qui sotto, puoi vedere che il nostro widget funziona bene.

Pertanto, puoi creare uno slider per il confronto delle immagini sul sito Web di Elementor proprio come un professionista. Esplora questa guida su come aggiungere tooltip in Elementor per portare la navigazione del tuo sito a un nuovo livello.

Domande frequenti sullo slider di confronto delle immagini in Elementor

Finora abbiamo descritto il tutorial e le parti teoriche della discussione di oggi. Risponderemo ora ad alcune domande che le persone solitamente pongono online relative all'argomento di oggi.

Chiusura!

Ci auguriamo che questo tutorial ti sia piaciuto. Utilizzando questo widget, ora puoi mostrare in modo efficace scenari prima e dopo dei tuoi prodotti o qualsiasi tipo di storia e sviluppo. Ma ci sono alcune best practice che devi tenere a mente per garantire prestazioni ed esperienze utente ottimali.

Innanzitutto, utilizza sempre immagini di alta qualità, opportunamente dimensionate e ottimizzate. Comprimili prima del caricamento in modo che non influiscano sulla velocità di caricamento del tuo sito. Infine, prima di pubblicare il widget, verifica che sia perfettamente strutturato per dispositivi mobili e tablet.