Comment afficher des photos avant/après dans WordPress (avec effet de glissement)

Essayer de montrer une transformation spectaculaire avec des images statiques côte à côte peut sembler un peu plat. Vous avez fait un travail incroyable, mais le facteur « wow » se perd lorsque les visiteurs ne peuvent pas interagir eux-mêmes avec le changement.

Nous avons constaté que l'une des meilleures façons de souligner l'impact d'un produit ou d'un service est d'utiliser un curseur interactif avant-après. C'est un outil puissant que nous avons utilisé dans nos propres projets pour laisser les résultats parler d'eux-mêmes.

Dans cet article, nous partagerons nos deux méthodes éprouvées pour ajouter un curseur de photos avant-après à votre site WordPress. Nous avons une option facile pour les débutants et une option plus personnalisable pour ceux qui veulent plus de contrôle.

Quand utiliser un curseur de photos avant-après dans WordPress

Une image avant-après est une image interactive qui montre généralement une sorte de changement.

Les visiteurs peuvent utiliser un curseur pour passer d'une « version » de l'image à l'autre de manière engageante et interactive.

Si vous gérez une boutique en ligne à l'aide d'un plugin tel que WooCommerce, une photo avant-après peut montrer l'effet de vos produits ou services.

Vous devez simplement montrer une photo « avant » à laquelle le client peut s'identifier et une photo « après » désirable. Cela donnera envie aux acheteurs d'acheter ce qui les amène de l'état « avant » à l'état « après ».

Si vous êtes un affilié, montrer des photos avant-après persuasives sur votre site Web est un excellent moyen de promouvoir vos liens d'affiliation et d'augmenter vos ventes.

Faire glisser un curseur pour révéler la photo « après » est également un moyen facile d'obtenir plus d'engagement, ce qui peut maintenir les visiteurs plus longtemps sur votre site. Cela peut également aider à augmenter vos vues de page et réduire le taux de rebond dans WordPress.

Cela étant dit, voyons comment vous pouvez créer une photo avant-après dans WordPress en utilisant un effet de glissement. Utilisez simplement les liens rapides ci-dessous pour accéder directement à la méthode que vous souhaitez utiliser :

• Méthode 1 : Afficher une photo avant-après à l'aide d'un plugin gratuit (facile)
• Méthode 2 : Afficher une photo avant-après à l'aide de SeedProd (plus personnalisable)
• Frequently Asked Questions About Before and After Sliders

Méthode 1 : Afficher une photo avant-après à l'aide d'un plugin gratuit (facile)

Le moyen le plus simple de créer des photos avant-après est d'utiliser le plugin Ultimate Before After Image Slider & Gallery – BEAF.

Le plugin BEAF vous permet de créer des curseurs horizontaux et verticaux et de personnaliser l'image avec différentes étiquettes et couleurs.

Astuce importante : Pour que l'effet de curseur fonctionne parfaitement, vos images « avant » et « après » doivent être de la même taille exacte (même largeur et hauteur en pixels). Cela garantit qu'elles s'alignent correctement. Vous pouvez utiliser n'importe quel outil de retouche photo pour recadrer ou redimensionner vos images avant de les télécharger.

La première chose à faire est d'installer et d'activer le plugin Ultimate Before After Image Slider & Gallery (BEAF). Pour plus de détails, consultez notre guide étape par étape sur comment installer un plugin WordPress.

Après l'activation, allez dans Before and After Slider » Add New dans votre tableau de bord.

Pour commencer, tapez un nom pour le curseur d'images. Ceci est juste pour votre référence, vous pouvez donc utiliser tout ce qui vous aidera à l'identifier.

Une fois cela fait, vous pouvez ajouter l'image « avant » en faisant défiler jusqu'à la section « Before Image ».

Ici, cliquez sur « Upload » puis choisissez une image dans la bibliothèque de médias WordPress ou téléchargez une nouvelle image depuis votre ordinateur.

Pour aider les moteurs de recherche à comprendre cette image et à l'afficher aux bonnes personnes, il est conseillé d'ajouter du texte alternatif d'image. Pour ce faire, tapez simplement dans le champ « Texte alternatif de l'image ».

Pour plus d'informations sur le texte alternatif, veuillez consulter notre guide pour débutants sur le référencement d'images.

Une fois cela fait, faites défiler jusqu'à la section « Après l'image ».

Vous pouvez maintenant ajouter l'image « après » en suivant le même processus décrit ci-dessus. N'oubliez pas d'ajouter également du texte alternatif à cette image, car c'est important pour le référencement WordPress.

Vous pouvez également afficher du texte sous l'image en ajoutant un titre et une description (comme une légende).

Par exemple, vous pourriez encourager les visiteurs à interagir avec le curseur. C'est un excellent moyen de guider les visiteurs qui ne sont peut-être pas familiers avec le fonctionnement des curseurs interactifs.

C'est aussi un moyen facile d'ajouter du contexte à l'image.

Pour ajouter du texte, tapez simplement dans les champs « Titre du curseur » ou « Description du curseur ».

Vous pouvez également ajouter une URL « Lire la suite », qui peut renvoyer vers n'importe quel article ou page de votre site web WordPress ou même vers un site web externe. Par exemple, vous pourriez envoyer les visiteurs vers une page où ils peuvent acheter le produit présenté dans l'image du curseur.

Ce lien apparaîtra sous l'image avant/après et également sous tout titre ou description de curseur que vous utilisez.

Si vous créez un lien vers un autre site Web, nous vous recommandons de choisir « Nouvel onglet » afin de ne pas envoyer les visiteurs hors de votre blog WordPress.

Une fois cela fait, vous pouvez choisir de créer un curseur vertical ou horizontal en cliquant sur l'une des miniatures dans la section « Style d'orientation ».

Après cela, faites défiler jusqu'en haut de l'écran et cliquez sur « Options ».

Ici, vous verrez que le « Décalage par défaut » est réglé sur 0,5. Cela signifie que le visiteur voit la moitié de l'image « avant » lorsque la page se charge.

Si vous souhaitez afficher davantage de l'image « avant », tapez un nombre plus grand, tel que 0,6, 0,7 ou plus.

Si vous souhaitez afficher l'intégralité de l'image « avant », tapez 1.

Cela placera le curseur en haut ou à droite de l'image « avant », comme vous pouvez le voir sur l'image suivante.

Par défaut, le plugin affiche les étiquettes « Avant » et « Après » lorsque le visiteur survole l'image avec sa souris.

Vous voudrez peut-être remplacer ces étiquettes par quelque chose de plus descriptif.

Pour ce faire, tapez simplement dans les champs « Étiquette Avant » et « Étiquette Après ».

Par défaut, les visiteurs déplacent le curseur par glisser-déposer. Certaines personnes peuvent trouver cela difficile, surtout si elles ont des problèmes de mobilité ou utilisent des appareils plus petits comme des smartphones ou des tablettes.

Cela étant dit, vous pourriez vouloir changer la façon dont les visiteurs déplacent le curseur.

Si vous activez le bouton « Activé » à côté de « Déplacer le curseur au survol de la souris ? », les visiteurs pourront déplacer le curseur simplement en survolant l'image avec leur souris.

Si vous activez le bouton « Cliquer pour déplacer », les visiteurs pourront cliquer n'importe où sur l'image pour déplacer le curseur à cet endroit.

Bien que ces options puissent améliorer l'accessibilité, elles modifient le comportement standard du curseur. Nous vous suggérons de les tester pour voir ce qui semble le plus intuitif pour les visiteurs de votre site Web.

Ensuite, cliquez sur l'onglet « Style ».

Ici, vous pouvez modifier les couleurs utilisées pour les différentes étiquettes, arrière-plans, titres, descriptions et le bouton « En savoir plus ». Cela peut aider l'image avant/après à s'intégrer à votre thème WordPress ou même à se démarquer du reste du design de votre site Web.

Vous pouvez également changer la taille de la police et l'alignement du texte.

Lorsque vous êtes satisfait de la configuration du curseur, cliquez sur le bouton « Publier ».

Cela crée un shortcode qui vous permet d'ajouter l'image avant/après et le curseur à n'importe quelle page, article ou zone prête pour les widgets.

Pour plus d'informations sur la façon de placer le shortcode, veuillez consulter notre guide sur comment ajouter un shortcode dans WordPress.

Après avoir ajouté le shortcode à votre site, cliquez simplement sur le bouton « Publier » ou « Mettre à jour » pour rendre l'image avant/après et l'effet de curseur actifs.

Méthode 2 : Afficher une photo avant-après à l'aide de SeedProd (plus personnalisable)

Si vous souhaitez simplement ajouter un curseur simple à un article existant, le plugin gratuit de la méthode 1 est une excellente option. Cependant, si vous cherchez à créer une page de destination à forte conversion, une page de vente, ou même un thème personnalisé qui présente une comparaison avant/après, nous vous recommandons d'utiliser SeedProd. C'est un constructeur de sites Web puissant qui vous donne un contrôle total sur la conception.

Chez WPBeginner, nous utilisons SeedProd intensivement pour concevoir des sites Web personnalisés pour bon nombre de nos marques partenaires au sein de la famille Awesome Motive. Son interface glisser-déposer nous donne la flexibilité de créer rapidement des pages à forte conversion.

SeedProd est le meilleur constructeur de pages WordPress par glisser-déposer. Il est livré avec plus de 300 modèles prêts à l'emploi que vous pouvez utiliser pour créer des pages de destination à forte conversion, des conceptions de vente, des thèmes WordPress personnalisés, et plus encore.

Il dispose également d'un bloc prêt à l'emploi « Bascule Avant/Après » que vous pouvez utiliser pour créer de belles images avant/après avec lesquelles vos utilisateurs peuvent interagir.

Faites simplement glisser le bloc depuis le menu de gauche, puis déposez-le sur n'importe quelle conception de page sur laquelle vous travaillez, y compris les pages de vente.

Si vous utilisez WooCommerce pour vendre vos produits, SeedProd s'intègre à WooCommerce et propose même des blocs spéciaux pour l'e-commerce. C'est parfait si vous prévoyez d'utiliser des images avant/après pour promouvoir vos produits WooCommerce.

Pour savoir comment utiliser SeedProd, veuillez consulter notre guide sur comment créer une page personnalisée dans WordPress.

Après avoir créé une page, il est facile d'ajouter une image avant-après à votre conception. Dans l'éditeur de page SeedProd, trouvez simplement le bloc « Basculement Avant/Après ».

Vous pouvez ensuite faire glisser et déposer ce bloc n'importe où sur votre conception pour l'ajouter à la mise en page.

Une fois cela fait, cliquez simplement pour sélectionner le bloc « Basculement Avant/Après ». Le menu de gauche se mettra à jour pour afficher tous les paramètres que vous pouvez utiliser pour créer votre image avant-après.

Pour commencer, vous devrez ajouter l'image que vous souhaitez utiliser comme image avant. Sous « Image avant », cliquez sur « Utiliser votre propre image » ou « Utiliser une image de stock » et choisissez l'image que vous souhaitez utiliser.

Par défaut, SeedProd affiche l'étiquette « Avant » au-dessus de cette image. Cependant, vous pouvez la modifier pour quelque chose de plus descriptif en la saisissant dans le champ « Étiquette avant ».

Une fois cela fait, faites défiler jusqu'à la section « Après l'image ».

Vous pouvez maintenant ajouter une image et personnaliser l'étiquette « Après » par défaut en suivant le même processus décrit ci-dessus.

SeedProd peut ajouter un effet de glissement vertical ou horizontal.

Pour basculer entre ces deux styles, faites défiler jusqu'à la section « Orientation du curseur », puis cliquez sur « Vertical » ou « Horizontal ».

Par défaut, les visiteurs se déplaceront entre les images avant et après en faisant glisser le curseur.

Cependant, certains utilisateurs trouveront peut-être plus facile de déplacer le curseur en passant leur souris sur l'image. C'est particulièrement vrai pour les images plus grandes où le visiteur devrait faire glisser le curseur sur une plus grande distance.

Pour essayer ce réglage, activez « Déplacer au survol » dans le menu de gauche.

Ensuite, vous voudrez peut-être ajouter une superposition de couleur aux images avant et après. Cela peut aider l'image à se fondre dans le reste de la palette de couleurs ou à se démarquer de l'arrière-plan.

Vous pouvez même rendre la superposition de couleur semi-transparente pour créer un effet plus subtil.

Pour essayer différentes couleurs, cliquez sur la section « Couleur de superposition », puis apportez vos modifications dans la fenêtre contextuelle qui apparaît.

Une fois cela fait, vous pouvez personnaliser la poignée du curseur en cliquant pour développer la section « Poignée de comparaison ».

Par défaut, SeedProd affiche la moitié de l'image « avant » et la moitié de l'image « après ». Pour changer cela, faites simplement glisser le curseur « Décalage initial de la poignée ».

Pour afficher moins de l'image avant, faites glisser le curseur vers la gauche de manière à afficher un nombre inférieur. Pour afficher plus de l'image avant, faites glisser le curseur vers la droite, ce qui augmente le nombre.

Ensuite, vous pouvez changer la couleur du curseur en utilisant les paramètres « Couleur de la poignée ».

Vous pouvez également rendre la poignée plus épaisse ou plus fine en utilisant le curseur « Épaisseur de la poignée ».

De cette façon, vous pouvez faire ressortir la poignée ou créer un effet plus subtil.

Lorsque vous êtes satisfait de la poignée, vous voudrez peut-être changer le cercle. Vous pouvez agrandir ou réduire le cercle en utilisant les paramètres « Largeur du cercle » et changer le « Rayon du cercle » pour créer des coins vifs ou arrondis.

Au fur et à mesure que vous apportez des modifications, l'aperçu en direct se mettra à jour automatiquement, vous pourrez donc essayer différents paramètres pour voir ce qui rend le mieux.

Lorsque vous êtes satisfait du cercle, vous pouvez vouloir changer la taille des triangles à l'intérieur de ce cercle. Par exemple, si vous avez agrandi le cercle, vous pourriez vouloir augmenter la taille des triangles également.

Pour effectuer ce changement, faites glisser le curseur « Taille du triangle » jusqu'à ce que vous soyez satisfait de son apparence.

Une fois cela fait, vous pouvez continuer à ajouter de nouveaux blocs et à personnaliser le contenu de votre page SeedProd.

Lorsque vous êtes satisfait de l'apparence de la page, cliquez simplement sur la flèche à côté du bouton « Enregistrer », puis sélectionnez « Publier ».

Maintenant, si vous visitez votre site web, vous verrez la conception de votre page avec les images avant et après en direct.

Foire aux questions sur les curseurs avant/après

Nous avons répondu à certaines des questions les plus courantes de nos lecteurs concernant la création de curseurs photo avant/après dans WordPress.

Les plugins pour les photos avant/après sont-ils gratuits ?

Le plugin Ultimate Before After Image Slider & Gallery présenté dans la Méthode 1 est entièrement gratuit. SeedProd propose également une version gratuite, mais vous aurez besoin de l'un de leurs plans premium pour accéder au bloc « Bascule Avant/Après ».

Quelle méthode est la meilleure pour créer un curseur avant/après ?

La meilleure méthode dépend de vos besoins. Pour ajouter rapidement un curseur simple à un article de blog, le plugin gratuit est un excellent choix. Si vous souhaitez plus de contrôle sur la conception ou si vous créez une page de destination personnalisée, nous recommandons SeedProd pour sa flexibilité.

Puis-je créer un curseur avec plus de deux images ?

Les outils de ce guide sont conçus spécifiquement pour comparer deux images. Si vous avez besoin de présenter plusieurs images en séquence, vous voudrez utiliser un plugin de curseur WordPress dédié comme Soliloquy.

Un curseur avant/après ralentira-t-il mon site web ?

Comme toute image, les fichiers volumineux peuvent impacter la vitesse de chargement de votre site. Pour éviter cela, nous recommandons toujours d'optimiser vos images pour le web avant de les téléverser sur WordPress.

En savoir plus sur les astuces et conseils WordPress pour les images

Vous souhaitez d'autres astuces et conseils pour personnaliser vos images dans WordPress ? Consultez ces guides :

• Comment ajouter des filtres photo façon Instagram dans WordPress (étape par étape)
• Comment créer des superpositions et des survolages de boîtes de retournement dans WordPress
• Comment ajouter automatiquement un filigrane aux images dans WordPress
• Comment utiliser l'IA pour générer des images dans WordPress
• Comment ajouter des GIF animés dans WordPress (la bonne méthode)
• Comment créer facilement un slider responsive dans WordPress

Nous espérons que cet article vous a aidé à apprendre comment ajouter une photo avant/après à votre site WordPress avec un effet de glissement. Vous pouvez également consulter notre guide sur comment ajouter des catégories et des étiquettes à la médiathèque WordPress et notre sélection d'experts des meilleurs plugins d'images mises en avant pour WordPress.

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.