TL;DR : Comment ajouter un curseur avant/après WordPress (sans code)
Un curseur avant/après permet aux visiteurs de faire glisser une poignée pour révéler une transformation, et vous pouvez en ajouter un à WordPress sans toucher au code en utilisant le bloc Before After Toggle de SeedProd.
- Installer SeedProd : Téléchargez le plugin, copiez votre clé de licence et activez-la dans WordPress.
- Créer votre mise en page : Ouvrez le Theme Builder ou le Landing Page Builder et choisissez un modèle à modifier.
- Ajouter le bloc : Trouvez le bloc Before After Toggle dans le panneau des blocs de SeedProd et faites-le glisser dans votre design.
- Activer vos modifications : Enregistrez et publiez, puis activez le commutateur de thème SeedProd pour rendre votre mise en page active.
Vous avez fait le travail, vous avez les photos, et vous voulez que les visiteurs ressentent la transformation. Mais deux images côte à côte n'ont pas l'impact escompté, et les gens font défiler sans s'arrêter.
Un curseur avant/après WordPress change cela. Les visiteurs font glisser une poignée sur une seule image pour révéler eux-mêmes la transformation, et ce moment d'interaction rend le résultat réel d'une manière que les photos statiques ne font jamais.
Je vais vous montrer exactement comment en ajouter un à WordPress sans toucher une ligne de code, en utilisant le bloc intégré Before After Toggle de SeedProd.
Comment fonctionne l'effet photo avant/après ?
Un curseur de photos avant/après empile deux images et ajoute une poignée déplaçable. Les visiteurs font glisser pour contrôler la quantité de chaque version qu'ils voient, ce qui rend la transformation participative plutôt que passive.
Un dentiste montrant les résultats d'un blanchiment, un salon montrant la transformation d'une coupe de cheveux, ou un entrepreneur montrant une rénovation — le curseur permet aux visiteurs de faire glisser pour voir le changement eux-mêmes plutôt que de faire confiance à une photo statique.
C'est une façon simple de présenter les changements directement sur votre site. Ensuite, je vais vous montrer comment ajouter cet effet dans WordPress.
Comment ajouter des curseurs photo avant/après dans WordPress
La plupart des sites WordPress ont besoin d'un plugin pour ajouter cet effet. Le tutoriel ci-dessous vous montre comment le faire avec SeedProd.
SeedProd est un constructeur de sites web par glisser-déposer qui vous permet de créer des pages, des thèmes et des pages de destination WordPress sans code. Il comprend un bloc natif Before After Toggle, ce qui signifie que vous n'avez pas besoin d'un plugin de curseur séparé. SeedProd gère tout en un seul endroit.
Vous pouvez également utiliser SeedProd pour créer une page de lancement et mettre WordPress en mode maintenance. Tout ce que vous créez est 100% responsive sur mobile, garantissant 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 curseur photo avant/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, téléchargez le plugin sur votre site WordPress. Si vous avez besoin d'aide, vous pouvez suivre ce guide étape par étape sur comment installer un plugin WordPress.
Une fois SeedProd installé, accédez à SeedProd » Paramètres depuis votre administration WordPress et collez la clé de licence que vous avez copiée précédemment.
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
SeedProd vous donne deux options pour placer votre curseur : le Theme Builder, qui remplace votre thème WordPress entier par un design personnalisé, ou le Landing Page Builder, qui crée des pages autonomes à côté de votre thème existant.
Ce guide utilise le Theme Builder pour créer un thème WordPress personnalisé et modifier le modèle de la page d'accueil, mais les étapes pour ajouter le bloc curseur sont les mêmes dans les deux cas.
Une fois que vous avez créé une nouvelle mise en page, passez à l'étape 3 et ajoutez le curseur à votre design.
Étape 3. Ajoutez le bloc WordPress Avant/Après
Après avoir créé votre mise en page, ouvrez la page que vous souhaitez modifier avec le constructeur de pages de SeedProd.
Étant donné que 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 mise en page similaire à celle ci-dessous :
À droite se trouve un aperçu en direct du modèle que vous avez choisi à l'étape 2, et à gauche se trouvent des blocs et des sections que vous pouvez faire glisser sur votre conception.
Par exemple, vous pouvez modifier les titres en cliquant dessus et en tapant votre nouveau contenu directement sur l'aperçu en direct.
Ou, vous pouvez modifier le texte dans le panneau des paramètres sur le côté gauche, qui comprend d'innombrables options de personnalisation.
Personnalisez votre modèle jusqu'à ce qu'il vous plaise.
Examinons maintenant l'ajout de fonctionnalités que votre modèle peut ne pas inclure automatiquement. Par exemple, le kit de site Web Website Kit que nous avons choisi n'a pas de curseur de photos avant/après, nous devrons donc en ajouter un nous-mêmes.
Pour ce faire, faites défiler les blocs WordPress sur la gauche jusqu'à ce que vous trouviez le Before After Toggle. Faites-le ensuite glisser en position sur votre aperçu en direct.
Lorsque vous cliquez sur le bloc, vous ouvrirez ses options de personnalisation dans le panneau des paramètres de gauche. C'est là que vous pouvez ajouter vos images avant et après, modifier le style, et plus encore.
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 Use Your Own Image et en téléchargeant une nouvelle photo ou en en choisissant une dans votre médiathèque WordPress.
Répétez maintenant 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 vos images en place, examinons quelques paramètres supplémentaires.
Sous l'en-tête Orientation, vous pouvez rendre le curseur avant/après vertical au lieu d'horizontal.
Vous pouvez également faire bouger le curseur lorsque vous survolez l'image avec votre curseur et appliquer un survol de couleur aux photos.
Lorsque vous ouvrez l'en-tête Curseur de comparaison, vous verrez des paramètres pour modifier la couleur du curseur, sa largeur, sa taille de rayon en pixels, et plus encore.
Vous pouvez trouver 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 et les attributs des blocs, et masquer certains éléments sur les écrans mobiles.
Lorsque vous êtes satisfait de l'apparence du curseur photo avant/après, cliquez sur le bouton Enregistrer dans le coin supérieur droit de votre écran, puis cliquez sur Publier.
Si vous créez une page de destination, vous pouvez maintenant prévisualiser votre page et voir votre curseur d'image avant/après en action. Mais si vous créez un thème WordPress personnalisé, vous devrez terminer l'étape 4.
Étape 4. Activer vos modifications
Même si vos modifications sont enregistrées et publiées, vous devez toujours activer votre thème WordPress. Ne vous inquiétez pas, cette étape est rapide.
Accédez à SeedProd » Theme Builder depuis votre tableau de bord WordPress, et activez le Activer le thème SeedProd bouton bascule sur la position « Oui ». C'est tout !
Vous pouvez maintenant vous rendre sur le devant de votre site Web et tester votre nouveau curseur avant/après WordPress.
FAQ sur le curseur photo avant/après
Puis-je ajouter plusieurs curseurs avant/après sur une seule page dans WordPress ?
Oui. Le bloc Basculement Avant/Après de SeedProd peut être ajouté n'importe où dans votre mise en page, vous pouvez donc placer plusieurs curseurs sur une seule page. Chaque bloc est indépendant et conserve ses propres images et paramètres.
Il n'y a aucune limite au nombre que vous pouvez utiliser, bien que plus de curseurs sur une page puissent ralentir les temps de chargement si les images ne sont pas optimisées.
Le curseur avant/après fonctionne-t-il sur les appareils mobiles ?
Oui. Le bloc Basculement Avant/Après de SeedProd est entièrement réactif, le curseur fonctionne donc sur les écrans tactiles ainsi que sur les ordinateurs de bureau. Les visiteurs glissent plutôt que de faire glisser sur mobile, et l'expérience se traduit naturellement.
Pour de meilleurs résultats, utilisez des images d'au moins 800 pixels de large et conservez le curseur dans une mise en page à colonne unique sur mobile. Vous pouvez utiliser l'onglet Avancé de SeedProd pour ajuster la visibilité et l'espacement pour différentes tailles d'écran.
Comment puis-je passer le curseur de l'horizontale à la verticale dans WordPress ?
Dans les paramètres du bloc Basculement Avant/Après de SeedProd, trouvez l'option Orientation. Cliquer dessus permet de passer la direction de glissement de gauche à droite (horizontale) à haut en bas (verticale).
L'orientation verticale fonctionne bien pour les comparaisons où le changement est plus perceptible le long d'un axe vertical, comme les coupes de cheveux ou les rénovations basées sur la hauteur.
Quelle taille d'image dois-je utiliser pour un curseur avant/après ?
Les deux images doivent avoir les mêmes dimensions. Si elles ont des tailles différentes, le curseur peut s'afficher de manière incohérente. Une largeur de 800 à 1200 pixels convient à la plupart des mises en page.
Gardez les tailles de fichier sous 150 Ko chacune en enregistrant les JPEG à une qualité de 70 à 80 %. Des dimensions d'image non concordantes sont la cause la plus fréquente d'un curseur de travers ou qui saute.
Puis-je ajouter un curseur avant/après à WordPress sans plugin ?
Techniquement oui, mais cela nécessite du JavaScript et du CSS personnalisés que la plupart des propriétaires de sites WordPress ne peuvent pas écrire eux-mêmes. Vous devriez également maintenir ce code à travers chaque mise à jour de WordPress.
Un plugin comme SeedProd s'occupe de la partie technique pour vous, et l'interface glisser-déposer signifie aucun code à aucun moment du processus.
Vous avez ajouté un curseur avant/après WordPress qui montre votre travail de la manière la plus convaincante possible. Les visiteurs découvrent la transformation eux-mêmes au lieu de simplement regarder des images statiques, ce qui est exactement le but.
Merci de votre lecture ! Nous serions ravis d'entendre vos réflexions, alors n'hésitez pas à rejoindre la conversation sur YouTube, X et Facebook pour plus de conseils et de contenu utiles pour développer votre entreprise.
