Vous souhaitez afficher les photos avant et après sur votre site Web ? Une photo avant et après peut être utile pour afficher une comparaison côte à côte de deux images identiques avec des différences mineures. Dans cet article, nous allons partager comment afficher facilement une photo avant et après dans WordPress.
Comment fonctionne l’effet photo avant et après ?
Normalement, les gens utilisent Photoshop pour créer une image avant et après. C’est une seule photo qui montre les effets avant/après, et vous pouvez l’ajouter en tant qu’image statique sur votre site WordPress.
Un curseur photo fonctionnel est un moyen interactif d’afficher 2 versions différentes d’une image similaire en taille réelle. Vous pouvez déplacer la poignée du curseur pour comparer les deux images côte à côte.
Voyons comment afficher facilement une photo avant et après dans WordPress.
Didacticiel vidéo
Si vous ne souhaitez pas regarder le didacticiel vidéo, vous pouvez continuer à lire la version texte ci-dessous :
Afficher la photo avant et après dans WordPress
La première chose à faire est d’installer et d’activer le Twenty20 Image Avant-Après brancher. Pour plus de détails, consultez notre guide étape par étape sur la façon d’installer un plugin WordPress.
Lors de l’activation, vous devez créer ou modifier une page/une publication dans votre zone d’administration WordPress où vous souhaitez afficher l’image avant et après. Maintenant, cliquez sur le Ajouter Twenty20 bouton au-dessus de l’éditeur de texte.
Cela ouvrira la bibliothèque multimédia WordPress dans une fenêtre contextuelle. À partir de là, vous devez sélectionner deux images pour le curseur avant et après.
Une fois les images sélectionnées, cliquez sur le Insérer bouton.
Ensuite, il affichera les champs de texte pour ajouter du contenu sur les photos avant et après. Vous pouvez également ajouter une largeur pour le curseur, une valeur de décalage, la direction du curseur, etc.
Après cela, cliquez sur le Insérer un code court bouton pour ajouter la photo avant et après dans votre page WordPress.
Vous pouvez également utiliser le widget image Twenty20 pour afficher la photo avant et après dans votre barre latérale WordPress. Allez simplement sur Apparence » Widgets section dans votre administrateur WordPress, puis faites glisser le widget Twenty20 Slider dans votre zone de widgets de la barre latérale.
Le widget Twenty20 Slider a des paramètres similaires pour la photo avant et après que nous avons partagé ci-dessus dans ce guide. Vous pouvez sélectionner les 2 images une par une dans les paramètres du widget pour créer le curseur photo avant et après.
Maintenant, vous pouvez visiter votre site Web pour voir la photo avant et après en action.
Au fur et à mesure que les utilisateurs glissent la poignée vers chaque image, l’autre image deviendra visible. Les utilisateurs peuvent déplacer le curseur complètement vers la droite ou la gauche pour voir l’intégralité de l’image avant et après. Au fur et à mesure que les utilisateurs glissent, les étiquettes avant et après disparaissent automatiquement.
Ce plugin fonctionne très bien avec les constructeurs de pages WordPress populaires comme Beaver Builder et Elementor pour afficher rapidement les photos avant et après dans les pages de votre site Web sans utiliser de codes courts.
Nous espérons que cet article vous a aidé à apprendre comment afficher une photo avant et après dans WordPress. Vous pouvez également consulter notre guide sur la façon d’ajouter un zoom grossissant pour les images dans WordPress.
