Comment afficher les images avant et après avec l'effet de curseur dans WordPress

Supposons que vous soyez un blogueur fitness et que vous souhaitiez inspirer votre public en partageant les images avant et après de votre transformation corporelle. Au lieu de simplement placer les images côte à côte, ce serait plutôt cool si vous pouviez utiliser un curseur d'image avant et après pour montrer la différence.

Attendre! Qu'est-ce qu'un curseur d'image avant et après ?

Il s'agit d'un curseur d'image qui empile une image sur une autre et utilise un curseur interactif pour révéler les images. Si le curseur se déplace horizontalement, la première image sera révélée lorsque le curseur se déplacera vers l'extrême droite et la seconde sera visible lorsqu'il se déplacera vers la gauche.

De tels curseurs sont pratiques pour comparer deux images similaires. Et par conséquent, il peut être utile pour un certain nombre de professionnels comme les photographes, les esthéticiennes, les designers, les médecins et les dentistes.

Si vous êtes un utilisateur de WordPress et que vous vous demandez comment l'utiliser sur votre site Web, vous êtes au bon endroit. Dans cet article, je vais partager comment vous pouvez ajouter des images avant et après avec l'effet de curseur sur votre site Web.

Alors sans plus tarder, commençons.

Abonnez-vous à notre chaîne Youtube

Comment ajouter un curseur d'image avant après

Il existe de nombreux plugins gratuits et premium à l'aide desquels vous pouvez ajouter le curseur d'image avant-après sur une page Web.

Cependant, nous utiliserons le plugin Twenty20 Image Before After dans cet article. Plus tard, je mentionnerai également quelques alternatives populaires gratuites et premium.

Installer Twenty20 Image Avant Après Plugin

Twenty20 est un plugin gratuit et est disponible dans le référentiel de plugins WordPress. Il vous permet d'ajouter des curseurs d'image avant-après dans vos articles, pages et barre latérale. Il prend également en charge les constructeurs de pages populaires comme Elementor et WPBakery.

Pour installer ce plugin, allez dans Plugins -> Ajouter un nouveau et recherchez Twenty20 Image Before-After. Une fois que vous avez trouvé le plugin, installez-le et activez-le simplement :

Ajoutez une image avant-après dans votre publication ou votre page

Le plugin Twenty20 n'est livré avec aucune page de paramètres. Vous pouvez donc commencer à faire le sale boulot après avoir installé le plugin.

Maintenant, après la mise à jour de WordPress 5.0, vous pouvez utiliser l'éditeur Classic ou l'éditeur Gutenberg. Alors laissez-moi vous montrer comment ce plugin fonctionne sur les deux éditeurs.

Éditeur Gutenberg

Le plugin Twenty20 n'a pas de bloc jusqu'à présent, mais vous pouvez utiliser sa fonctionnalité de shortcode et ajouter le code dans le bloc de shortcode.

Jetons un coup d'œil à un exemple de shortcode :

[twenty20 img1=”3442″ img2=”3442″ direction=”horizontal” offset=”0.4″ align=”aucun” width=”100%”avant=”Avant” after=”Après” hover=”false”]

Permettez-moi d'expliquer chacun des paramètres :

• img1 - Ici, vous devez ajouter l'ID de l'image (pas l'URL de l'image) de la première image.
• img2 – Ajoutez l'ID (et non l'URL de l'image) de la deuxième image.
• direction – Cela vous permet de décider si vous voulez que le curseur soit dans le sens horizontal ou vertical. Ainsi, la valeur sera soit horizontale, soit verticale.
• offset – La valeur de l'offset doit être comprise entre 0,1 et 1.
• align – Ceci détermine l'alignement de l'image avant-après. La valeur peut être aucune, gauche ou droite.
• largeur – La largeur de l'image peut être en pourcentage ou en pixels.
• avant - Vous pouvez ajouter la légende de l'image avant ici.
• after – Ajoutez la légende de l'image after.
• hover – Ce paramètre décide si vous souhaitez déplacer le curseur lors du mouvement de la souris. Il accepte une valeur vraie ou fausse.

Vous ne savez pas comment trouver l'ID d'une image ? Allez dans Média -> Bibliothèque dans la barre latérale gauche de votre tableau de bord WordPress et cliquez sur l'image. Vérifiez maintenant la barre d'adresse de votre navigateur Web :

Dans l'exemple ci-dessus, vous pouvez voir item = 50 dans l'URL. Donc, 50 est l'ID de cette image particulière.

D'accord! Maintenant que vous savez comment utiliser le shortcode Twenty20, créez (ou modifiez) un article ou une page où vous souhaitez ajouter le curseur d'image avant-après. Et puis, ajoutez un nouveau bloc et recherchez le widget shortcode :

Copiez le code que j'ai utilisé dans l'exemple ci-dessus, collez-le dans la zone de shortcode et modifiez-le selon vos besoins :

C'est ça. Vous pouvez maintenant prévisualiser le message (ou la page) et vérifier s'il fonctionne correctement ou non.

Éditeur classique

Si vous utilisez l'éditeur classique, vous verrez un nouveau bouton Ajouter Twenty 20 après avoir installé le plugin. Cliquez sur ce bouton et une fenêtre contextuelle s'ouvrira vous demandant de sélectionner deux images :

Une fois que vous avez sélectionné deux images et cliqué sur Insérer, une nouvelle fenêtre s'ouvrira vous demandant quelques détails pour générer le shortcode :

Une fois que vous avez terminé avec les paramètres, vous pouvez cliquer sur le bouton Insérer un shortcode.

Vous pouvez également apporter des modifications à ce shortcode plus tard - suivez simplement l'exemple de la section Éditeur Gutenberg.

Ajouter une image avant-après dans votre barre latérale

Le plugin Twenty20 vous permet également d'ajouter des images avant-après dans la barre latérale de votre site Web. Il est livré avec un widget qui fait le travail cool pour vous.

Rendez-vous sur Apparence -> Widgets. Trouvez maintenant le widget Twenty20 et faites-le glisser vers la zone de la barre latérale. Les paramètres de ce widget sont similaires à ceux de la section précédente - vous avez juste deux boutons supplémentaires pour sélectionner (ou télécharger) les images avant et après.

Une fois que vous avez terminé, enregistrez les paramètres du widget, puis vérifiez votre site Web. Simple, n'est-ce pas ?

Quelques plugins alternatifs

Bien que j'aime le plugin Twenty20 car il est simple et gratuit, vous préférerez peut-être autre chose. Par conséquent, j'ai décidé de partager quelques alternatives gratuites et premium à ce plugin :

1. Images avant + après pour Divi

Si vous êtes un utilisateur de Divi, le plugin Before + After Images pour Divi est le mieux adapté à vos besoins. Il est léger, réactif et prend en charge le chargement paresseux. Il crée un nouveau module qui vous aide à ajouter des images avant et après sur votre site Web. Ce plugin gratuit fonctionnera avec le plugin Divi Builder, le thème Divi et d'autres thèmes d'Elegant Themes.

Prix ​​– Gratuit | Plus d'information

2. Curseur polyvalent avant après

Le curseur polyvalent Before After est un plug-in premium activé par le toucher et le balayage. Il est livré avec un panneau d'administration facile à utiliser qui vous aide à modifier chaque curseur d'image selon vos besoins et ne nécessite pas l'utilisation de codes abrégés. Vous pouvez créer un nombre illimité d'images avant-après et les utiliser sur les articles, les pages et la barre latérale.

Prix ​​– 18 $ | Plus d'information

3. Visionneuse intelligente avant après

Smart Before After Viewer est un plugin premium entièrement réactif et tactile. Il vous permet d'ajouter des textes d'étiquette personnalisés sur les images avant et après. Et vous pouvez changer la position et la couleur des étiquettes sans aucun problème. Ce plugin vous permet également d'ajouter plusieurs images sur une seule page.

Prix ​​– 18 $ | Plus d'information

Note de fin

Un curseur d'image avant-après est un excellent moyen de montrer les différences entre deux images identiques. Et vous pouvez utiliser de tels curseurs sur votre site WordPress en suivant ce tutoriel.

Alors, avez-vous déjà utilisé l'un des plugins mentionnés dans cet article ? Ou, souhaitez-vous suggérer un plugin particulier qui convient pour réaliser la même chose ? Faites-nous savoir dans la section des commentaires.

Image en vedette via __ / shutterstock.com