Comment afficher la photo avant et après dans WordPress (avec effet de diapositive)

Voulez-vous afficher les photos avant et après sur votre site Web? Une photo avant et après peut être utile pour comparer côte à côte deux images identiques avec des différences mineures. Dans cet article, nous expliquerons comment montrer facilement une photo avant et après dans WordPress..

Comment fonctionnent les effets photo avant et après?

Normalement, les gens utilisent Photoshop pour créer une image avant et après. C'est une photo unique qui montre les effets avant / après, et vous pouvez l'ajouter sous forme d'image statique sur votre site Web WordPress.

Un curseur photo fonctionnel est un moyen interactif d'afficher deux versions différentes d'une image similaire en taille réelle. Vous pouvez déplacer le curseur pour comparer les deux images côte à côte.

Voyons comment montrer facilement une photo avant et après dans WordPress.

Didacticiel vidéo

Si vous ne souhaitez pas visionner le didacticiel vidéo, vous pouvez continuer à lire la version texte ci-dessous:

Affichage de la photo avant et après dans WordPress

La première chose à faire est d’installer et d’activer le plugin Twenty20 Image Avant-Après. Pour plus de détails, consultez notre guide étape par étape pour installer un plugin WordPress..

Lors de l'activation, vous devez créer ou modifier une page / 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 médiathèque 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 bouton Insérer bouton.

Ensuite, il va afficher les champs de texte pour ajouter du contenu au-dessus des photos avant et après. Vous pouvez également ajouter de la largeur pour le curseur, la valeur de décalage, la direction du curseur, etc..

Après cela, cliquez sur le bouton Insérer un shortcode bouton pour ajouter la photo avant et après dans votre page WordPress.

Vous pouvez également utiliser le widget d’image Twenty20 pour afficher la photo avant et après dans la barre latérale de WordPress. Il suffit d'aller à Apparence »Widgets section de votre administrateur WordPress, puis faites glisser le widget Twenty20 Slider dans la zone du widget Barre latérale.

Le widget Twenty20 Slider a les mêmes paramètres pour la photo avant et après que nous avons partagés 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 de photo avant et après..

Maintenant, vous pouvez visiter votre site Web pour voir la photo avant et après en action.

Lorsque les utilisateurs font glisser la poignée vers chaque image, l’autre image devient visible. Les utilisateurs peuvent déplacer le curseur complètement à droite ou à gauche pour voir la totalité de l'image avant et après. Lorsque 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 la photo avant et après sur les pages de votre site Web sans utiliser de code court.

Nous espérons que cet article vous a aidé à apprendre à montrer une photo avant et après dans WordPress. Vous voudrez peut-être aussi consulter notre guide sur la manière d’ajouter un zoom grossissant pour les images dans WordPress.

Si vous avez aimé cet article, abonnez-vous à nos tutoriels vidéo sur la chaîne YouTube pour WordPress. Vous pouvez aussi nous trouver sur Twitter et Facebook.