Come aggiungere uno slider prima e dopo in Webflow

Uno slider prima e dopo è uno dei modi più rapidi per mostrare i risultati del tuo lavoro. Basta trascinare il divisore per rivelare l’effetto di un restyling, una ristrutturazione o un ritocco. Non serve fissare due immagini affiancate o giocare a “trova le differenze”: il risultato è lì, davanti agli occhi.

Che tu gestisca un’agenzia o sia un freelancer, designer, fotografo, artista, impresario edile o chiunque altro voglia mettere in mostra il proprio lavoro, uno slider prima e dopo è un ottimo strumento per farlo. Purtroppo, nonostante sia uno dei costruttori di siti web più avanzati (e tra i più apprezzati dai designer), Webflow non dispone di uno slider prima e dopo nativo. Se vuoi aggiungere immagini prima e dopo al tuo sito, hai tre opzioni: installare un “cloneable” dalla community, incorporare un widget gratuito ospitato esternamente oppure costruirne uno da zero utilizzando il motore di interazioni native di Webflow (IX2).

Di seguito analizziamo ciascuna di queste opzioni.

Opzione 1: Usa un cloneable di Webflow

Il primo istinto è probabilmente cercare nel showcase Made in Webflow o su un sito come Flowbase dei “cloneable”. Può funzionare, ma non è privo di complicazioni.

Il grande svantaggio è che sei vincolato al modo di fare di qualcun altro. Devi rispettare rigorosamente l’architettura e le convenzioni di denominazione del cloneable. Questo può significare dipendere da attributi personalizzati, regole CSS e posizionamento assoluto. Sbaglia anche solo un dettaglio e semplicemente non funzionerà. Aggiungilo alla fine del tuo progetto e potresti dover ripensare alcuni degli altri elementi.

Ma se hai deciso di seguire questa strada, ecco come aggiungere un cloneable:

1. Trova un cloneable di slider prima e dopo che sia attivamente mantenuto e abbia una licenza che ti consenta di utilizzarlo. Clonalo nel tuo progetto.

2. Sostituisci le immagini con le tue. Non riorganizzare i div annidati, non cambiare il nome di nessun elemento e non cercare di riordinare le cose — potresti rompere lo slider.
3. Pubblica il sito e testalo. Assicurati che funzioni sia su desktop che su dispositivi mobili. Se hai modificato qualcosa per errore, il JavaScript potrebbe non attivarsi in determinate circostanze.

Nel complesso, questo metodo funziona, ma è molto laborioso per un semplice componente visivo — e difficilmente avrai tutto il controllo che vorresti. Ogni modifica al design deve rispettare il cablaggio originale, a meno che tu non voglia riscrivere lo script che lo gestisce.

Opzione 2: Usa un widget slider gratuito e no-code (consigliato)

Se vuoi evitare di lottare con div annidati, configurare attributi personalizzati e, se qualcosa va storto, fare il debug di JavaScript scritto da qualcun altro, il modo più semplice è usare un embed ospitato come il Widget Slider Prima e Dopo di Jotform. È semplicissimo da configurare e risolve molti dei problemi legati ai cloneable.

Ecco come aggiungere immagini prima e dopo su Webflow con Jotform:

1. Vai al Widget Slider Prima e Dopo di Jotform e accedi al tuo account Jotform. Se non ne hai ancora uno, puoi registrarti durante la procedura di configurazione. È gratuito.

2. Dai un titolo al tuo widget e aggiungi le coppie di confronto immagini. Puoi caricare le immagini direttamente o aggiungerle da un URL. Se vuoi, puoi anche aggiungere una didascalia a ogni coppia di immagini e modificarne le etichette. Poi, imposta se l’utente deve trascinare la maniglia per vedere il prima e dopo, o se si attiva al passaggio del mouse. Quando hai finito, clicca su Continua. 

3. Ora è il momento di personalizzare lo stile del tuo slider. Puoi impostare colori, branding, font e aspetto. Quando sei soddisfatto del risultato, clicca di nuovo su Continua.

4. Infine, configura il layout. Scegli se vuoi uno slider orizzontale o verticale, la posizione iniziale del divisore, la larghezza desiderata e se deve essere visualizzato su dispositivi mobili, desktop o entrambi. Poi clicca su Provalo gratis sul tuo sito web.

5. Clicca su Copia codice per copiare il codice di incorporamento negli appunti, poi torna al tuo sito Webflow.

6. Apri il menu Add e seleziona Code Embed. Incolla il codice di incorporamento e posiziona il blocco sul tuo sito. Clicca su Publish e sarà subito online. È davvero così semplice.

Come puoi vedere, il metodo gratuito no-code è molto più semplice rispetto all’opzione cloneable. È più facile da personalizzare, non c’è bisogno di preoccuparsi di attributi personalizzati, nomi di classe rigidi o JavaScript, e funziona e basta. Se vuoi modificare qualcosa, torna su Jotform e modifica le impostazioni del tuo slider prima e dopo.

Opzione 3: Costruiscilo manualmente con le Interazioni di Webflow

Per i puristi di Webflow che vogliono il controllo totale e non desiderano usare JavaScript scritto da altri o un widget esterno, è possibile costruire uno slider utilizzando il motore di interazioni native di Webflow, IX2. Costruire uno slider con codice personalizzato in Webflow è di gran lunga il metodo più avanzato e complesso, ma permette di controllare esattamente l’aspetto e il comportamento.

Per costruire il tuo slider di confronto immagini in Webflow con IX2, devi sovrapporre due immagini in un contenitore con posizionamento relativo, ciascuna nel proprio div block. Per l’immagine superiore, il div block funge da maschera.

Successivamente, per l’interazione prima e dopo in Webflow, devi creare un’interazione Mouse Move. Imposta il Trigger su Mouse X e il target sul div maschera. Imposta la proprietà animata su Width e falla variare tra 0 e 100 percento. In questo modo, il movimento sull’asse X del mouse controlla la sovrapposizione tra le due immagini.

Naturalmente, se vuoi un divisore tra le due immagini, devi crearlo. E sincronizzarlo perfettamente con il movimento del mouse richiede competenze avanzate di animazione in Webflow.

Sebbene gli strumenti integrati di Webflow possano funzionare, ottenere un risultato perfetto richiede molte regolazioni e una conoscenza approfondita dell’uso di Webflow. Inoltre, devi configurare un’animazione diversa se vuoi che funzioni sui dispositivi mobili. Ciò che guadagni in controllo, lo perdi in praticità.

Migliora il tuo sito Webflow con widget intelligenti e no-code

Il modo più rapido, semplice e pratico per aggiungere immagini prima e dopo su Webflow è con il Widget Slider Prima e Dopo di Jotform. Non presenta nessuno degli svantaggi dei cloneable per il confronto immagini di Webflow ed è molto più semplice rispetto a crearne uno da zero con IX2. Utilizzare un’opzione robusta e serverless ti fa risparmiare molte ore di sviluppo e garantisce ogni volta un design responsive solido.

Inoltre, Jotform offre una gamma di altri widget gratuiti per siti web in grado di portare il tuo sito a un livello superiore. Se vuoi aggiungere recensioni Google, controlli di accessibilità, un semplice pulsante torna in alto o decine di altre funzionalità utili, esplora la directory. Puoi anche utilizzare l’integrazione Jotform-Webflow per collegare i potenti strumenti di raccolta dati di Jotform direttamente al tuo sito.