Une photo de produit avec un paragraphe de spécifications en dessous est rarement lue Un plan d'étage avec une légende sur le côté est ignoré Le problème est toujours le même : l'image et l'information vivent dans deux endroits différents, et la plupart des visiteurs ne défilent jamais assez loin pour les connecter.
Un point d'accès de l'image corrige cela Vous épinglez de petits marqueurs directement sur la photo, et chacun révèle une courte étiquette quand quelqu'un plane ou tape Le Widget de point d'accès d'image de Master Addons fait cela à l'intérieur de l'éditeur Elementor Téléchargez une image, déposez des marqueurs là où vous les voulez, écrivez une étiquette pour chacun, et vous avez terminé Pas de CSS, pas de code personnalisé.
Qu'est-ce qu'un point d'accès à l'image dans Elementor ?
Un point d'accès image est un petit marqueur interactif épinglé à une position spécifique sur une image Chaque marqueur a sa propre étiquette, icône ou lien Sur le bureau, le survol du marqueur montre un panneau flottant avec le contenu Sur mobile, le taper fait la même chose.
Une photo de produit peut avoir un marqueur sur chaque fonctionnalité Un plan d'étage peut marquer des pièces individuelles Une capture d'écran peut indiquer des boutons ou des paramètres avec une courte explication L'image elle-même ne change pas Les marqueurs donnent juste aux visiteurs un moyen de l'explorer.
Elementor n'a pas de widget hotspot intégré La version Master Addons gère tout depuis le panneau du widget : placement des marqueurs, contenu des étiquettes, icônes, animations et style Vous configurez chaque hotspot individuellement via le répéteur, et le widget s'occupe du positionnement et de la réactivité.
Pourquoi utiliser les points d'accès d'images sur votre site Web ?
Les images statiques créent un écart entre ce que le visiteur voit et ce qu'il doit savoir Les points chauds comblent cet écart.
Sur une photo de produit, épinglez un marqueur sur chaque fonctionnalité afin que les visiteurs voient les spécifications sans faire défiler vers une liste distincte Sur un plan d'étage, marquez les chambres ou les cabines pour que chaque emplacement s'ouvre avec son nom et ses détails Sur une infographie, gardez le visuel propre et laissez les marqueurs porter le contexte supplémentaire Sur une capture d'écran, indiquez des boutons ou des paramètres spécifiques pour un didacticiel ou un flux d'intégration Sur une photo d'équipe, étiquetez les personnes ou les départements.
La structure est toujours la même : une image, plusieurs marqueurs, chacun révélant du contenu lorsqu'il interagit avec Le visiteur reste sur l'image au lieu de rebondir entre l'image et un bloc de texte en dessous.
Comment ajouter un point d'accès à l'image dans Elementor (étape par étape)
L'ensemble de la configuration prend environ cinq minutes.
Étape 1 : Installez Master Addons et Activez Pro
Accédez à Plugins, Ajoutez du nouveau dans votre tableau de bord WordPress et recherchez “Master Addons.” Installez et activez le plugin gratuit Si vous avez un Licence PRO(en anglais), entrez-le sous Master Addons, Licence Le widget Image Hotspot n'apparaît qu'après que Pro soit actif.
Étape 2 : Faites glisser le widget de point d'accès à l'image dans votre page
Ouvrez n'importe quelle page de l'éditeur Elementor Dans le panneau Elements à gauche, recherchez Image Hotspot ou faites défiler vers la section Master Addons (les widgets portent un badge MA violet).Drag it on the page, Il se charge avec un exemple d'image et quelques marqueurs d'espace réservé que vous pouvez modifier.
Étape 3 : Téléchargez votre image
Dans l'onglet Contenu, ouvrez la section Image Cliquez sur Choisir une image et choisissez une image dans la bibliothèque multimédia Définir la résolution de l'image sur Pleine ou Large pour un rendu net L'option Alignement positionne l'image dans sa colonne : gauche, centre ou droite.
Étape 4 : Ajoutez des points d'accès à l'image
Ouvrez la section Hotspots Chaque élément du répéteur est un marqueur Cliquez sur Ajouter un élément pour en créer un nouveau Vous pouvez en ajouter autant que l'image en a besoin Faites glisser chaque marqueur sur l'image pour le positionner, ou définissez les coordonnées horizontales et verticales exactes pour un placement précis.
Il existe une bascule Désactiver l'effet d'impulsion si vous souhaitez des marqueurs statiques au lieu de l'animation pulsée par défaut.
Étape 5 : Définissez le type de marqueur et le contenu de l'étiquette
Cliquez sur un élément de point d'accès pour ouvrir ses paramètres Sous Tapez, choisissez ce qui apparaît à l'intérieur du marqueur : rien (juste un point), une icône ou une petite image Le champ Texte contient l'étiquette courte qui s'affiche dans le panneau flottant Le champ Lien ajoute une URL afin que le marqueur navigue également quelque part sur clic.
L'éditeur de contenu Tooltip est une boîte WYSIWYG pour le texte complet de l'étiquette Vous pouvez utiliser le formatage, les images ou les codes courts là-dedans.
Étape 6 : Configurer le comportement du marqueur
De retour dans l'onglet Contenu principal, la section Bons d'outils contrôle le comportement des étiquettes sur tous les marqueurs :
- Afficher la position: sur quel côté du marqueur l'étiquette s'ouvre (en haut, en bas, à gauche, à droite).
- Flèche: basculer un pointeur entre le marqueur et l'étiquette.
- Animation: l'effet de révélation lorsque l'étiquette apparaît, comme Shift-Toward.
- Déclencher sur Cliquez: passe du hover-to-reveal au clic-to-reveal C'est celui que vous souhaitez pour mobile, puisque les écrans tactiles n'ont pas de vol stationnaire.
Options de style de marqueur
Chaque hotspot possède son propre onglet Style pour l'apparence du marqueur :
- Couleur par défaut et Fond par défaut: le marqueur au repos.
- Couleur Hover et Arrière-plan de survol: comment ça change en vol stationnaire.
- Opacité: à quel point le marqueur est solide par rapport à l'image Des valeurs plus faibles le rendent plus subtil.
Choisissez une couleur de marqueur qui se démarque de l'image derrière elle Une photo occupée avalera un marqueur à faible contraste, et les visiteurs ne remarqueront pas les points chauds.
Stylage de l'image et des étiquettes
L'onglet Style principal du widget comporte trois sections.
Panneau d'image
Contrôle l'image elle-même : l'opacité, le rayon de bordure, l'ombre de la boîte et les filtres CSS. Un rayon de bordure ou une ombre aide l'image à se situer à l'intérieur d'une disposition de type carte Les filtres CSS vous permettent de modifier la luminosité, le contraste ou la saturation sans réexporter l'image.
Panneau de marquage
Paramètres globaux pour tous les marqueurs : taille et couleur par défaut. Les styles de points d'accès individuels les remplacent.
Panneau d'étiquettes
Contrôle le panneau flottant qui apparaît lorsqu'un marqueur interagit avec : la couleur d'arrière-plan, la couleur du texte, la typographie, le remplissage, le rayon de bordure et l'ombre.
Comportement réactif sur mobile
Les marqueurs utilisent un positionnement basé sur le pourcentage, ils restent donc épinglés au même endroit sur l'image, quelle que soit la taille de l'écran. Les étiquettes redimensionnent et se repositionnent pour rester dans la fenêtre.
Les appareils tactiles n'ont pas de vol stationnaire, donc la bascule Déclencher sur le clic dans la section Conseils d'outils fait basculer l'ensemble du widget pour appuyer sur pour le révéler Les visiteurs appuient sur un marqueur pour ouvrir l'étiquette et appuient ailleurs pour la fermer Si votre audience est principalement sur mobile, allumez-le dès le début.
Sur les très petits écrans où les étiquettes commencent à se chevaucher, vous pouvez les désactiver en dessous d'un certain point d'arrêt et laisser les liens des marqueurs faire le travail à la place Chaque marqueur navigue toujours vers son URL sur le robinet.
Image Hotspot vs Tooltip Widget : Quelle est la différence ?
Master Addons possède deux fonctionnalités qui produisent des étiquettes volantes, et les gens les mélangent :
| Caractéristique | Ce que ça fait | Meilleur Pour |
|---|---|---|
| Widget de point d'accès d'image | Épingle des marqueurs interactifs à des positions x/y spécifiques sur une image Chaque marqueur ouvre une étiquette en survol ou en clic. | Photos annotées, appels de produits, plans d'étage, cartes interactives. |
| Widget info-bulle | Attache une étiquette de survol à n'importe quel élément Elementor : un bouton, une icône, un bloc de texte, une section ou un widget. | Survolez les indices sur les boutons, aidez le texte sur les champs du formulaire, contexte supplémentaire sur n'importe quel élément de page. |
Image Hotspot est spécifique à l'image et basé sur la position Tooltip fonctionne sur n'importe quel widget Elementor Si vous avez besoin de marqueurs sur une photo, utilisez Image Hotspot Si vous avez besoin d'une étiquette de survol sur un bouton ou un bloc de texte, utilisez le Widget info-bulle.
Les deux sont livrés avec Master Addons Pro. Ils fonctionnent sur différents éléments et ne partagent pas de sélecteurs ou de gestionnaires d'événements, vous pouvez donc les utiliser sur la même page sans problème.
Conseils pour travailler avec des points d'accès à l'image
- Marqueurs d'espace sortis. Les marqueurs qui se chevauchent rendent l'image difficile à utiliser Si deux points chauds se rapprochent, poussez leurs étiquettes sur les côtés opposés ou laissez tomber l'une d'entre elles.
- Gardez les étiquettes courtes. Une ligne ou deux se lit mieux qu'un paragraphe à l'intérieur d'un panneau flottant Utilisez l'étiquette pour un résumé rapide et faites le lien pour tous les détails.
- Activer Déclencheur sur Cliquez pour mobile. Même si le vol stationnaire fonctionne sur le bureau, les utilisateurs tactiles ont besoin d'une cible de pression. Le widget gère les deux modes en même temps.
- Testez sur différents écrans. Les marqueurs qui semblent bien espacés sur un bureau peuvent se regrouper sur un téléphone Vérifiez un téléphone, une tablette et un moniteur large avant de publier.
- Contrastez les marqueurs contre l'image. Un marqueur lumineux sur une photo sombre fonctionne Un marqueur sourd sur un fond occupé disparaît Utilisez l'état Hover pour ajouter de l'emphase lorsque quelqu'un se concentre sur un marqueur.
- Utilisez l'onglet Position lorsque l'alignement est important. Le glisser est rapide pour le placement grossier L'onglet Position avec les valeurs exactes en pourcentage est meilleur lorsque vous avez besoin de marqueurs pour vous aligner avec des parties spécifiques d'un diagramme ou d'une capture d'écran.
Gratuit vs Pro : ce que vous obtenez
| Plan | Point d'accès de l'image | Autres Widgets |
|---|---|---|
| Gratuit | Non inclus | Plus de 40 widgets, dont Heading, Button, Info Box, Accordéon et plus encore. |
| Pro | Inclus | Tous les widgets gratuits ainsi que Image Hotspot, Tooltip, Mega Menu et plus de 76 widgets et extensions au total. |
Le plugin de base est libre d'installer à partir du Dépôt WordPress. Le widget Image Hotspot nécessite spécifiquement un Licence PRO.
Qu'est-ce qu'un point d'accès image dans Elementor ?
Un point d'accès d'image est un petit marqueur interactif placé au-dessus d'une image Lorsqu'un visiteur la survole ou la touche, une étiquette apparaît avec du texte, une description ou un lien pour cette zone spécifique de la photo. Elementor n'inclut pas de widget de point d'accès intégré, vous avez donc besoin d'un addon comme Master Addons pour ajouter cette fonctionnalité.
Combien de points d'accès puis-je ajouter à une seule image ?
Il n'y a pas de limite dure Pratiquement, 5 à 7 hotspots par image permettent de garder les choses lisibles Au-delà de cela, les marqueurs commencent à se chevaucher Si vous avez besoin d'annoter plus de zones, divisez le contenu sur plusieurs images.
Les hotspots d'images fonctionnent-ils sur mobile ?
Oui. Sur les appareils tactiles, le widget passe du vol stationnaire au toucher pour révéler. Vous pouvez activer Déclencher le clic pour que les visiteurs mobiles appuient sur un marqueur pour ouvrir son étiquette. Le positionnement basé sur le pourcentage maintient les points d'accès correctement épinglés sur les tailles d'écran.
Puis-je lier un point d'accès à une autre page ?
Oui. Chaque point d'accès a un champ Lien s'allume en cliquant, de sorte qu'un marqueur peut à la fois afficher des informations dans son étiquette et diriger le visiteur vers une page produit, une section de documentation ou une URL externe.
Le widget Image Hotspot est-il gratuit ou Pro ?
Le widget Image Hotspot est une fonctionnalité Pro. Le plugin de base Master Addons est gratuit et comprend plus de 40 widgets, mais le widget hotspot nécessite un Licence PRO.
Quelle est la différence entre le widget Image Hotspot et le widget Tooltip ?
Le widget Image Hotspot épingle des marqueurs interactifs à des positions spécifiques sur une image, chacun affichant une étiquette en survol ou en clic. Le Widget info-bulle attache une étiquette de survol à n'importe quel élément Elementor (boutons, texte, icônes).Utiliser Image Hotspot pour les photos annotées ; utiliser Tooltip pour les astuces de survol sur d'autres éléments de page.
Envelopper
Le widget Image Hotspot prend une image plate et ajoute des marqueurs qui révèlent des informations sur le survol ou le clic Téléchargez l'image, déposez des marqueurs sur les zones qui nécessitent une explication, écrivez une courte étiquette pour chacune et stylisez les marqueurs pour qu'ils correspondent à votre conception Tout se passe à l'intérieur de l'éditeur Elementor.
Pour en savoir plus sur les images dans Elementor, voir le Widget de comparaison d'images et le Widget Effets de survol d'image. Si vous avez besoin d'étiquettes volantes sur les boutons ou le texte au lieu d'images, le Tutoriel du widget Tooltip couvre ça. Et la liste complète des Widgets et extensions Master Addons vaut la peine d'être parcouru si vous voulez voir ce qui est disponible d'autre.
Obtenez Master Addons Pro pour déverrouiller le widget Image Hotspot et plus de 76 autres widgets et extensions pour Elementor.
