Élémenteur avant après l'image Slider : Widget de comparaison gratuit
Comparaison d'images est un widget gratuit de Master Addons qui empile une image avant et une image après dans un cadre avec une poignée entre eux Les visiteurs glissent ou glissent la poignée pour révéler le changement Ajouter une étiquette de chaque côté, choisissez Horizontal (gauche et droite) ou Vertical (haut et bas), définissez où commence la poignée, et stylisez la poignée, les étiquettes et la superposition Ni Elementor libre ni Elementor Pro n'a de curseur avant et après, donc ce widget remplit cet espace sur Elementor libre.
Comment ajouter un curseur avant après dans Elementor
Vous avez besoin d'Elementor et du plugin gratuit Master Addons de WordPress.org.
- Vérifiez que la comparaison d'images est activée ci-dessous Additions maîtresses, widgets.
- Dans l'éditeur Elementor, recherchez Comparaison d'images et faites-le glisser sur la page.
- Dans l'onglet Avant, choisissez la première image et l'étiquette, puis faites de même dans l'onglet Après.
- Dans Paramètres, définissez le rapport visible et choisissez Horizontal ou Vertical.
- Gardez Move Handle sur Mouse Drag/Swipe pour les téléphones, ou utilisez une option Pro sur les pages axées sur le bureau.
- Stylez la poignée et les étiquettes dans l'onglet Style, puis testez le curseur sur un téléphone.
Pour des conseils et des exemples de conception, lisez le guide de curseur avant et après. Chaque paramètre est répertorié dans le Paramètres du widget de comparaison d'images.
Faites glisser et faites glisser avant après le curseur
Téléchargez le Avant et Après images, chacune avec sa propre résolution d'étiquettes et d'images. Dans Paramètres, Rapport visible (%) définit où commence la poignée, Orientation est horizontal (la valeur par défaut) ou vertical, et Surcouche affiche ou masque les étiquettes. Déplacer la poignée est-ce que Mouse Drag/Swipe dans le plugin gratuit Master Addons Pro ajoute Mouse Move, où la poignée suit le curseur, et Mouse Click.
- Travail glisser-balayer sur les écrans de bureau et tactiles.
- Démarrez la poignée décentrée pour mettre en évidence le résultat.
- Utilisez des images avec les mêmes dimensions de pixels pour que les deux côtés s'alignent.
Surcouche personnalisable et étiquettes claires
Allumez Surcouche pour afficher les étiquettes Avant et Après sur les images La section de style Overlay a des arrière-plans Normal et Hover Étiquette styles de section chaque côté séparément avec couleur, typographie, bordure, rayon de bordure, marge et remplissage, afin que vous puissiez changer “Before” et “After” en “Old” et “New” ou tout autre mot.
- Texte d'étiquette personnalisé dans n'importe quelle langue.
- Styles séparés pour les étiquettes avant et après.
- Un arrière-plan de superposition différent en vol stationnaire.
Style professionnel de poignée et de conteneur
Le Poignée la section définit la couleur et la taille de la barre de poignée, la largeur et la hauteur de la boîte de poignée, ainsi que la couleur des icônes, la bordure et le rayon de la bordure pour Normal et Hover. Style de mise en page ajoute une bordure, un rembourrage et une marge autour de l'ensemble du curseur Le rayon de bordure et l'ombre de boîte sur le conteneur sont des options Master Addons Pro.
- Faites correspondre la couleur de la poignée à votre marque.
- Une barre fine avec une boîte à poignée ronde pour un look épuré.
- Coins arrondis et une ombre sur le conteneur avec Pro.
Comparaison d'images : Gratuit vs Pro
Elementor n'a pas de widget avant et après dans son plugin gratuit ou Pro. Voici ce que le widget gratuit Master Addons inclut et ce que Pro ajoute.
| Caractéristique | Gratuit | Maître Addons Pro |
|---|---|---|
| Images avant et après avec étiquettes | Oui | Oui |
| Orientation horizontale et verticale | Oui | Oui |
| Point de départ du ratio visible | Oui | Oui |
| Poignée de glisser/balayer la souris | Oui | Oui |
| Poignées de déplacement de souris et de clic de souris | Non | Oui |
| Style de poignée, d'étiquette et de superposition | Oui | Oui |
| Rayon de bordure du conteneur et ombre de boîte | Non | Oui |
Pour la plupart des curseurs avant et après la version gratuite est suffisante Pro a du sens lorsque vous voulez que la poignée suive le curseur ou besoin de coins arrondis et d'une ombre sans CSS personnalisé Pour épingler des notes sur une image à la place, voir Point d'accès de l'image (Pro).
Foire aux questions pour la comparaison d'images
Le widget Comparaison d'images est-il gratuit ?
Oui. Le widget est gratuit avec glisser-glisser, étiquettes, orientations et style de poignée. Master Addons Pro ajoute les poignées Mouse Move et Mouse Click ainsi que le rayon de la bordure du conteneur et l'ombre de la boîte.
Ça marche sur les téléphones ?
Oui, avec la poignée gratuite Mouse Drag/Swipe Les visiteurs glissent pour déplacer le diviseur L'option Pro Mouse Move repose sur le vol stationnaire, elle ne fonctionne donc pas sur les écrans tactiles.
Elementor a-t-il un curseur avant et après ?
Non. Ni Elementor gratuit ni Elementor Pro n'incluent de comparaison d'images ou de widget avant et après, vous avez donc besoin d'un addon tel que celui-ci.
Quand dois-je utiliser l'orientation Verticale ?
Utilisez Vertical pour les images hautes, telles que les portraits en pied, les façades des bâtiments ou les longues captures d'écran L'image avant se trouve sur le dessus et l'image après en dessous, avec une poignée haut et bas.
L'utilisation de deux images haute résolution va-t-elle ralentir ma page ?
Il peut, si les images sont très grandes Utilisez le paramètre Résolution de l'image à bon escient (par exemple, “Large” au lieu de 'Full') et optimisez toujours vos images pour le web avant de télécharger L'élément lui-même est léger, mais la taille du fichier image est le principal facteur de performance.
Puis-je comparer plus de deux images ?
N° Chaque widget compare deux images Pour plus de paires, ajoutez un widget par paire ou affichez plusieurs images dans le Carrousel d'images.
Widgets et extensions d'éléments tendance
Construisez des sites Web sophistiqués en moins de temps.
Glassmorphisme
Extras de conteneurs
Modèles
![Modules principaux Extension de duplicateur de messages/pages pour le lien de ligne Elementor : MA Duplicator dans la liste des pages WordPress créant une ébauche de page de destination - [Dupliqué n° 128]](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Duplicateur de messages/pages
