Table des matières
Le Widget de comparaison d'images Master Addons vous permet de déposer un curseur avant-après gratuit dans n'importe quelle page Elementor, pas d'Elementor Pro et pas d'abonnement supplémentaire au plugin. Vous installez Master Addons, faites glisser le widget sur votre page, téléchargez deux images et les visiteurs obtiennent une poignée dragable qui s'efface entre eux.
Ce guide parcourt chaque paramètre : activer le widget, l'ajouter à une page, la règle de dimension qui déclenche presque tout le monde dès son premier essai, l'orientation, le rapport visible, le type de poignée, le style et ce qu'il faut faire lorsque le curseur se comporte mal sur mobile. Pour plus d'idées de conception avant et après une fois que la mécanique a cliqué, consultez le guide complet de vitrine avant-après.
Ce dont vous aurez besoin avant de commencer
- WordPress avec Elementor installé et actif La version gratuite d'Elementor suffit.
- Modules complémentaires principaux pour Elementor installés et actifs Le plan gratuit couvre ce widget Voir le guide d'installation si le plugin est nouveau pour vous.
- Deux images recadrées exactement aux mêmes dimensions de pixels Plus sur pourquoi dans un moment, cela compte plus que ce à quoi les gens s'attendent.
Étape 1 : Activer le widget de comparaison d'images
Master Addons est livré avec des dizaines de widgets, et tous ne se chargent pas par défaut sur chaque installation. Aller à Additions principales → Widgets dans votre tableau de bord WordPress et confirmez Comparaison d'images est allumé Si elle n'apparaît pas dans le panneau Éléments de l'Élémenteur un instant plus tard, c'est presque toujours pour cela.
Étape 2 : Ajoutez le widget à votre page
Ouvrez une page avec Elementor, recherchez Comparaison d'images dans le panneau Éléments (cherchez le badge MA violet) et faites-le glisser sur votre page Il se charge avec deux images d'espace réservé et un curseur fonctionnel, afin que vous puissiez voir la mise en page avant de toucher un seul paramètre.
Étape 3 : Téléchargez vos images avant et après
Ouvrir le Contenu tab, puis le Images section. Il a un Avant onglet et un Après onglet, et chacun a son propre champ Choisir une image, champ Étiquette et paramètre Résolution de l'image Définissez la photo avant sur l'onglet Avant, passez à Après et définissez la deuxième photo Il est facile de télécharger les deux images dans le même onglet par erreur, alors vérifiez quel onglet est actif avant de choisir une image.
Tapez une courte Étiquette sur chaque onglet si vous voulez une légende de superposition, quelque chose comme “Before” et “After,” ou “Old Design” et “Redesign.”
La règle qui déclenche tout le monde : faire correspondre les dimensions de l'image
Les deux images doivent avoir exactement les mêmes dimensions de pixels, la même largeur et la même hauteur. Si une photo est de 1 600.1 000 et l'autre de 1 200.800, le curseur étire ou recadre l'une d'elles pour l'adapter, et la comparaison semble déformée ou mal alignée au moment où quelqu'un traîne la poignée.
Corrigez cela en recadrant les deux images dans des dimensions identiques avant de les télécharger, dans n'importe quel éditeur que vous utilisez habituellement ou avec celui de WordPress éditeur d'images intégré après le téléchargement. Définir une résolution d'image fixe sur les deux onglets du widget est utile, mais cela ne fixera pas un rapport hauteur/largeur très différent entre les deux photos sources.
Étape 4 : Définissez l'orientation
Dans la section Paramètres, la bascule Orientation bascule entre une fente verticale (essuie-gauche-droite, la valeur par défaut) et une fente horizontale (essuie-goutte supérieure-basse).La verticale convient aux plans de paysage larges. Horizontal se lit généralement mieux pour les images hautes ou de portrait, puisqu'une étroite tranche gauche-droite ne montre pas assez d'une photo haute à la fois.
Étape 5 : Définissez le rapport visible et le type de poignée
Visible Ratio définit l'endroit où se trouve la poignée lorsque la page se charge, en pourcentage Ouvrez-la autour de 50 % pour une première impression neutre, ou démarrez-la plus près d'un côté si vous voulez que l'image avant ou après domine en charge.
Move Handle décide de ce qui déclenche la diapositive : glisser ou glisser, cliquer ou survoler La glisse fonctionne bien sur le bureau, où les visiteurs s'attendent à saisir et tirer. Hover se sent glissé sur une souris mais peut rater les utilisateurs tactiles qui ne planent jamais du tout, donc glisser/balayer ou cliquer est la valeur par défaut la plus sûre si une grande partie de votre trafic est mobile.
Étape 6 : Stylez le curseur
L'onglet Style couvre le style de mise en page (bordure, rayon, ombre de boîte autour de l'ensemble du widget), la poignée (couleur, taille, icône) et l'étiquette (couleur, typographie, arrière-plan et espacement par face pour la superposition de légende). Rien de tout cela ne change le fonctionnement du curseur, seulement son apparence, il est donc sécuritaire de sauter un premier passage et de revenir une fois que la mécanique est correcte.
Comportement mobile et tactile
Elementor est réactif par défaut, donc le widget se redimensionne avec la fenêtre sans configuration supplémentaire Ce qui nécessite en fait des tests sur un téléphone est le paramètre Move Handle. Faites glisser et faites glisser votre doigt fonctionnent naturellement avec un doigt, et le clic fonctionne également. Le vol stationnaire n'existe pas sur un écran tactile, donc un curseur défini sur Hover reste simplement immobile pour les visiteurs mobiles, affichant uniquement le rapport visible de départ sans aucun moyen de le déplacer.
Guide propre de l'élémenteur sur design réactif couvre les bases du point d'arrêt si vous devez également redimensionner le widget lui-même pour tablette ou mobile, séparément du comportement de la poignée.
Modules complémentaires principaux par rapport aux autres options de comparaison d'éléments
| Option | Coût | Contrôle d'orientation | Déclencheurs de poignée |
|---|---|---|---|
| Comparaison d'images Master Addons | Gratuit | Horizontal & vertical | Glisser/balayer, cliquer, planer |
| Comparaison d'images d'addons essentiels | Niveau gratuit disponible | Oui | Glisser |
| Diapositive de comparaison d'images avant après (WordPress.org) | Plugin gratuit et autonome | Limité | Glisser |
| Elementor Pro (natif) | Aucun widget intégré | Sans objet | Sans objet |
Elementor core, gratuit ou Pro, n'a pas de widget de comparaison d'images natif qui lui est propre Quel que soit l'itinéraire que vous empruntez, vous installez un widget tiers dans un sens ou dans l'autre, donc la comparaison honnête est entre ces widgets, pas entre un plugin et Elementor intégré à la commande
Résolution des problèmes courants
- Widget manquant dans le panneau Éléments : revérifiez les modules complémentaires principaux → Widgets et confirmez que la comparaison d'images est activée.
- Le curseur semble étiré ou asymétrique : les deux images ne sont pas aux mêmes dimensions de pixels ; recadrez-les pour qu'ils correspondent.
- La poignée ne bougera pas sur un téléphone : La poignée de déplacement est définie sur Hover ; passez-la en Glisser/Glisser ou Cliquez.
- Les étiquettes ne sont pas affichées : confirmez que la bascule Overlay dans les paramètres est activée et qu'une étiquette est réellement saisie sur les deux onglets.
Si vous aimez cette interaction glisser-révéler, le Widget de point d'accès d'image et le Widget Effets de survol d'image utilisez un modèle de survol et de clic similaire pour annoter ou animer des images.
Foire aux questions
Comment faire un curseur d'image dans Elementor ?
Installez un widget qui le prend en charge, puisque ni free ni Pro Elementor n'en expédie un nativement Le plugin gratuit Master Addons ajoute un widget de comparaison d'images que vous faites glisser sur la page, puis vous téléchargez deux images et définissez l'orientation, le ratio et le handle à partir des sections Contenu et Paramètres.
Comment ajouter un curseur d'image dans WordPress ?
Installez Elementor plus un plugin de widget comme Master Addons, puis faites glisser le widget Comparaison d'images sur n'importe quelle page Il fonctionne à l'intérieur de l'éditeur Elementor plutôt que via un écran de paramètres WordPress séparé, il n'y a donc pas de shortcode à mémoriser.
Comment faire un curseur d'image avant et après ?
Téléchargez une image avant et une image après de dimensions identiques de pixels dans les onglets Avant et Après du widget, puis choisissez l'orientation verticale ou horizontale Le widget génère le diviseur dragable automatiquement, vous ne concevez pas cette pièce vous-même.
Comment montrer avant et après dans une diapositive ?
Un curseur avant-après empile les deux images dans le même cadre avec un diviseur entre elles, de sorte qu'une diapositive remplace deux images statiques Les visiteurs font glisser ou tapent sur la poignée pour déplacer le diviseur et révéler plus d'une image ou de l'autre.
Comment modifier un curseur dans Elementor ?
Sélectionnez le widget Comparaison d'images sur le canevas et ses paramètres s'ouvrent dans le panneau de gauche L'onglet Contenu contient les images et les étiquettes, et les sections Paramètres et Style en dessous contrôlent le ratio, le comportement de la poignée et le style visuel. Modifie l'aperçu en direct sur le canevas.
Comment comparer si deux images sont identiques ?
Le widget Comparaison d'images est construit pour une révélation visuelle côte à côte plutôt que pour une différence au niveau des pixels. Si vous avez besoin que les deux images s'alignent proprement, ce dont le widget a besoin pour un résultat clair, recadrez-les sur la même largeur et la même hauteur avant de télécharger plutôt que de compter sur le widget pour détecter une inadéquation.
Comment faire une photo avant et après ?
Tirez ou exportez à la fois la version avant et après à la même résolution et au même cadrage, recadrez-les pour qu'ils correspondent s'ils ne s'alignent pas, puis téléchargez les deux dans un widget de comparaison comme Master Addons Image Comparison La correspondance du cadrage compte plus que la correspondance des paramètres de la caméra pour un résultat convaincant.
Lecture Connexe
