Vous souhaitez présenter vos compétences en matière de retouche photo d'une manière interactive et professionnelle ? Une barre de défilement de photos avant et après permet aux visiteurs de faire glisser une poignée pour révéler eux-mêmes la transformation, ce qui rend votre portfolio plus attrayant que des images statiques côte à côte.
Le plus beau, c'est que vous pouvez ajouter cet effet à WordPress avec une solution simple, sans code, et je vais vous guider pas à pas.
Etapes rapides pour ajouter un slider de photos avant et après sur WordPress :
- Étape 1. Installer et activer SeedProd
- Étape 2. Créez votre mise en page WordPress
- Etape 3. Ajouter le bloc WordPress Avant et Après
- Étape 4. Activer vos modifications
Comment fonctionne l'effet photo avant et après ?
Un curseur de photos avant et après permet aux visiteurs de faire glisser un séparateur pour faire apparaître une image par-dessus l'autre. Au lieu de photos statiques côte à côte, les utilisateurs contrôlent la quantité de chaque version qu'ils voient, ce qui rend la transformation plus attrayante.
Par exemple :
- Les dentistes peuvent mettre en évidence les résultats avant et après le traitement.
- Les marques de produits de beauté peuvent montrer l'impact d'un produit.
- Les boutiques de commerce électronique peuvent comparer les caractéristiques des produits.
Il s'agit d'un moyen simple mais puissant de présenter les changements directement sur votre site. Je vous montrerai ensuite comment ajouter cet effet dans WordPress.
Comment ajouter des photos avant et après dans WordPress
En règle générale, l'ajout de widgets et de diaporamas à votre site web nécessite l'utilisation de Javascript, Jquery, HTML, CSS et d'autres langages de codage. De nombreux propriétaires de sites web ne savent pas comment écrire ce code et se tournent donc vers des développeurs web pour obtenir de l'aide, ce qui peut s'avérer assez coûteux.
Heureusement, il existe des moyens moins coûteux d'ajouter de nouvelles fonctionnalités à votre site WordPress. Avec certains des meilleurs plugins WordPress, vous pouvez facilement améliorer votre site web sans dépenser une fortune.
Le tutoriel ci-dessous vous montre comment ajouter des curseurs de photos avant et après avec SeedProd.
SeedProd est le meilleur constructeur de site WordPress avec la fonctionnalité drag-and-drop. Il vous permet d'utiliser des modèles pré-faits et un constructeur visuel de pages pour créer des mises en page WordPress flexibles sans code.
Grâce à ses blocs WordPress à glisser-déposer, vous pouvez améliorer votre site Web avec des fonctionnalités précieuses, notamment
- Curseurs avant et après
- Galeries d'images avancées
- Tableaux des prix
- Formulaires Optin
- Boutons d'appel à l'action
- Comptes à rebours
- Contenu des onglets
- Cadeaux
- Formulaires de contact
- Et bien d'autres choses encore.
Vous pouvez également utiliser SeedProd pour créer une page "coming soon" et mettre WordPress en mode maintenance. De plus, tout ce que vous faites est 100% mobile responsive, ce qui garantit que votre site est facile à utiliser sur les appareils mobiles.
Cliquez sur le bouton ci-dessous pour télécharger le plugin SeedProd, puis suivez les étapes pour intégrer un slider de photos avant et après sur votre site web.
Étape 1. Installer et activer SeedProd
Après avoir téléchargé le plugin, trouvez l'onglet Téléchargements dans votre compte SeedProd, et copiez votre clé de licence.
Maintenant, allez-y et téléchargez le plugin sur votre site WordPress. Si vous avez besoin d'aide, vous pouvez suivre ce guide étape par étape sur l'installation d'un plugin WordPress.
Une fois que SeedProd est installé, naviguez vers SeedProd " Réglages depuis votre administrateur WordPress et collez la clé de licence que vous avez copiée plus tôt.
Cliquez sur le bouton Vérifier la clé pour activer votre licence, puis passez à l'étape 2.
Étape 2. Créez votre mise en page WordPress
Après avoir installé SeedProd, vous devrez décider du type de présentation que vous souhaitez créer. Vous pouvez créer un thème WordPress personnalisé ou construire des pages d'atterrissage à fort taux de conversion avec l'éditeur drop-and-drop de SeedProd.
L'option Theme Builder est un excellent moyen de remplacer le design de votre site web existant par un nouveau thème WordPress adapté aux besoins de votre entreprise. Il génère tous les fichiers modèles d'un thème WordPress typique et vous permet de personnaliser chaque partie visuellement grâce à son puissant constructeur de pages.
Suivez ce tutoriel pour créer un thème WordPress personnalisé avec SeedProd.
Vous pouvez également utiliser le Landing Page Builder pour créer des pages d'atterrissage autonomes qui s'intègrent parfaitement à votre thème WordPress actuel. Il utilise le même éditeur visuel que le constructeur de thème et constitue une fantastique tactique de génération de leads pour tout site web.
Voici un guide sur la façon de créer une page d'atterrissage dans WordPress en utilisant SeedProd.
Une fois que vous avez créé une nouvelle mise en page, vous pouvez passer à l'étape 3 et ajouter une barre de défilement avant et après à votre conception.
Remarque : pour ce guide, nous allons créer un thème WordPress personnalisé et modifier le modèle de la page d'accueil.
Etape 3. Ajouter le bloc WordPress Avant et Après
Après avoir créé votre mise en page, ouvrez la page que vous voulez éditer avec le constructeur de pages de SeedProd.
Puisque nous modifions la page d'accueil de notre thème WordPress, nous allons aller dans SeedProd " Theme Builder et cliquer sur Edit Design sous le modèle Homepage.
Sur l'écran suivant, vous verrez une présentation similaire à celle ci-dessous :
Sur la droite se trouve un aperçu en direct du modèle que vous avez choisi à l'étape 2, et sur la gauche se trouvent des blocs et des sections que vous pouvez faire glisser et déposer dans votre conception.
Il est très facile de personnaliser n'importe quel élément.
Par exemple, vous pouvez modifier les titres en cliquant dessus et en tapant votre nouveau contenu directement sur l'aperçu en direct.
Vous pouvez également modifier le texte dans le panneau de configuration situé sur le côté gauche, qui comprend d'innombrables options de personnalisation.
Personnalisez donc votre modèle jusqu'à ce qu'il ressemble à ce que vous voulez.
Voyons maintenant comment ajouter des fonctionnalités que votre modèle n'inclut peut-être pas automatiquement. Par exemple, le kit de site Web que nous avons choisi n'a pas de curseur pour les photos avant et après, nous devrons donc l'ajouter nous-mêmes.
Pour ce faire, faites défiler les blocs WordPress sur la gauche jusqu'à ce que vous trouviez la bascule Avant/Après. Faites-le ensuite glisser en position sur votre aperçu en direct.
Lorsque vous cliquez sur le bloc, les options de personnalisation s'ouvrent dans le panneau de configuration de gauche. C'est là que vous pouvez ajouter vos images avant et après, modifier le style, etc.
Commençons par ajouter la première image, qui sera généralement votre photo "avant". Vous pouvez le faire en cliquant sur l'option Utiliser votre propre image et en téléchargeant une nouvelle photo ou en en choisissant une dans votre bibliothèque de médias WordPress.
Répétez cette étape pour l'image "après". Vous pouvez modifier les étiquettes de chaque image en remplaçant les noms dans les champs de texte.
Une fois les images en place, examinons quelques autres paramètres.
Dans la rubrique Orientation, vous pouvez faire en sorte que le curseur avant et après soit vertical au lieu d'être horizontal.
Vous pouvez également faire bouger le curseur lorsque vous survolez l'image avec votre curseur et appliquer une superposition de couleurs aux photos.
Lorsque vous ouvrez l'en-tête Poignée de comparaison, vous trouverez des paramètres permettant de modifier la couleur du curseur, sa largeur, la taille des pixels du rayon, etc.
Vous trouverez encore plus de paramètres en cliquant sur l'onglet Avancé. Par exemple, vous pouvez modifier la typographie et la couleur des étiquettes, ajuster l'espacement des blocs et les attributs, et masquer certains éléments sur les écrans mobiles.
Lorsque vous êtes satisfait de l'aspect de la barre de défilement des photos avant et après, cliquez sur le bouton Enregistrer dans le coin supérieur droit de votre écran, puis sur Publier.
Si vous créez une page d'atterrissage, vous pouvez maintenant prévisualiser votre page et voir vos images avant et après en action. En revanche, si vous créez un thème WordPress personnalisé, vous devrez suivre l'étape 4.
Étape 4. Activer vos modifications
Même si vos modifications sont enregistrées et publiées, vous devez encore rendre votre thème WordPress opérationnel. Ne vous inquiétez pas, cette étape est simple et rapide.
Allez sur SeedProd " Theme Builder depuis votre tableau de bord WordPress, et mettez l'interrupteur Enable SeedProd Theme sur la position "Yes". Voilà, c'est fait !
Vous pouvez maintenant vous rendre sur la page d'accueil de votre site web et tester votre nouveau curseur d'image.
FAQs sur le slider photo avant et après
Vous savez maintenant comment ajouter des photos avant et après à votre site web WordPress. Il existe de nombreuses façons de mettre cette fonctionnalité au service du succès de votre entreprise.
Qu'attendez-vous donc ?
Merci de votre lecture ! Nous aimerions connaître votre avis, alors n'hésitez pas à participer à la conversation sur YouTube, X et Facebook pour obtenir d'autres conseils et contenus utiles pour développer votre entreprise.
