Montrer des photos avant et après est un excellent moyen de comparer les effets visuels. Si les changements sont massifs, cela peut entraîner une augmentation des ventes, des prospects et de la réputation, car cela fournit une preuve photographique de vos affirmations.
L’impact peut être monumental, c’est pourquoi beaucoup de gens créent une galerie de photos WordPress avant et après. C’est facile, efficace et ne prend pas beaucoup de temps à mettre en place.
Que vous montriez une perte de poids, des réparations de maison, l’entretien de la pelouse ou toute autre comparaison, les photos avant et après vendent très bien l’information.
Dans ce tutoriel, je vais vous montrer comment créer une galerie de photos avant et après sur WordPress. Tout ce qu’il faut, c’est WordPress et le bon plugin.
Utilisation de Twenty20 Image Avant-Après
L’une des façons les plus simples de mettre en place ce système est d’utiliser le plugin Twenty20 Image Before-After. Il est livré avec un shortcode personnalisable et un widget de barre latérale.
Cela signifie que vous pouvez ajouter la photo avant et après presque partout dans WordPress. Il prend également en charge un curseur qui dévoile l’image. Cela donne à la photo avant et après un sentiment d’interactivité.
C’est probablement l’un des meilleurs plugins WordPress gratuits de visualisation avant et après que vous pouvez utiliser.
Installez et activez le plugin “Twenty20”. Cela ajoutera une nouvelle fonctionnalité aux articles et aux pages ainsi qu’un widget de barre latérale.
Il existe plusieurs façons d’utiliser Twenty20 dans WordPress. Laissez-moi vous donner les bases du générateur de shortcodes et du widget.
Twenty20 en tant que shortcode d’article ou de page
Créez un nouveau message ou une nouvelle page. Pour ce tutoriel, je vais simplement créer un nouveau message.
Remarquez que vous avez deux nouvelles options au-dessus de l’éditeur. Une pour “Ajouter Twenty20” et une autre pour “Aide T20”. Le bouton “Aide T20” ouvrira une fenêtre séparée avec des informations sur la façon de modifier manuellement le shortcode.
Cela pourrait être idéal en fonction de votre situation.
Mais pour l’instant, utilisons simplement le plugin pour créer une nouvelle photo de comparaison côte à côte.
Cliquez sur le bouton “Ajouter Twenty20” au-dessus de l’éditeur.
Sélectionnez deux images que vous voulez comme avant et après.
Cliquez sur le bouton “Insérer” en bas à droite.
Twenty20 ouvrira une fenêtre dans laquelle vous pourrez effectuer des ajustements. Vous pouvez modifier les dimensions des photos, ajouter vos propres textes, où commence le décalage des images et si le curseur se déplace avec un simple mouvement de souris.
Pour l’instant, je vais conserver ces paramètres par défaut. Cependant, vous pouvez faire les ajustements que vous souhaitez.
Cliquez sur le bouton “Insert Shortcode” pour ajouter les images à l’article une fois que vous avez terminé.
Twenty20 ajoutera le code court dans le champ de l’éditeur.
Par coïncidence, vous pouvez copier et coller ce code court exact dans la plupart des sections de WordPress. Donc, si vous voulez garder cette photo de comparaison particulière pour d’autres projets, vous pouvez enregistrer le code dans quelque chose comme Notepad pour plus tard.
Après avoir publié l’article ou la page, les photos deviennent accessibles aux visiteurs.
Utilisation du widget de la barre latérale
Que faire si vous souhaitez ajouter une photo avant et après dans un widget de barre latérale WordPress ? Twenty20 s’occupe de vous.
Allez dans Apparence et cliquez sur “Widgets”.
Faites glisser et déposez le widget “Twenty20” dans la barre latérale. Vous pouvez le placer où bon vous semble dans les barres latérales disponibles dans votre thème WordPress.
Comme vous pouvez le voir, le widget a toutes les mêmes fonctions que le bouton shortcode pour les articles et les pages. Faites vos ajustements et cliquez sur le bouton “Enregistrer”.
NOTATION IMPORTANTE :Pour une raison quelconque, divers navigateurs web ne seront pas en mesure de voir les images avant et après ajoutées au widget jusqu’à ce que le bouton “Enregistrer” soit cliqué. Ainsi, même s’il ne semble pas que vous ayez ajouté des photos, Twenty20 inclura les images.
Après avoir enregistré, vous aurez une photo avant et après dans la barre latérale.
Création d’une galerie avant et après
Alors, que pouvez-vous faire pour créer une galerie WordPress complète de photos avant et après avec Twenty20 ? Après tout, que faire si vous voulez montrer un grand nombre de photos de comparaison ?
C’est très simple. Il suffit de créer une page pour votre galerie et d’ajouter plusieurs images en utilisant le bouton Twenty20 de l’éditeur. Vous pouvez ajouter autant d’images de comparaison que vous le souhaitez en utilisant le générateur de shortcodes.
Une fois que vous avez créé la galerie, vous voudrez peut-être ajouter la page à vos éléments de menu. De cette façon, les visiteurs ont un moyen facile de trouver la galerie. Il ne serait probablement pas mal de la partager en utilisant les outils de médias sociaux également.
Support étendu
L’un des avantages de Twenty20 est qu’il est compatible avec de nombreux plugins de construction de pages. Vous n’avez pas à modifier les paramètres ou à essayer un code de contournement bizarre pour que Twenty20 fonctionne correctement.
Par exemple, vous pouvez facilement ajouter un slider d’images avant et après dans WP avec le constructeur de pages Elementor, car il ajoute Twenty20 comme élément dans le processus de conception.
Ajouter du style à WordPress
Avoir une galerie de photos WordPress avant et après est un excellent moyen d’ajouter du style à votre site. Elle peut ajouter de l’engagement et de l’interaction tout en vous donnant une chance de démontrer des comparaisons.
Et n’oubliez pas que les images sont l’un de vos meilleurs atouts lorsque vous créez un site Web.
Quelles fonctions interactives utilisez-vous actuellement sur votre site Web ? Faites-vous souvent des comparaisons dans votre contenu ?
