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 Widget de point d'accès d'image dans Modules complémentaires principaux pour Elementor est un widget Pro qui épingle des marqueurs cliquables n'importe où sur une image. Chacun affiche une courte info-bulle de texte et peut créer un lien vers une autre page lorsqu'un visiteur la survole ou l'appuie.
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.
- Maître Addons Pro installé avec une licence active, puisque Image Hotspot est un widget Pro. Nouveau dans le 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, puis placez chacun avec les curseurs dans son onglet Position.
- 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.
- Onglet de position : Position horizontale et verticale en pourcentage pour chaque marqueur.
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, un texte court, une icône ou une image à l'intérieur du marqueur.
- Texte et lien : le texte à l'intérieur du marqueur et une URL, qui fonctionne lorsque les info-bulles s'ouvrent en vol stationnaire ou sont désactivées sur cet écran.
- Contenu de l'info-bulle : le texte de l'infobulle Il est édité dans une boîte WYSIWYG, mais l'infobulle affiche uniquement du texte brut.
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. Désactiver sur masque les info-bulles sur Tablet & Mobile ou Mobile.
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 les curseurs d'onglets Position, puis prévisualisez sur un téléphone pour vérifier chaque marqueur.
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 ?
Il s'agit d'un widget Master Addons Pro pour Elementor qui épingle des marqueurs interactifs sur une image Chaque point d'accès a sa propre position, type de marqueur, info-bulle en texte brut et lien facultatif, 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 le placez avec les curseurs dans son onglet Position.
Puis-je ajouter un lien vers un hotspot ?
Oui. Chaque hotspot a un champ Lien dans son onglet Contenu, de sorte qu'un marqueur peut pointer vers n'importe quelle URL Le lien fonctionne lorsque les info-bulles s'ouvrent en vol stationnaire ou sont désactivées sur cet écran 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 des exemples et une comparaison avec le Hotspot d'Elementor Pro, voir le Widget de point d'accès d'image d'élémentor page. Pour les widgets associés, voir 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.
