Come aggiungere uno slider prima e dopo in Wix

Aiutare i potenziali acquirenti a vedere subito i vantaggi del tuo prodotto è un enorme vantaggio, soprattutto quando si vende online. Qui non c’è un venditore in carne e ossa — quindi il branding, i messaggi e le immagini devono fare tutto il lavoro. È questo il potere dello slider prima e dopo.

Sebbene Wix disponga di un’enorme libreria di elementi di design, l’editor standard non include uno slider prima e dopo personalizzabile. Ma questo non significa che tu non abbia alternative. Puoi installare un’app di terze parti dal Wix App Market, incorporare un widget esterno gratuito oppure crearne uno da zero con Velo by Wix. Ecco come funziona ciascuna opzione e perché il widget gratuito è la soluzione che la maggior parte delle persone dovrebbe scegliere.

Opzione 1: Installare un’estensione dal Wix App Market

La strada più ovvia è il Wix App Market. Cerca “before and after slider”, clicca una volta e avrai uno slider di confronto immagini funzionante sulla pagina. Nessun codice da incorporare, nessuna modalità sviluppatore.

È dopo l’installazione che emergono le limitazioni. La maggior parte di queste app funziona con un modello freemium e dovrai accettare dei compromessi nel piano gratuito. Il PURPLE Before & After Slider, una delle opzioni con le recensioni migliori (4,7 stelle), inserisce un watermark nel piano gratuito. Per rimuoverlo, insieme alla possibilità di personalizzare lo stile delle frecce e le forme del layout, il costo è di 2,50 $ al mese. Poco all’inizio, ma si somma a ogni altro abbonamento di app sul tuo sito.

Il rischio maggiore è la manutenzione. Si tratta di piccoli sviluppatori di terze parti e, quando uno smette di rilasciare aggiornamenti, il tuo slider smette di funzionare. Il portfolio o la pagina prodotto è l’ultimo posto in cui vuoi un elemento non funzionante.

Se vuoi comunque provare un’app di terze parti, ecco come installarne una:

1. Apri il tuo sito nell’Editor di Wix e clicca su Apps nella barra laterale sinistra, quindi clicca su App Market. Cerca “before and after slider”.

2. Clicca sull’app desiderata, quindi clicca su Add to Site. Conferma con Allow and Add.
3. Lo slider viene inserito nella tua pagina. Cliccaci sopra, apri le Impostazioni, aggiungi le tue immagini prima e dopo, regola il cursore e le etichette, quindi clicca su Pubblica.

Wix documenta l’intero processo di installazione nella sua guida del Centro Assistenza per aggiungere un’app al tuo sito.

Opzione 2: Usare un widget slider gratuito e senza codice (consigliato)

Se vuoi il pieno controllo sullo slider senza un abbonamento mensile, salta l’App Market e incorpora un widget esterno gratuito. Ottieni lo stesso effetto di scorrimento per rivelare le differenze, più personalizzazione rispetto ai piani a pagamento delle app e nessun rinnovo.

Il Widget Slider Prima e Dopo di Jotform è pensato esattamente per questo. Lo configuri in un editor visuale, copi un breve codice da incorporare e lo incolli in Wix. I Widget per Siti Web di Jotform sono gratuiti, senza limiti di utilizzo e senza requisiti di piano, quindi nessuna richiesta di upgrade apparirà una volta che il tuo slider sarà online.

Offre anche più funzionalità rispetto alle opzioni dell’App Market. Puoi rivelare le immagini in orizzontale o in verticale, il che è importante se stai mostrando un ambiente a tutta altezza o un prima e dopo di una persona. Puoi impostare la posizione iniziale del divisore in modo che i visitatori vedano subito l’inquadratura che preferisci. Puoi anche aggiungere fino a tre coppie di confronto immagini con navigazione integrata, trasformando un singolo elemento in una galleria compatta di casi studio anziché un semplice confronto statico. Per un dentista che mostra tre risultati sui pazienti o un interior designer che illustra una ristrutturazione per fasi, è la differenza tra un solo elemento incorporato e tre.

Segui questi passaggi per aggiungere il widget di Jotform al tuo sito Wix:

1. Apri il Widget Slider Prima e Dopo di Jotform e aggiungi la tua coppia di immagini caricando i file o incollando gli URL delle immagini. Aggiungi le etichette prima e dopo e una didascalia per ogni confronto.

2. Imposta la direzione di rivelazione, la posizione iniziale del divisore e lo stile di interazione (trascinamento, clic o passaggio del mouse). Regola larghezza, proporzioni dell’immagine, raggio degli angoli, dimensione del divisore e colori per adattarli al tuo sito. Abilita la modalità a schermo intero se i visitatori hanno bisogno di esaminare i dettagli.

3. Copia il codice da incorporare.

4. Nell’Editor di Wix, clicca su + Aggiungi e seleziona Codice da incorporare. Incolla il tuo snippet, ridimensiona l’elemento e clicca su Pubblica.

La guida di Wix per incorporare un sito o un widget illustra le limitazioni dell’elemento, incluso il requisito che il codice da incorporare utilizzi HTTPS.

Opzione 3: Creare uno slider personalizzato usando Velo by Wix

Se preferisci non affidarti a un’app di terze parti o a un elemento incorporato esterno, puoi programmare lo slider da solo con Velo by Wix. L’approccio consiste nel sovrapporre le due immagini nell’editor, aggiungere una linea o un elemento box come maniglia di trascinamento, attivare la Modalità Sviluppatore e scrivere codice JavaScript che riveli più o meno dell’immagine superiore mentre il visitatore trascina.

Ecco il problema. Il codice di pagina di Velo non è in grado di tracciare il puntatore mentre si muove su un elemento. I gestori di eventi disponibili sugli elementi standard di Wix coprono clic, focus, entrata e uscita da un elemento e visibilità nel viewport. Non c’è un gestore per il movimento del mouse né supporto per gli eventi touch. Uno slider a trascinamento ha bisogno di entrambi.

La soluzione ideale è scrivere normale JavaScript DOM all’interno di un elemento HTML iFrame e usare Velo solo per passare i dati. A quel punto stai utilizzando lo stesso meccanismo di incorporamento dell’Opzione 2, con la differenza che sei tu a gestire il codice, il comportamento responsive e ogni eventuale bug.

Se vuoi provare, segui questi passaggi:

1. Nell’Editor di Wix, clicca su Dev Mode nella barra superiore e attiva la modalità sviluppatore. In Wix Studio, clicca su Start Coding nella barra laterale sinistra.

2. Aggiungi un elemento HTML da incorporare dove vuoi posizionare lo slider, dimensionandolo in base alle tue immagini.

3. Scrivi il markup, lo stile e la gestione degli eventi del puntatore per il tuo slider di confronto all’interno di quell’elemento, testando sia il trascinamento con il mouse che lo swipe touch a ogni breakpoint.

Migliora il tuo sito Wix con widget intelligenti e senza codice

Il Widget Slider Prima e Dopo di Jotform è il modo più rapido per mostrare le tue trasformazioni senza aggiungere costi al tuo abbonamento software mensile o dover fare il debug degli eventi touch in Velo. Configuralo una volta, incolla il codice e passa oltre.

È anche uno degli oltre 150 widget gratuiti per siti web offerti da Jotform. Alcuni altri che si abbinano bene a un portfolio o a un sito di servizi includono

• Google Reviews: Mostra le valutazioni dei clienti accanto ai lavori realizzati, così la prova e l’apprezzamento si trovano sulla stessa pagina.
• FAQ: Rispondi alle domande “quanto tempo ci vuole” e “quanto costa” prima che il visitatore esca dal sito per inviarti un’email.
• Popup: Cattura l’email di chi ha scorso tutta la tua galleria ma non era ancora pronto a prenotare.
• Torna su: Vale la pena aggiungerlo quando la pagina del tuo portfolio diventa abbastanza lunga da rendere lo scorrimento verso l’alto un fastidio.

Ognuno si installa tramite lo stesso elemento HTML da incorporare che hai usato per lo slider, quindi aggiungerne un secondo o un terzo richiede pochi minuti.

Se stai ancora costruendo il tuo sito, la nostra guida per creare un sito web con Wix copre la piattaforma da cima a fondo, e la pagina dell’integrazione Jotform-Wix spiega come aggiungere moduli di contatto e prenotazione. Esplora l’intera directory dei widget e scopri cosa manca al tuo sito.