Certaines images ont besoin d'un peu d'explication, comme une prise de vue d'un produit, un plan d'étage ou une carte. Le Point d'accès de l'image widget dans Modules complémentaires principaux pour Elementor épingle les marqueurs cliquables n'importe où sur une image, et chacun affiche une infobulle avec du texte ou un lien lorsqu'un visiteur la survole ou la touche.
Vous chargez une image, déposez les points d'accès là où vous le souhaitez, ajoutez le texte de l'info-bulle, puis stylisez les marqueurs et définissez le comportement des info-bulles Ce guide couvre chaque paramètre du widget.
Ce que fait le widget Image Hotspot #
Le widget met des marqueurs au-dessus d'une seule image Chaque point d'accès a sa propre position, son icône et son infobulle, de sorte que vous pouvez étiqueter des parties d'une photo ou les lier à d'autres pages de survol ou cliquer sur un marqueur et son infobulle apparaît à côté.
Trois onglets l'exécutent. Contenu contient l'image, les points chauds et le comportement de la pointe de l'outil. Style gère l'image, les couleurs du marqueur et le look tooltip. Avancé est l'espacement et la visibilité habituels 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, et les étiquettes ou liens que vous souhaitez que chaque hotspot soit affiché.
Comment ajouter le widget Image Hotspot #
Dans l'éditeur Elementor, ouvrez le Éléments panneau et recherche pour Point d'accès de l'image(ou faites défiler vers la section Addons principaux) (les widgets portent un badge MA violet).Drag it on the page and it loads with a sample image and markers you can edit.
Choisir l'image #
Ouvrir le Contenu onglet. Le Image la section est l'endroit où vous chargez l'image de base sur laquelle se trouvent les points chauds.
- Choisissez l'image : choisissez la photo dans la médiathèque.
- Résolution de l'image : la taille servie, comme Large ou Full.
- Alignement : gauche, centre ou droite dans sa colonne.
Ajouter des points d'accès #
Ouvrir le Points chauds section. C'est un répéteur, donc chaque marqueur est son propre élément Utilisez Ajouter un élément pour ajouter des marqueurs et les faire glisser en place sur l'image.
- Ajouter un élément : ajoutez autant de points d'accès que l'image en a besoin.
- Désactivez l’effet d’impulsion : éteignez l'animation pulsée sur les marqueurs.
- Faites glisser vers la position : déplacez chaque marqueur sur l'image ou définissez les coordonnées exactes.
Configurez chaque hotspot #
Cliquez sur un point d'accès pour ouvrir ses paramètres Le Contenu tab définit le type de marqueur, son texte d'infobulle et un lien facultatif.
- Type: n'afficher rien, une icône ou une image à l'intérieur du marqueur.
- Texte et lien : une étiquette courte et une URL pour le marqueur.
- Contenu de l'info-bulle : le texte intégral affiché en vol stationnaire, modifié dans une boîte WYSIWYG.
Style chaque point d'accès #
Le Style tab sur un point d'accès définit ses couleurs Vous obtenez une couleur et un arrière-plan pour l'état normal et un ensemble séparé pour le vol stationnaire, plus un curseur d'opacité.
- Couleur et arrière-plan par défaut : le marqueur au repos.
- Couleur et arrière-plan du vol stationnaire : comment ça change en vol stationnaire.
- Opacité : à quel point le marqueur semble solide.
Contrôlez les info-bulles #
De retour dans l'onglet Contenu principal, le Boutures d'outils la section contrôle le comportement de chaque infobulle : où elle se trouve, comment elle s'anime et si elle s'ouvre en vol stationnaire ou en clic.
- Afficher la position et la flèche : de quel côté s'ouvre l'infobulle et si elle a un pointeur.
- Animation: l'effet de révélation, comme Shift-Toward.
- Déclencher sur Cliquez : ouvrez les info-bulles sur clic au lieu de planer, mieux pour toucher.
Stylez l'image et les info-bulles #
Ouvrir le Style onglet sur le widget. Le Image la section définit l'opacité, la bordure et les filtres de l'image, et les sépare Points chauds et Boutures d'outils les sections stylisent les marqueurs et les boîtes à info-bulles.
- Image: filtres d'opacité, de rayon de bordure, d'ombre de boîte et CSS.
- Points chauds : taille et couleur globales pour les marqueurs.
- Conseils d'outils : l'arrière-plan de l'infobulle, la couleur du texte et la typographie.
Cas d'utilisation courants #
- Images de produits épingler des fonctionnalités ou des spécifications sur des parties de la photo.
- Cartes et plans d'étage marquage des pièces, des stands ou des emplacements.
- Infographie ajout de détails sans encombrer l'image.
- Photos d'équipe ou de bureau étiquetage des personnes ou des zones.
- Tutoriels pointage des marches ou des pièces sur une capture d'écran.
Conseils pour travailler avec le widget Image Hotspot #
- Gardez les points d'accès lisibles. Espacez-les afin que les marqueurs et les info-bulles ne se chevauchent pas sur des écrans plus petits.
- Utiliser cliquer sur mobile. Activez Déclencher sur Cliquez pour que les utilisateurs de touch puissent ouvrir les info-bulles, puisqu'il n'y a pas de survol sur un téléphone.
- Contrastez les marqueurs. Choisissez une couleur de marqueur qui se démarque de l'image derrière, ou une photo occupée l'avalera.
- Gardez le texte de l'infobulle court. Une ligne ou deux se lit mieux qu'un paragraphe fourré dans une boîte flottante.
- Définir les positions exactes. Utilisez l'onglet Position pour un placement précis au lieu de regarder la traînée.
Voir le tutoriel vidéo #
Préférez suivre à l'écran ? le didacticiel vidéo ci-dessous parcourt l'élément Image Hotspot du début à la fin, montrant comment l'image, les points chauds, les info-bulles et le style fonctionnent dans l'éditeur Elementor.
Foire aux questions #
Qu'est-ce que le widget Image Hotspot dans Master Addons ?
C'est un widget Elementor qui épingle des marqueurs interactifs sur une image Chaque hotspot a sa propre position, icône et info-bulle avec du texte ou un lien, affiché en vol stationnaire ou en clic. Tout est défini à partir du panneau Elementor sans code.
Comment ajouter plus de points d'accès à une image ?
Ouvrez la section Hotspots dans l'onglet Contenu et utilisez Ajouter un élément pour créer un autre marqueur Chaque nouveau hotspot obtient son propre contenu, style et position, et vous pouvez le faire glisser en place sur l'image ou définir des coordonnées exactes dans l'onglet Position.
Puis-je ajouter un lien vers un hotspot ?
Oui. Chaque hotspot a un champ Lien dans son onglet Contenu, donc un marqueur peut pointer vers n'importe quelle URL. Cela permet à une image d'agir comme une carte cliquable, envoyant les visiteurs vers une page produit, une section ou un site externe à partir d'une épingle sur la photo.
Les hotspots d'images fonctionnent-ils sur mobile ?
Oui, mais le vol stationnaire n'existe pas au toucher Activez Déclencher sur Cliquez dans la section Bons d'outils pour que les utilisateurs mobiles puissent appuyer sur un marqueur pour ouvrir son info-bulle Vous pouvez également masquer les info-bulles sous un point d'arrêt et utiliser le lien du marqueur à la place.
Puis-je utiliser une icône ou une image personnalisée comme marqueur ?
Oui. Chaque hotspot a une option Type dans son onglet Contenu où vous pouvez afficher une icône ou une image à l'intérieur du marqueur au lieu de la valeur par défaut De cette façon, les marqueurs peuvent correspondre à votre marque ou au sujet de l'image.
Envelopper #
Le widget Image Hotspot transforme une image plate en une image interactive : chargez l'image, épinglez les marqueurs, ajoutez des info-bulles, puis stylisez les marqueurs et définissez le comportement de l'info-bulle Pour les widgets associés, consultez le Widget de comparaison d'images et le Widget Effets de survol d'image: parcourez le tableau complet Widgets et extensions Master Addons&, et vérifiez le page de tarification pour ce que chaque plan comprend.
