Une différence visible en un regard
Le visiteur voit directement l’avant et l’après, sans effort de comparaison, ce qui rend le résultat plus clair et plus convaincant.
Des widgets pour un site professionnel Au service de votre activité
Prêts à l’emploi • Simples à intégrer • Faciles à personnaliser
Plugin WordPress avant/après
Plugin WordPress avant/après pour comparer deux images
Montrez une transformation, une rénovation ou un résultat directement sur une page WordPress, avec un outil configurable en ligne et un code d’intégration simple à placer dans un bloc HTML personnalisé.
- Sans plugin WordPress supplémentaire
- Bloc HTML personnalisé
- Gestion en ligne
- Essai 48 h sans carte bancaire
- Sans abonnement mensuel
Besoin WordPress
Pourquoi ajouter l’outil Avant / Après dans WordPress ?
Sur une page WordPress, une transformation, une rénovation ou un résultat visuel est parfois difficile à faire comprendre avec une simple photo ou un texte descriptif. Le visiteur doit imaginer la différence, ce qui rend le résultat moins convaincant.
Installer une extension complète uniquement pour comparer deux images peut être excessif pour ce besoin précis. L’outil Avant / Après permet d’ajouter cette fonction avec un code d’intégration, sans installer une extension WordPress de plus.
Ce que l’outil apporte
Ce que l’outil Avant / Après apporte à une page WordPress
L’objectif est de rendre une transformation immédiatement lisible, sans demander au visiteur de comparer mentalement deux photos séparées.
Plusieurs façons de comparer
La comparaison peut rester simple avec un curseur, ou utiliser un autre mode d’affichage selon l’ambiance recherchée pour votre page WordPress.
Une présentation qui s’adapte à votre page
Une comparaison peut vivre seule sur la page, s’enchaîner avec d’autres exemples, ou s’intégrer dans une mise en page plus complète.
Placement conseillé
Où placer l’outil Avant / Après dans une page WordPress ?
Le bon emplacement dépend du moment où le visiteur a besoin de voir un résultat concret pour se décider.
Page de service ou de rénovation
Montrez l’état de départ et le résultat final directement sur la page qui présente votre prestation.
Page de réalisations
Rassemblez plusieurs comparaisons pour donner une vue d’ensemble de vos résultats passés.
Avant une demande de devis
Placez la comparaison juste avant le formulaire de contact pour renforcer la décision du visiteur.
Fin de page, pour lever un dernier doute
Une comparaison en fin de page peut convaincre un visiteur encore hésitant avant qu’il ne quitte le site.
Cas d’usage
Des exemples concrets pour un site WordPress
Ces exemples s’adressent aux indépendants, artisans et petites entreprises qui veulent montrer un résultat plutôt que le décrire.
Artisan du bâtiment ou de la rénovation
Montrez une pièce avant travaux et son état final pour rendre votre savoir-faire immédiatement visible.
Paysagiste ou entretien extérieur
Comparez un extérieur avant et après intervention pour donner envie de vous contacter.
Institut de beauté ou service à la personne
Présentez une transformation esthétique pour aider le visiteur à se projeter avant une prise de rendez-vous.
Mise en place
Comment intégrer l’outil Avant / Après dans WordPress ?
L’intégration reste volontairement simple : vous préparez l’outil côté Scripts HTML, puis vous ajoutez son code dans une zone WordPress qui accepte du HTML personnalisé.
- Configurez votre comparaison depuis Scripts HTML : images avant/après, mode d’affichage et réglages visuels.
- Vérifiez le rendu avec les aperçus mobile, tablette et ordinateur avant de continuer.
- Copiez le code d’intégration fourni par Scripts HTML.
- Dans WordPress, ouvrez la page concernée et ajoutez une zone compatible HTML personnalisé.
- Collez le code, puis publiez ou mettez à jour la page.
- Pour modifier la comparaison plus tard, ajustez vos réglages depuis Scripts HTML, sans reconstruire toute votre page WordPress.
Compatibilité WordPress
Avec quels éditeurs WordPress ?
L’outil peut être intégré dans les zones WordPress qui acceptent du code HTML personnalisé.
Éditeur de blocs WordPress
Avec l’éditeur de blocs WordPress, utilisez un bloc HTML personnalisé à l’endroit où vous voulez afficher la comparaison.
Elementor
Avec Elementor, l’intégration se fait généralement via un widget HTML placé dans la section souhaitée.
Divi et autres constructeurs
Avec Divi ou un autre constructeur, utilisez un module Code ou une zone équivalente acceptant du HTML personnalisé.
Choix utile
Quand utiliser l’outil Avant / Après, et quand éviter ?
L’outil Avant / Après est pertinent quand une transformation visuelle peut convaincre plus qu’un long texte descriptif.
Cet outil est utile si
- Vous avez de vraies photos avant et après à présenter.
- Vous voulez renforcer la confiance avant une demande de devis ou une prise de contact.
- Vous cherchez une fonction précise à intégrer dans WordPress sans ajouter une extension complète.
- Vous voulez pouvoir modifier vos comparaisons plus tard sans repartir de zéro.
Il est moins adapté si
- Vous n’avez pas encore de photos avant/après suffisamment claires pour convaincre.
- Votre page WordPress ou votre thème ne permet pas d’ajouter une zone HTML personnalisée.
- Vous cherchez un outil de retouche d’image plutôt qu’un outil de comparaison visuelle.
Pourquoi Scripts HTML
Pourquoi passer par Scripts HTML ?
Scripts HTML est utile quand vous voulez ajouter une fonction ciblée à votre page WordPress sans transformer votre site en collection d’extensions.
- Pas d’extension WordPress supplémentaire à installer.
- Configuration gérée en ligne depuis Scripts HTML.
- Code d’intégration à placer dans une zone compatible HTML.
- Essai 48 h sans carte bancaire.
- Sans abonnement mensuel.
- Assistance si besoin.
Questions fréquentes
Questions fréquentes sur l’outil Avant / Après pour WordPress
Voici les réponses aux questions les plus utiles avant d’ajouter cet outil sur une page WordPress.
Puis-je ajouter ce comparateur dans WordPress sans plugin ?
Oui. Si votre page WordPress accepte une zone HTML personnalisée, vous pouvez y placer le code d’intégration fourni par Scripts HTML, sans installer une extension WordPress supplémentaire.
Où coller le code dans WordPress ?
Dans l’éditeur de blocs, utilisez un bloc HTML personnalisé. Avec un constructeur de page, utilisez la zone équivalente : widget HTML, module Code ou bloc prévu pour du code personnalisé.
Est-ce compatible avec Elementor ?
Oui, lorsque la page permet d’ajouter un widget HTML. Il reste conseillé de vérifier le rendu selon la largeur de la section et les réglages de votre thème.
Est-ce compatible avec Divi ?
Oui, si vous utilisez un module Code ou une zone équivalente acceptant du HTML personnalisé. Comme toujours, un contrôle visuel après publication reste conseillé.
Puis-je modifier la comparaison après l’avoir intégrée ?
Oui. Le code est placé une fois dans WordPress, puis vous gérez les images, le mode d’affichage et les réglages depuis l’espace Scripts HTML.
Est-ce que l’outil s’adapte au mobile ?
Oui, l’outil est pensé pour rester lisible sur mobile, tablette et ordinateur. Il reste conseillé de vérifier le rendu sur votre propre page WordPress.
Puis-je afficher plusieurs comparaisons sur la même page ?
Oui. Vous pouvez présenter une comparaison seule, plusieurs comparaisons à la suite, ou les intégrer dans une mise en page plus complète.
Que faire si l’affichage dépend de mon thème WordPress ?
Commencez par tester l’intégration sur une page simple. Si le thème ou un constructeur modifie l’affichage, l’assistance peut vous aider à identifier le point à corriger.
Prêt à tester sur WordPress ?
Montrez vos résultats en un coup d’œil sur votre page WordPress
L’outil Avant / Après aide vos visiteurs à voir une transformation avant de vous contacter. Une fonction ciblée, à intégrer sans installer une extension WordPress complète pour ce seul besoin.