Image avancée
Une image sur votre site Web devrait faire plus que simplement rester là L'élément Image avancée suralimente l'image de base avec des fonctionnalités intelligentes et interactives Créez des effets de survol de la branche avant et après le” accrocheurs, ajoutez des rubans de “NEW” ou de “SALE, des rubans de « “SALE” » élégants, appliquez des effets d'inclinaison dynamiques sur le mouvement de la souris et ajoutez même des ombres colorées Avec un contrôle total sur les boîtes à lumière, les liens et tous les aspects du style, vous pouvez transformer n'importe quelle image en un élément de contenu engageant qui guide les visiteurs et stimule l'interaction parfaite pour les vitrines de produits, les portfolios ou les bannières en vedette.
Image de survol et effets intelligents
Créez des comparaisons instantanées de type “avant-après” ou de simples révélations de survol Téléchargez votre image principale, puis activez Hover Image pour télécharger une deuxième image Lorsque les visiteurs planent, l'image bascule de manière transparente Ajoutez une couche de sophistication avec l'effet d'inclinaison, qui fait basculer légèrement l'image lorsque la souris se déplace dessus, ajoutant une sensation subtile en 3 D. Pour plus de profondeur, permettez à Colorized Shadow de placer une ombre douce et colorée derrière l'image, la faisant ressortir de la page.
- Comparaisons interactives : parfait pour montrer un produit avant et après, ou une vue jour/nuit d'une propriété.
- Effet d'inclinaison engageant : ajoute une couche moderne et interactive qui répond au mouvement du curseur.
- Profondeur visuelle : utilisez l'ombre colorisée pour créer une séparation et une mise au point sans éléments de conception supplémentaires.
Rubans et étiquettes personnalisables
Faites ressortir vos images avec des rubans professionnels Activez la fonction Ruban pour ajouter une étiquette comme“NEW DESIGN,” “BESTSELLER,” ou “SOLD OUT.” Choisissez parmi différents Styles de Ruban (comme Coin ou Croix ou Simple) et définissez la Position (Haut/Bas, Gauche/Droite).Customisez entièrement les couleurs, la typographie et l'épaisseur du ruban pour vous assurer qu'il complète parfaitement votre image et votre marque.
- Mettre en surbrillance les informations clés : communiquez instantanément l'état, la promotion ou la catégorie directement sur l'image.
- Positionnement flexible : placez le ruban dans n'importe quel coin pour éviter de couvrir des parties importantes de l'image.
- Contrôle complet du style : faites correspondre l'arrière-plan, la couleur du texte et la police du ruban à la langue de conception de votre site.
Ajouter l'intégration de Link & Lightbox
Chaque image peut être une passerelle Liez votre image directement à une URL, comme une page produit ou votre plan de tarification Alternativement, activez une Lightbox pour permettre aux spectateurs de se concentrer sur l'image dans une belle fenêtre contextuelle plein écran Choisissez parmi différentes icônes de la lightbox (comme un bouton plus) et contrôlez son alignement Pour les performances, utilisez l'option Précharger l'image pour assurer un chargement rapide, en particulier pour les effets de survol.
- Appels directs à l'action : reliez les images aux pages importantes, transformant ainsi l'intérêt visuel en trafic direct.
- Expérience de galerie améliorée : laissez les utilisateurs visualiser les images en détail avec une boîte à lumière élégante.
- Performances optimisées : préchargez les images de survol pour éviter un retard ou un” de “flash lors de la première interaction.
Contrôle détaillé du style et de la taille
Obtenez un contrôle complet de la conception sur la présentation de votre image Définissez la largeur maximale exacte et la hauteur maximale Appliquez le rayon de bordure individuellement à chaque coin pour des formes uniques Stylez les états Normal et Hover séparément avec les bordures, les arrière-plans et les ombres de boîte Cela garantit que votre image semble parfaite dans chaque contexte et lors de chaque interaction.
- Dimensionnement réactif : Contrôlez les dimensions de l'image avec précision sans compter sur un dimensionnement automatique imprévisible.
- Formes personnalisées : créez des images circulaires, des rectangles arrondis ou des bordures asymétriques uniques.
- Style spécifique à l'état : ajoutez une bordure ou une ombre uniquement sur le vol stationnaire pour indiquer visuellement que l'image est interactive.
Questions fréquemment posées pour une image avancée
L'effet Hover Image est-il compatible avec les écrans tactiles mobiles ?
Oui, mais ça marche un peu différemment Sur les appareils tactiles, le premier tap va souvent déclencher l'effet de survol (échange de l'image), si vous n'avez pas activé la lightbox Mais si vous avez activé la lightbox alors lightbox va obtenir plus de priorité et sur tap la première image va s'ouvrir dans lightbox.
L'utilisation de l'effet d'inclinaison et de l'ombre colorisée ralentira-t-elle ma page ?
Ces effets utilisent le CSS, qui est généralement léger Cependant, les utiliser sur un très grand nombre d'images sur une seule page (comme dans une grille dense et plus de 100 images) pourrait contribuer à une charge plus lourde sur l'appareil de l'utilisateur. Utilisez-les sélectivement sur les images clés pour les meilleures performances et impact.
En quoi est-ce différent du widget Image de base d'Elementor ?
Le widget de base d'Elementor vous permet d'ajouter une image, un lien, une légende et un style simple L'élément Advanced Image ajoute une suite de fonctionnalités professionnelles : Hover Image swap, Ribbons/Labels, Tilt Effect, Colorized Shadow, un style d'état Normal/Hover séparé et des commandes de lightbox plus granulaires Il est conçu pour créer des présentations d'images plus engageantes et interactives.
Puis-je utiliser la fonction ruban sans image de vol stationnaire ou autres effets ?
Absolument ! chaque fonctionnalité est indépendante Vous pouvez avoir juste une image avec un ruban, ou juste une image avec un effet d'inclinaison Vous pouvez mélanger et assortir les fonctionnalités comme vous le souhaitez Activer uniquement celles dont vous avez besoin pour votre objectif de conception spécifique.
Quelle est la meilleure utilisation pour le paramètre 'Preload Image' ?
Activez Précharger l'image (réglé sur « On ») lorsque vous utilisez la fonction Hover Image Cela oblige le navigateur à charger la deuxième image lorsque la page se charge, même si elle est masquée Cela évite un retard notable ou un flash vide la première fois qu'un utilisateur survole l'image, assurant ainsi une expérience utilisateur fluide.
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
