Comment ajouter un slider avant/après dans WordPress

Vous êtes styliste, décorateur, retoucheur ou un autre professionnel qui a besoin de présenter les résultats visuels de son travail ? Un slider avant/après intégré à votre site web est simple à utiliser et met instantanément en valeur votre savoir-faire. Malheureusement pour les utilisateurs de WordPress, la plateforme ne propose pas de fonctionnalité de slider native.

Mais il n’est pas impossible d’ajouter un slider avant/après à WordPress. Vous avez trois options : utiliser une extension tierce, utiliser un widget externe gratuit et léger, ou créer un slider de toutes pièces en écrivant du code personnalisé.

Cet article explique comment ajouter un slider avant/après sur WordPress avec ces trois méthodes, afin que vous sachiez laquelle correspond le mieux à vos besoins.

Watch on youtube

How to Add a Before and After Slider in WordPress

Option 1 : installer une extension de slider WordPress 

L’un des moyens les plus courants d’ajouter un slider avant/après consiste à utiliser une extension WordPress. Cependant, cette approche présente quelques inconvénients.

Certaines extensions ajoutent du CSS et du JavaScript supplémentaires sur l’ensemble de votre site, ce qui allonge les temps de chargement des pages. De plus, les constructeurs de pages « lourds », comme Elementor, vous obligent à gérer le slider via des shortcodes complexes (des codes textuels propres à WordPress), ce qui peut être un véritable casse-tête pour les débutants. Si vous supprimez accidentellement une partie du code, le slider cesse immédiatement de fonctionner. Par ailleurs, certaines extensions reposent sur un modèle freemium et réservent leurs fonctionnalités avancées à leurs offres payantes.

Les extensions ne conviennent pas à tous les utilisateurs, mais elles constituent une solution fiable si vous êtes à l’aise avec la technique et avec WordPress. Suivez ces instructions pour installer une extension WordPress de slider avant/après :

1. Installez l’extension : accédez au tableau de bord WordPress et cliquez sur Extensions. Saisissez « before-and-after slider » dans la barre de recherche, puis sélectionnez l’extension que vous souhaitez utiliser parmi les résultats. (Il en existe des dizaines. Consultez notre sélection des meilleures extensions WordPress pour d’autres types de tâches.)

Suivez les instructions à l’écran pour installer l’extension. (La procédure d’installation exacte dépend de l’extension choisie.)

Notez que si de nombreuses extensions sont gratuites, d’autres sont payantes avec un paiement unique. Dans la plupart des cas, vous ne pouvez les utiliser qu’avec une offre WordPress payante.

2. Créez le slider avant/après : ouvrez l’extension depuis le tableau de bord WordPress. Sélectionnez l’option permettant de créer un nouveau slider avant/après. Importez vos images « avant » et « après ». Pour de meilleurs résultats, utilisez des images ayant le même cadrage et les mêmes dimensions.
3. Personnalisez le slider avant/après : la plupart des extensions vous permettent de régler des paramètres tels que les légendes des images, la position de départ, l’apparence de la poignée et l’orientation du slider. Ajustez vos paramètres, puis enregistrez.
4. Ajoutez le slider avant/après à votre site WordPress : ouvrez la page WordPress sur laquelle vous souhaitez afficher le slider. Selon l’extension, vous pouvez l’ajouter en créant un bloc WordPress dédié ou en insérant un shortcode dans la page.

Option 2 : utiliser un widget de slider gratuit et sans code (recommandé) 

Si vous ne voulez pas vous embarrasser de shortcodes fastidieux ou d’extensions lourdes qui ralentissent le chargement de votre site WordPress, la meilleure option consiste à utiliser un widget de slider sans code. Le widget Slider avant/après de Jotform est entièrement gratuit et simple à utiliser. Comme le widget fonctionne sans serveur, il n’a aucun impact sur la vitesse de votre site. De plus, il s’affiche parfaitement sur ordinateur comme sur smartphone.

Le widget Slider avant/après de Jotform propose une interface visuelle, sans aucune programmation. Il vous suffit d’importer deux images dans le générateur de widgets, de personnaliser les couleurs de la poignée de glissement et de définir la position de départ par défaut. Copiez ensuite le code et collez-le dans WordPress.

Voici plus de détails :

1. Ajoutez vos paires d’images : rendez-vous sur la page du widget Slider avant/après de Jotform et importez vos images « avant » et « après » dans la zone des paramètres du widget. Modifiez le titre de votre widget et indiquez le type d’interaction que vous souhaitez proposer (glisser-cliquer ou survol). Cliquez ou appuyez sur Continuer.

2. Personnalisez les paramètres du slider : vous pouvez ajuster des paramètres tels que le format des images, le rayon des angles, l’épaisseur du séparateur et les couleurs du slider. Faites défiler la page vers le bas pour sélectionner toutes vos préférences.

3. Récupérez le code d’intégration du widget de slider : cliquez ou appuyez sur Essayer sur votre site web gratuitement. Jotform vous fournit un code d’intégration pour le widget de slider. Cliquez ou appuyez sur Copier. Jotform vous invitera à vous inscrire ou à vous connecter pour obtenir le code.

4. Collez le code d’intégration du slider dans WordPress : rendez-vous sur votre site WordPress et ajoutez un bloc HTML personnalisé depuis l’outil d’insertion de blocs. Collez le code d’intégration dans le bloc HTML. Cliquez ou appuyez sur Mettre à jour. WordPress insérera automatiquement le widget de slider avant/après dans votre site WordPress.

Option 3 : coder un slider HTML/CSS personnalisé 

Si vous êtes un puriste de WordPress qui préfère éviter les extensions tierces ou les widgets externes, vous pouvez créer un slider de toutes pièces, en utilisant du code brut.

Même si cette méthode est techniquement gratuite et native à WordPress, elle n’est pas simple. Vous devrez avoir une solide expérience en programmation, surtout si vous voulez que les visiteurs de votre site puissent utiliser le slider depuis un smartphone. Et une seule erreur de code peut casser le slider et nuire, entre autres, à son adaptation aux smartphones.

Voici comment ajouter un slider avant/après sur WordPress avec du code personnalisé :

1. Importez les images « avant » et « après » : ajoutez les deux images à la médiathèque WordPress.
2. Créez le code HTML/CSS personnalisé du slider : rédigez le code HTML/CSS pour structurer et mettre en forme le slider. Vous aurez peut-être aussi besoin de JavaScript pour ajouter le glissement et le balayage interactifs.

Vous pouvez écrire ce code vous-même, demander l’aide d’un collègue qui a de l’expérience en programmation, ou utiliser un outil d’IA pour le générer.

Copiez le code.

3. Ajoutez le code à votre site WordPress : sur votre site WordPress, ajoutez un bloc HTML personnalisé et collez-y votre code. Ajoutez le CSS et le JavaScript nécessaires via le thème WordPress ou la configuration du site.

Améliorez votre site WordPress grâce à des widgets intelligents et sans code 

Si vous souhaitez donner la priorité à la vitesse et à la sécurité de votre site, maîtriser vos coûts et éviter le code complexe, le widget Slider avant/après de Jotform est un excellent moyen d’ajouter des contenus multimédias riches et interactifs à votre site web. Il est entièrement gratuit, idéal pour les novices comme pour les professionnels, et ne nécessite d’écrire aucun code.

Mais ce n’est pas tout ce que Jotform a à offrir !

Dans le répertoire des widgets pour site web de Jotform, vous trouverez plus de 150 widgets gratuits pour site web qui peuvent enrichir votre site WordPress. Par exemple, le widget Compteur de visiteurs est un excellent moyen d’afficher la popularité de votre site, tandis que le widget Compte à rebours permet de créer un sentiment d’urgence autour d’événements et de campagnes importants.

Jotform propose également des milliers de formulaires WordPress, tels que des formulaires de contact, des formulaires de génération de leads et des bons de commande. Ajoutez-les à votre site pour recueillir des informations importantes sur vos visiteurs.

Jotform propose une offre gratuite. Essayez-la pour commencer à explorer les widgets et découvrir à quel point il est facile d’améliorer les fonctionnalités de votre site WordPress, sans sacrifier les performances ni écrire de code.