Le widget d'image Elementor par défaut affiche une image et la relie quelque part Le gratuit Widget d'image avancé dans Modules complémentaires principaux pour Elementor en fait plus : il passe à une deuxième image en vol stationnaire, laisse tomber un ruban d'angle sur le dessus, s'ouvre dans une boîte à lumière et ajoute une inclinaison 3 D ou une ombre colorisée, le tout sans toucher CSS.
Vous définissez l'image principale, une image de survol en option, un ruban et une poignée d'effets du panneau Élémenteur Cela en fait un bon ajustement pour les prises de vue de produits, les vignettes de portfolio ou toute image qui a besoin d'une étiquette ou d'un peu de mouvement Ce guide parcourt chaque onglet et paramètre.
Préférez regarder en premier ? ce court tutoriel parcourt le widget Image avancée bout à bout :
Ce que fait le widget Image avancée #
À la base, il affiche une image, mais il superpose des extras sur le dessus Une image en vol stationnaire s'interchange lorsque le curseur est dessus, un ruban appelle une étiquette comme “NEW,” et l'onglet Paramètres ajoute une boîte à lumière, un effet d'inclinaison et une ombre colorisée Tout est configuré à partir du panneau, donc la même image peut faire beaucoup plus qu'une simple.
Le widget comporte quatre onglets : Contenu pour les images et le ruban, Paramètres pour le comportement comme lightbox et tilt, Style pour le dimensionnement et les couleurs, et Avancé pour les options habituelles d'espacement et de visibilité des éléments.
Avant de commencer #
- WordPress avec Élémenteur installé et actif.
- Modules complémentaires principaux pour Elementor installé et actif. Nouveau au plugin ? voir le guide d'installation.
- Une image à afficher, et une seconde si vous souhaitez l'échange de vol stationnaire.
Comment ajouter le widget Image avancée #
Dans l'éditeur Elementor, ouvrez le Éléments panneau et recherche pour Image avancée(ou faites défiler vers la section Addons principaux) Faites-le glisser sur votre page Cela commence par un espace réservé, donc la première étape consiste à choisir une image.
Définir l'image #
Dans le Contenu tab, le Image la section contient les bases. Cliquez sur la zone d'image pour en choisir une dans la Médiathèque, définissez le Résolution d'image WordPress devrait servir et ajouter un Lien d'image si l'image doit se lier quelque part.
Ajouter une image de vol stationnaire #
Le Image de survol section est l'endroit où le widget gagne son nom Allumez Afficher l'image du survol et choisissez une deuxième image. Sur la page en direct, le widget affiche la première image et passe à la seconde lorsque quelqu'un plane, ce qui est pratique pour les devants et les dos des produits ou les prises de vue avant et après.
Ajouter un ruban #
Le Ruban section ajoute une bannière de coin sur l'image Allumez Présentoir Ruban(en), définissez le texte, et choisissez à quoi il ressemble.
- Texte: le label, comme NEW ou SALE.
- Style de ruban : Simple, d'angle ou de croix.
- Position du ruban : placez-le dans n'importe quel coin, comme en haut à droite ou en bas à gauche.
- Épaisseur et largeur du ruban : taillez la bande pour l'adapter au texte.
Paramètres : lightbox, tilt et shadow #
Le Paramètres tab est l'endroit où le comportement vit Ce sont les extras qui distinguent le widget d'une image simple.
- Ouvrir dans la lightbox : cliquez sur l'image pour l'ouvrir en taille réelle dans une fenêtre contextuelle. L'activer ajoute une option de bouton emblématique (comme une icône plus) sur l'image.
- Alignement : gauche, centre ou droite dans son bloc.
- Précharger l'image : affiche un espace réservé pendant que l'image se charge, comme un aperçu flou, une animation de boîte de progression ou un spinner de chargement.
- Effet d'inclinaison : ajoute une inclinaison 3 D qui suit le curseur pour un peu de mouvement.
- Ombre colorée : laisse tomber une ombre teintée des couleurs propres de l'image Notez qu'elle n'est pas disponible pendant que l'image du vol stationnaire est active.
Style l'image et le ruban #
Le Style tab handles taille et couleurs. Le Image la section définit l'apparence de l'image elle-même.
- Largeur maximale et hauteur maximale : cap la taille de l'image.
- Rayon frontalier : arrondir les coins.
- États normaux et en vol stationnaire : définissez l'ombre de la boîte, la bordure et l'arrière-plan séparément pour vous reposer et planer.
Le Ruban la section style contrôle le look de la bannière : couleur d'arrière-plan, couleur du texte, typographie, ombres, décalages de position et rayon de bordure.
Le résultat sur la page #
Publiez ou prévisualisez et l'image se rend avec votre ruban en place et les effets en direct : passez la souris pour échanger des images, passez la souris pour l'inclinaison ou cliquez pour ouvrir la boîte à lumière, en fonction de ce que vous avez allumé.
Cas d'utilisation courants #
- Prises de produits avec un échange de vol stationnaire d'avant en arrière ou un angle alternatif.
- Vignettes portefeuille cette pleine taille ouverte dans la lightbox.
- Images promotionnelles avec un ruban NOUVEAU ou VENTE dans le coin.
- Graphiques caractéristiques avec une inclinaison subtile pour le mouvement.
- Images héros utilisation de l'ombre colorisée pour la profondeur.
Conseils pour travailler avec le widget Advanced Image #
- Utilisez des dimensions correspondantes pour l’échange de vol stationnaire. Les images de même taille empêchent le fondu enchaîné de sauter.
- Choisissez la bonne résolution d'image. Servir un fichier pleine grandeur dans un petit emplacement ralentit la page ; une taille moyenne ou grande suffit généralement.
- Gardez le texte du ruban court. Un mot correspond proprement à la bande d’angle.
- Sautez l'ombre colorisée lorsque vous utilisez l'échange de vol stationnaire. Les deux ne courent pas ensemble, alors choisissez-en un par image.
- Allez-y doucement en inclinaison. Un peu de mouvement attire l'œil ; trop de choses semblent fantaisistes.
Foire aux questions #
Qu'est-ce que le widget Image avancée dans Master Addons ?
Il s'agit d'un widget d'image Elementor avec des extras intégrés : un échange d'image en vol stationnaire, un ruban de coin, une boîte à lumière, un effet d'inclinaison 3 D et une ombre colorisée Vous définissez tout cela à partir du panneau Elementor, de sorte qu'une seule image peut faire bien plus que ce que le widget d'image par défaut permet.
Comment faire changer l'image en vol stationnaire ?
Ouvrez l'onglet Contenu, développez la section Image de survol et activez Affichage Image de survol Puis choisissez une deuxième image Sur la page en direct le widget affiche la première image et passe à la seconde lorsqu'un visiteur la survole.
Puis-je ajouter un ruban ou un badge à l'image ?
Oui. Dans l'onglet Contenu, ouvrez la section Ruban et activez Affichage Ruban. Définissez le texte, choisissez un style Simple, Corner ou Cross et choisissez le coin. L'onglet Style vous permet ensuite de définir sa couleur, sa typographie et sa position.
Quel est l'effet d'inclinaison ?
L'effet d'inclinaison, trouvé dans l'onglet Paramètres, ajoute une inclinaison 3 D qui suit le curseur lorsqu'il se déplace sur l'image Il donne à une image plate une impression de profondeur et de mouvement Utilisez-le avec parcimonie pour qu'il reste subtil plutôt que distrayant.
Le widget Image avancée prend-il en charge une lightbox ?
Oui. Activez Ouvrir dans la lightbox dans l'onglet Paramètres et les visiteurs peuvent cliquer sur l'image pour la visualiser en taille réelle dans une fenêtre contextuelle. Vous pouvez également ajouter un bouton emblématique, tel qu'une icône plus, qui apparaît sur l'image pour signaler qu'elle est cliquable.
Envelopper #
Le widget Image avancée prend une seule image et ajoute les touches qui prennent habituellement du code personnalisé : un swap de vol stationnaire, un ruban, une boîte à lumière, une inclinaison et une ombre colorisée Définissez les images, activez les effets souhaités et stylisez le résultat du panneau. Pour plus d'outils d'image, consultez le Effets de survol d'image et Carrousel d'images widgets, parcourez l'intégralité Widgets et extensions Master Addons& voir le Page de widget Image avancée pour démos.
