Comment utiliser les effets de curseur pour afficher les images avant et arrière dans WordPress

Supposons que vous soyez un blogueur de fitness qui veut inspirer votre public en partageant des images de votre corps avant et après les changements. Au lieu de simplement placer l’image côte à côte, utilisez le curseur pour afficher les différences avant et après. Attendez. Qu’est – ce qu’un curseur d’image avant et arrière? Il s’agit d’un curseur d’image qui empile une image sur une autre et utilise un curseur interactif pour afficher l’image. Si le curseur se déplace horizontalement, la première image s’affiche lorsque le curseur se déplace vers l’extrême droite et la deuxième image s’affiche lorsque vous vous déplacez vers la gauche. Un tel curseur est utile pour comparer deux images similaires. Il est donc utile pour de nombreux professionnels tels que photographes, esthéticiens, designers, médecins et dentistes. Si vous êtes un utilisateur de WordPress et que vous voulez savoir comment l’utiliser sur votre site, vous êtes au bon endroit. Dans cet article, je vais partager comment ajouter des images avant et après l’utilisation des effets de curseur sur le site. Alors, n’en parlons plus, commençons. Comment puis – je m’abonner à notre chaîne YouTube pour ajouter un curseur d’image avant et après? Il y a beaucoup de plugins gratuits et avancés que vous pouvez ajouter des curseurs d’image avant et après la page.
Cependant, dans cet article, nous utiliserons le plug – in twenty20 image Before After. Plus tard, je mentionnerai quelques alternatives gratuites et avancées populaires. Installer le plug – in twenty20 image Before After Twenty20 est un plugin gratuit disponible dans la Bibliothèque de plugins WordPress. Vous permet d’ajouter des curseurs d’images avant et après les messages, les pages et les barres latérales. Il prend également en charge les générateurs de page populaires tels que elementor et wpbakery. Pour installer ce plug – in, allez au plug – in – > Ajouter un nouveau plug – in et rechercher twenty20 I
Mage avant et après. Une fois le plug – in trouvé, installez – le et activez – le: Il n’y a pas de page de configuration pour ajouter des images avant et après à votre message ou Page 20 plug – in. Ensuite, après l’installation du plug – in, vous pouvez commencer à faire du sale travail. Maintenant, après avoir mis à jour WordPress 5.0, vous pouvez utiliser l’éditeur classique ou Gutenberg. Laissez – moi vous montrer comment ce plug – in fonctionne dans les deux éditeurs. Le plug – in twenty20 de l’éditeur Gutenberg n’a pas encore de bloc, mais vous pouvez utiliser ses propriétés de code court et ajouter du Code au bloc de code court. Regardons un exemple de code Court: [twenty20 img1 = \
Laissez – moi expliquer chaque paramètre: img1 – ici, vous devez ajouter l’id de l’image (et non l’URL de l’image) de la première image. Img2 – ajoute l’id de la deuxième image (pas l’URL de l’image). Orientation – cela vous permet de décider si le curseur est horizontal ou vertical. La valeur sera alors horizontale ou verticale. Offset: la valeur offset doit être comprise entre 0,1 et 1. Alignement – détermine l’alignement avant et après l’image. La valeur peut être nulle, gauche ou droite. Largeur – la largeur de l’image peut être en pourcentage ou en pixels. Tout d’abord, vous pouvez ajouter ici le titre de l’image précédente. Après: ajouter le titre de l’image suivante. Passez le curseur – ce paramètre détermine si vous voulez déplacer le curseur à la position de déplacement de la souris. Accepte une valeur vraie ou fausse. Vous ne savez pas comment trouver l’id de l’image? De la barre latérale gauche du tableau de bord WordPress, allez à la galerie médias – > et cliquez sur l’image. Vérifiez maintenant la barre d’adresse de votre navigateur Web: Dans l’exemple ci – dessus, vous pouvez voir l’élément = 50 dans l’URL. Par conséquent, 50 est l’id de cette image particulière. Volontiers. Maintenant tu sais à quel point c’est utile.
Créez (ou modifiez) un article ou une page que vous voulez ajouter un curseur d’image avant et après. Ensuite, ajoutez un nouveau bloc et localisez le Widget shortcode: Copiez le Code que j’ai utilisé dans l’exemple ci – dessus, collez – le dans la boîte de raccourci et modifiez – le au besoin: C’est tout. Vous pouvez maintenant prévisualiser le message (ou la page) et voir s’il fonctionne correctement.
Éditeur classique si vous utilisez un éditeur classique, après l’installation du plug – in, vous verrez un nouvel ajout de 20 boutons. En cliquant sur ce bouton, vous ouvrez une fenêtre contextuelle qui vous demande de sélectionner deux images: Après avoir sélectionné les deux images et cliqué sur Insérer, une nouvelle fenêtre s’ouvre pour vous demander quelques détails sur la génération du Code raccourci: Une fois la configuration terminée, vous pouvez cliquer sur le bouton Insérer un code court. Vous pouvez également modifier ce code plus tard: Suivez l’exemple dans la section Éditeur Gutenberg.
L’ajout d’images avant et arrière dans le plug – in de la barre latérale twenty20 vous permet également d’ajouter des images avant et arrière dans la barre latérale du site. Il est livré avec un widget qui fait un excellent travail pour vous. Allez à apparence – > Widget. Localisez maintenant le Widget twenty20 et faites – le glisser dans la zone de la barre latérale. Les paramètres de ce Widget sont similaires à ceux de la section précédente: vous n’avez que deux boutons supplémentaires pour sélectionner (ou télécharger) Les images avant et après. Une fois terminé, sauvegardez les paramètres du Widget et vérifiez votre site Web. C’est simple, non? Bien que j’aime le plug – in twenty20 parce qu’il est simple et gratuit, vous pouvez préférer d’autres plug – ins. J’ai donc décidé de partager quelques solutions de rechange gratuites et de qualité:
1. Images avant et après Divi Si vous êtes un utilisateur de Divi, le plug – in avant + après images de Divi est le mieux adapté à vos besoins. C’est la loi.