Comparaison d'images
Une image vaut mille mots, mais une comparaison n'a pas de prix L'élément Comparaison d'images vous permet de présenter des changements, des mises à niveau ou des différences avec un curseur interactif Placez deux images côte à côte et laissez les visiteurs glisser une poignée pour révéler les “after” sur les “before.” Parfait pour les rénovations, les résultats de fitness, les relookings de produits ou toute histoire visuelle de progrès Avec un contrôle total sur la poignée, les étiquettes et la superposition, vous pouvez créer une comparaison convaincante et professionnelle qui engage et convainc en quelques secondes.
Curseur interactif de glisser-révéler
La magie est dans l'interaction Téléchargez vos images “Before” et “After”, puis définissez l'affichage initial Visible Ratio (comme à 50 %) à partir des deux également Les utilisateurs peuvent cliquer et faire glisser la poignée pour glisser entre les deux images, leur donnant un contrôle direct sur la révélation Choisissez l'orientation (horizontale ou verticale) et définissez l'interaction sur Glisser la souris ou glisser le toucher C'est une façon immersive de démontrer le changement.
- Contrôle intuitif : les utilisateurs font glisser une poignée pour comparer de manière interactive les deux images.
- Orientation flexible : créez des curseurs de comparaison horizontaux (gauche/droite) ou verticaux (haut/bas).
- Point de départ réglable : définissez la répartition initiale (par exemple, 30 % avant, 70 % après) pour mettre en évidence le résultat.
Surcouche personnalisable et étiquettes claires
Assurez-vous que les spectateurs comprennent ce qu'ils voient Activer le Overlay pour afficher les étiquettes“Before” et “After” directement sur les imagesCommez entièrement ces étiquettes : changez le texte, la typographie, les couleurs et l'arrière-plan Vous pouvez même utiliser un dégradé pour le surcouche Stylez les états Normal et Hover séparément, et contrôlez le rembourrage, les marges et les bordures du overlay pour un look poli et intégré.
- Texte d'étiquette personnalisé : modifiez “Before/After” en quelque chose comme“Old/New,” “Original/Enhanced,” etc.
- Fond de superposition élégant : utilisez des couleurs unies, des dégradés ou même des images pour les arrière-plans des étiquettes.
- Contexte visuel clair : assurez-vous que les téléspectateurs ne se demandent jamais quelle image est laquelle.
Style professionnel de poignée et de conteneur
Le curseur doit ressembler à une partie de votre design, pas à un outil générique Personnalisez entièrement la poignée : changez sa couleur et sa taille de barre, stylisez la boîte de drag avec des icônes, des couleurs et des arrière-plans, et ajoutez Box Shadow et Border Radius. Ensuite, stylisez le conteneur principal (Layout Style) avec des bordures, un rembourrage, et des ombres Chaque élément de la poignée au conteneur peut être adapté à votre marque.
- Conception de la poignée de traînée : stylisez la barre coulissante et la boîte à dragons avec des icônes, des couleurs et des effets de vol stationnaire.
- Vernis à conteneurs : ajoutez des bordures, des ombres et un espacement au widget afin qu'il s'intègre parfaitement dans votre disposition.
- Touch réactif : La poignée est conçue pour être facile à saisir et à faire glisser sur les appareils de bureau et à écran tactile.
Foire aux questions pour la comparaison d'images
Puis-je utiliser cela pour comparer plus de deux images ?
Non, cet élément est spécifiquement conçu pour une comparaison directe, côte à côte, de deux images C'est parfait pour les scénarios avant/après Pour mettre en valeur plusieurs images ou états, pensez plutôt à utiliser un Gallery Slider ou un Image Carousel.
Comment cela fonctionne-t-il sur les téléphones mobiles ?
Parfaitement ! le curseur est entièrement tactile Les utilisateurs peuvent glisser vers la gauche/droite (ou vers le haut/vers le bas) pour déplacer la poignée L'élément est réactif, et vous pouvez ajuster les paramètres comme la taille de l'étiquette et la taille de la poignée pour mobile dans le mode d'édition réactif d'Elementor.
Puis-je changer le texte sur les étiquettes ?
Absolument. Vous pouvez modifier les“ par défaut Before” et “After” text en tout ce que vous voulez directement dans les paramètres Contenu Cela vous permet de personnaliser les étiquettes pour n'importe quel scénario, comme “Day/Night,” “Without/With,” ou “Product A/Product B.”
Quelle est la meilleure utilisation pour l'orientation verticale ?
Les curseurs verticaux sont parfaits pour comparer des images hautes, comme des portraits en pied, des façades de bâtiments ou toute transformation de” “top vs bottom C'est aussi un choix visuel unique qui peut faire ressortir votre comparaison sur une page de contenu horizontal.
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 démarrer le curseur avec l'image « Après » principalement cachée ?
Oui, utilisez le paramètre Visible Ratio Si vous le réglez à 90 %, l'image “Before” occupera 90 % de l'espace, cachant la majeure partie de l'image “After” jusqu'à ce que l'utilisateur fasse glisser la poignée C'est idéal pour créer une révélation surprise.
Widgets et extensions d'éléments tendance
Construisez des sites Web sophistiqués en moins de temps.
Glassmorphisme
Extras de conteneurs
Modèles
Duplicateur de messages/pages
