Comment ajouter un slider avant après dans Wix

Aider les acheteurs potentiels à visualiser instantanément les avantages de votre produit est un atout considérable, surtout lorsque vous vendez en ligne. Ici, pas de vendeur en chair et en os — ce sont votre image de marque, vos messages et vos visuels qui font tout le travail. C’est toute la puissance du slider avant après.

Bien que Wix dispose d’une vaste bibliothèque d’éléments de design, l’éditeur standard n’inclut pas de slider avant après personnalisable. Mais cela ne signifie pas que vous êtes sans solution. Vous pouvez installer une application tierce depuis le Wix App Market, intégrer un widget externe gratuit ou en créer un de zéro avec Velo by Wix. Voici comment chaque option fonctionne, et pourquoi le widget gratuit est celle que la plupart des utilisateurs devraient privilégier.

Option 1 : Installer une extension du Wix App Market

La solution la plus évidente est le Wix App Market. Recherchez « before and after slider », cliquez une fois, et vous obtenez un slide avant après fonctionnel sur votre page. Pas de code d’intégration, pas de mode développeur.

C’est après l’installation que les limites apparaissent. La plupart de ces applications fonctionnent sur un modèle freemium, et vous devrez faire des compromis avec la version gratuite. Le PURPLE Before & After Slider, l’une des options les mieux notées avec 4,7 étoiles, affiche un filigrane sur le plan gratuit. Le supprimer, tout en débloquant les styles de flèches personnalisés et les formes de mise en page, coûte 2,50 $ par mois. Pas grand-chose au départ, mais cela s’accumule avec chaque abonnement d’application sur votre site.

Le risque le plus important concerne la maintenance. Ce sont de petits développeurs tiers, et lorsque l’un d’eux cesse de publier des mises à jour, votre slider ne fonctionne plus. Votre portfolio ou votre page produit est le dernier endroit où vous voulez un élément défaillant.

Si vous souhaitez tout de même essayer une application tierce, voici comment en installer une :

1. Ouvrez votre site dans l’éditeur Wix et cliquez sur Apps dans la barre latérale gauche, puis cliquez sur App Market. Recherchez « before and after slider ».

2. Cliquez sur l’application souhaitée, puis cliquez sur Ajouter au site. Confirmez avec Autoriser et ajouter.
3. Le slider apparaît sur votre page. Cliquez dessus, ouvrez les Paramètres, ajoutez vos images avant après, ajustez le curseur et les libellés, puis cliquez sur Publier.

Wix détaille la procédure d’installation complète dans son guide du Centre d’aide pour ajouter une application à votre site.

Option 2 : Utiliser un widget slider avant après gratuit et sans code (recommandé)

Si vous souhaitez un contrôle total sur le slider sans abonnement mensuel, passez outre l’App Market et intégrez plutôt un widget externe gratuit. Vous obtenez le même effet de comparaison image par glissement, plus de personnalisation que ce qu’offrent les formules payantes des applications, et aucun renouvellement.

Le widget Jotform Before and After Slider est conçu exactement pour cela. Vous le configurez dans un éditeur visuel, copiez un court code d’intégration et le collez dans Wix. Les widgets de site web Jotform sont gratuits, sans limite d’utilisation et sans abonnement requis — aucune invitation à passer à une version supérieure n’apparaît une fois votre slider en ligne.

Il offre aussi bien plus que les options de l’App Market. Vous pouvez révéler l’image horizontalement ou verticalement, ce qui est important si vous montrez une pièce en pleine longueur ou une photo avant après d’une personne. Vous pouvez définir la position de départ du séparateur pour que les visiteurs arrivent sur le cadrage que vous souhaitez. Vous pouvez également ajouter jusqu’à trois paires de comparaison avec une navigation intégrée, transformant un seul élément en une galerie compacte d’études de cas plutôt qu’une simple comparaison statique. Pour un dentiste présentant trois résultats de patients ou un architecte d’intérieur détaillant une rénovation par étapes, c’est la différence entre une seule intégration et trois.

Suivez ces étapes pour ajouter le widget Jotform à votre site Wix :

1. Ouvrez le widget Jotform Before and After Slider et ajoutez votre paire d’images en téléchargeant vos fichiers ou en collant les URL des images. Ajoutez des libellés avant et après ainsi qu’une légende pour chaque comparaison.

2. Définissez la direction de révélation, la position de départ du séparateur et le style d’interaction (glisser, cliquer ou survoler). Ajustez la largeur, le ratio d’image, le rayon des coins, la taille du séparateur et les couleurs pour correspondre à votre site. Activez le mode plein écran si les visiteurs ont besoin d’examiner les détails.

3. Copiez le code d’intégration.

4. Dans l’éditeur Wix, cliquez sur + Ajouter et sélectionnez Intégrer du code. Collez votre extrait de code, redimensionnez l’élément et cliquez sur Publier.

Le guide de Wix sur l’intégration d’un site ou d’un widget détaille les limitations de l’élément, notamment l’obligation que votre code d’intégration utilise le protocole HTTPS.

Option 3 : Créer un slider avant après personnalisé avec Velo by Wix

Si vous préférez ne pas dépendre d’une application tierce ou d’une intégration externe, vous pouvez coder le slider vous-même avec Velo by Wix. Le principe consiste à superposer vos deux images dans l’éditeur, ajouter un élément ligne ou boîte comme poignée de glissement, activer le mode développeur et écrire du JavaScript qui révèle plus ou moins de l’image du dessus lorsque le visiteur fait glisser le curseur.

Voici le problème. Le code de page de Velo ne peut pas suivre un pointeur lorsqu’il se déplace sur un élément. Les gestionnaires d’événements disponibles sur les éléments Wix standard couvrent les clics, le focus, l’entrée et la sortie d’un élément, ainsi que la visibilité dans la fenêtre d’affichage. Il n’y a pas de gestionnaire de mouvement de souris ni de prise en charge des événements tactiles. Un slider à glissement nécessite les deux.

La solution idéale consiste à écrire du JavaScript DOM classique à l’intérieur d’un élément HTML iFrame et à utiliser Velo uniquement pour transmettre les données. À ce stade, vous utilisez le même mécanisme d’intégration que l’Option 2, sauf que vous êtes responsable du code, du comportement responsive et de chaque bug.

Si vous souhaitez essayer, suivez ces étapes :

1. Dans l’éditeur Wix, cliquez sur Dev Mode dans la barre supérieure et activez le mode développeur. Dans Wix Studio, cliquez sur Start Coding dans la barre latérale gauche.

2. Ajoutez un élément HTML intégré à l’emplacement souhaité pour le slider, dimensionné selon vos images.

3. Écrivez le balisage, le style et la gestion des événements de pointeur de votre slider de comparaison à l’intérieur de cet élément, en testant le glissement à la souris et le balayage tactile à chaque point de rupture.

Améliorez votre site Wix avec des widgets intelligents et sans code

Le widget Jotform Before and After Slider est le moyen le plus rapide de montrer vos transformations avant après sans alourdir votre facture logicielle mensuelle ni déboguer des événements tactiles dans Velo. Configurez-le une fois, collez le code et passez à autre chose.

C’est aussi l’un des plus de 150 widgets de site web gratuits proposés par Jotform. Voici quelques autres widgets qui s’associent parfaitement à un portfolio ou un site de services :

• Google Reviews : Affichez les évaluations de vos clients à côté de vos réalisations, pour que la preuve et les témoignages se trouvent sur la même page.
• FAQ : Répondez aux questions « combien de temps cela prend-il » et « combien ça coûte » avant que le visiteur ne quitte votre site pour vous envoyer un e-mail.
• Popup : Capturez l’adresse e-mail d’un visiteur qui a parcouru toute votre galerie mais n’était pas encore prêt à réserver.
• Retour en haut : Ce widget mérite d’être ajouté dès que votre page portfolio devient suffisamment longue pour que remonter en haut devienne fastidieux.

Chacun s’installe via le même élément HTML intégré que celui utilisé pour le slider, donc en ajouter un deuxième ou un troisième ne prend que quelques minutes.

Si vous êtes encore en train de créer votre site, notre guide pour créer un site Wix couvre la plateforme de A à Z, et la page d’intégration Jotform-Wix vous accompagne dans l’ajout de formulaires de contact et de réservation. Parcourez le répertoire complet des widgets et découvrez ce qui manque à votre site.