Comment ajouter un slider avant après dans Webflow

Un slider avant après est l’un des moyens les plus rapides de montrer les résultats de votre travail. Il suffit de faire glisser le curseur pour révéler l’effet de votre refonte, rénovation ou retouche. Pas besoin de fixer une image avant apres côte à côte ni de jouer au jeu des différences — le résultat est là, sous vos yeux.

Que vous dirigiez une agence ou que vous soyez freelance, designer, photographe, artiste, entrepreneur du bâtiment ou toute autre personne souhaitant mettre en valeur son travail, un slider avant après est un excellent moyen d’y parvenir. Malheureusement, malgré le fait qu’il soit l’un des créateurs de sites web les plus avancés (et l’un des plus populaires auprès des designers), Webflow ne propose pas de slider avant après natif. Si vous souhaitez en ajouter un, trois options s’offrent à vous : installer un « cloneable » depuis la communauté, intégrer un widget hébergé gratuit, ou en créer un de zéro en utilisant le moteur d’interactions natif de Webflow (IX2).

Nous explorons chacune de ces options ci-dessous.

Option 1 : Utiliser un cloneable Webflow

Votre premier réflexe est probablement de chercher dans le showcase Made in Webflow ou sur un site comme Flowbase des « cloneables ». Bien que cela puisse fonctionner, ce n’est pas sans inconvénients.

Le principal inconvénient est que vous êtes tributaire de la méthode de quelqu’un d’autre. Vous devez respecter scrupuleusement l’architecture existante et les conventions de nommage du cloneable. Cela peut impliquer de dépendre d’attributs personnalisés, de règles CSS et d’un positionnement absolu. La moindre erreur, et rien ne fonctionnera. Si vous l’ajoutez en fin de conception, vous devrez peut-être repenser certains de vos autres éléments.

Mais si vous tenez à suivre cette voie, voici comment ajouter un cloneable :

1. Trouvez un cloneable de slider avant après qui est activement maintenu et dont la licence vous autorise l’utilisation. Clonez-le dans votre propre projet.

2. Remplacez les images par les vôtres. Ne réorganisez pas les divs imbriquées, ne renommez rien et n’essayez pas de faire le ménage — cela pourrait casser le slider.
3. Publiez votre site et testez-le. Assurez-vous qu’il fonctionne aussi bien sur ordinateur que sur appareils mobiles. Si vous avez modifié quelque chose par erreur, le JavaScript pourrait ne pas se déclencher dans certaines conditions.

En résumé, cette méthode fonctionne, mais elle est très fastidieuse pour un simple composant visuel — et il est peu probable que vous obteniez autant de contrôle que vous le souhaiteriez. Chaque refonte que vous effectuez doit respecter le câblage d’origine, à moins de vouloir réécrire le script qui le pilote.

Option 2 : Utiliser un widget slider gratuit et no-code (recommandé)

Si vous voulez éviter de jongler avec des blocs div imbriqués, de configurer des attributs personnalisés et, en cas de problème, de déboguer du JavaScript écrit par quelqu’un d’autre, le plus simple est d’utiliser un embed hébergé comme le widget Jotform Before and After Slider. Il est extrêmement facile à mettre en place et résout bon nombre des problèmes liés aux cloneables.

Voici comment ajouter un slider avant après à Webflow avec Jotform :

1. Rendez-vous sur le widget Jotform Before and After Slider et connectez-vous à votre compte Jotform. Si vous n’en avez pas encore, vous pouvez vous inscrire pendant le processus de configuration. C’est gratuit.

2. Donnez un titre à votre widget et ajoutez vos paires de comparaison. Vous pouvez importer des images directement ou les ajouter depuis une URL. Si vous le souhaitez, vous pouvez également ajouter une légende à chaque paire d’images et modifier leurs libellés. Ensuite, définissez si l’utilisateur doit faire glisser la poignée pour voir l’avant après, ou si l’effet se déclenche au survol. Lorsque vous avez terminé, cliquez sur Continue. 

3. Il est maintenant temps de personnaliser le style de votre slider. Vous pouvez définir ses couleurs, son branding, sa police et son apparence. Lorsque le résultat vous convient, cliquez à nouveau sur Continue.

4. Enfin, configurez la mise en page. Choisissez si vous souhaitez un slider horizontal ou vertical, la position initiale du curseur, la largeur souhaitée, et s’il s’affiche sur les appareils mobiles, les ordinateurs de bureau, ou les deux. Puis cliquez sur Try it on your website for free.

5. Cliquez sur Copy Code pour copier le code d’intégration dans votre presse-papiers, puis retournez sur votre site Webflow.

6. Ouvrez le menu Add et sélectionnez Code Embed. Collez le code d’intégration et positionnez le bloc sur votre site. Cliquez sur Publish et il sera en ligne sur votre site. C’est aussi simple que ça.

Comme vous pouvez le constater, la méthode gratuite et no-code est bien plus simple que l’option cloneable. Le style est plus facile à personnaliser, pas besoin de se soucier d’attributs personnalisés, de noms de classes stricts ou de JavaScript, et ça fonctionne tout simplement. Si vous souhaitez modifier quoi que ce soit, retournez sur Jotform et modifiez les paramètres de votre slider avant après.

Option 3 : Le construire manuellement avec les Interactions Webflow

Pour les puristes de Webflow qui veulent un contrôle total et ne souhaitent utiliser ni du JavaScript écrit par d’autres ni un widget externe, il est possible de construire un slider à l’aide du moteur d’interactions natif de Webflow, IX2. Créer un comparateur image personnalisé dans Webflow est de loin la méthode la plus avancée et la plus complexe, mais elle vous permet de contrôler exactement son apparence et son comportement.

Pour construire votre propre slider de comparaison Webflow avec IX2, vous devez empiler deux images dans un conteneur positionné en relatif, chaque image étant placée dans son propre bloc div. Pour l’image du dessus, le bloc div fait office de masque.

Ensuite, pour l’interaction avant après dans Webflow, vous devez créer une interaction Mouse Move. Définissez le Trigger sur Mouse X et la cible sur le div masque. Réglez la propriété animée sur Width et faites-la varier entre 0 et 100 pour cent. Ainsi, le mouvement de la souris sur l’axe X contrôle le chevauchement entre les deux images.

Bien entendu, si vous souhaitez un séparateur entre les deux images, vous devez le créer vous-même. Et le synchroniser parfaitement avec le mouvement de la souris nécessite des compétences avancées en animation Webflow.

Bien que les outils intégrés de Webflow puissent faire l’affaire, obtenir un résultat parfait demande beaucoup d’ajustements et une compréhension approfondie de l’utilisation de Webflow. Vous devez également configurer une animation différente si vous voulez que cela fonctionne sur les appareils mobiles. Ce que vous gagnez en contrôle, vous le perdez en praticité.

Améliorez votre site Webflow avec des widgets no-code intelligents

Le moyen le plus rapide, le plus simple et le plus pratique d’ajouter un slider avant après à Webflow est d’utiliser le widget Jotform Before and After Slider. Il ne présente aucun des inconvénients liés à l’utilisation d’un cloneable de comparateur image Webflow et est bien plus simple que d’en créer un soi-même avec IX2. Utiliser une solution robuste et serverless vous fait gagner de nombreuses heures de développement et garantit un design responsive solide à chaque fois.

De plus, Jotform propose toute une gamme d’autres widgets gratuits pour sites web, capables de faire passer votre site au niveau supérieur. Si vous souhaitez ajouter des avis Google, des contrôles d’accessibilité, un simple bouton retour en haut, ou des dizaines d’autres fonctionnalités utiles, parcourez le répertoire. Vous pouvez également utiliser l’intégration Jotform-Webflow pour connecter les puissants outils de collecte de données de Jotform directement à votre site.