Widget d'image d'élémenteur gratuit avec Hover Swap, ruban et inclinaison
Advanced Image est un widget gratuit Master Addons qui ajoute des extras à une seule image Swap à une deuxième image en vol stationnaire, placez un ruban Simple, Corner ou Cross dans n'importe quel coin, ouvrez l'image dans une lightbox avec un bouton plus en option, et ajoutez un effet d'inclinaison qui suit le curseur ou une ombre colorisée Pendant que l'image se charge, vous pouvez afficher un espace réservé flou ou un spinner Style normal et états de vol stationnaire avec bordure, arrière-plan et ombre de boîte.
Comment ajouter un Hover Image Swap dans Elementor
Vous avez besoin d'Elementor et du plugin gratuit Master Addons de WordPress.org.
- Vérifiez que Advanced Image est activé sous Additions maîtresses, widgets.
- Dans l'éditeur Elementor, recherchez Image avancée et faites-le glisser sur la page.
- Choisissez l'image principale et un lien image si nécessaire.
- Allumez Afficher l'image du survol et choisissez la deuxième image, idéalement de la même taille.
- Ajoutez un ruban, une boîte à lumière, une inclinaison ou une ombre colorisée des sections Contenu et paramètres L'ombre colorisée ne fonctionne pas avec l'image du survol.
- Stylez les états Normal et Hover dans l'onglet Style.
Chaque paramètre est couvert dans le Paramètres avancés du widget Image.
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
Ajouter un Lien d'image pour envoyer des visiteurs à un produit ou une page, ou allumer Ouvrir dans lightbox donc un clic montre l'image en taille réelle Le Bouton emblématique option ajoute une icône plus sur l'image Allumez Précharger l'image pour afficher un espace réservé pendant que l'image se charge : un aperçu flou, une boîte de progression ou une fileuse bleue, claire ou sombre.
- Lien vers une page produit ou ouvrir une lightbox pleine grandeur.
- Alignement gauche, central ou droit dans sa colonne.
- Un espace réservé de chargement pour les grandes images.
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.
Le widget Image avancée est-il gratuit ?
Oui. Advanced Image fait partie du plugin gratuit Master Addons avec l'image de vol stationnaire, les rubans, la boîte à lumière, l'inclinaison, l'ombre colorisée et toutes les options de style.
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.
Que fait le paramètre Précharger l'image ?
L'image de préchargement montre un espace réservé pendant que l'image se charge, de sorte que les visiteurs ne voient pas d'espace vide Choisissez Blank, une image d'espace réservé floue, une animation de boîte en cours ou une vrille de chargement bleue, claire ou sombre. C'est le plus utile pour les grandes 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
