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 Ouvrez l'onglet Position de chaque marqueur et définissez les curseurs de position horizontale et verticale, en pourcentage, pour le placer sur l'image.
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), du texte court (un signe plus par défaut), une icône ou une petite image Le champ Texte est le texte affiché à l'intérieur du marqueur Le champ Lien ajoute une URL, qui fonctionne lorsque les étiquettes s'ouvrent en vol stationnaire ou sont désactivées pour cette taille d'écran.
L'éditeur de contenu Tooltip est une boîte WYSIWYG pour le texte de l'étiquette, mais l'étiquette elle-même affiche du texte brut. Le formatage, les images et les liens sont supprimés, alors écrivez une ligne courte.
É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, remplissage de texte, rayon de bordure, typographie, une transition et couleur, arrière-plan, bordure, opacité et ombre de boîte par défaut et par survol. Les couleurs individuelles des points d'accès 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 définir Désactiver sur Mobile ou Tablet & Mobile et laisser les liens de marqueur 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 Tooltip et extension Tooltips | Le widget Tooltip est un indice autonome avec son propre déclencheur L'extension Tooltips attache une étiquette de survol à un élément Elementor existant, tel qu'un bouton, une icône, un bloc de texte ou une section. | 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 construit pour les images et place les marqueurs par position Si vous avez besoin de marqueurs sur une photo, utilisez Image Hotspot Pour une étiquette de survol sur un bouton ou un bloc de texte qui existe déjà, utilisez le Extension ToolTIPS. Si vous souhaitez plutôt une indication autonome, le Widget info-bulle fait ça.
Image Hotspot et l'extension Tooltips ont besoin de Master Addons Pro, alors que le widget Tooltip est dans le plugin gratuit Ils ne partagent pas de sélecteurs ou de gestionnaires d'événements, vous pouvez donc les utiliser sur la même page.
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 | Des dizaines de widgets gratuits tels que Dual Heading, Creative Button, Infobox, Advanced Accordion et le widget Tooltip. |
| Pro | Inclus | Tous les widgets gratuits plus Image Hotspot, l'extension Tooltips, les conditions d'affichage et le reste des plus de 80 widgets et extensions. |
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 Pro possède son propre widget Hotspot et Master Addons Pro ajoute un widget Image Hotspot qui peut également utiliser de petites images comme marqueurs.
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. Les écrans tactiles n'ont pas de survol, alors activez Déclencher sur le clic et les visiteurs mobiles appuyez sur un marqueur pour ouvrir son étiquette. Le positionnement basé sur le pourcentage maintient les points d'accès correctement épinglés sur toutes 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 Le lien fonctionne lorsque les étiquettes s'ouvrent en vol stationnaire, ou sur les écrans où les étiquettes sont éteintes, de sorte qu'un marqueur peut afficher son étiquette en vol stationnaire et amener le visiteur vers une page produit ou une URL externe en cliquant avec Déclencheur sur Cliquez dessus, un clic ouvre l'étiquette à la place.
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, 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 est un indice autonome avec son propre déclencheur, et l'extension Tooltips attache une étiquette de survol à un élément existant tel qu'un bouton, un texte ou une icône Utilisez Image Hotspot pour les photos annotées et les options d'infobulles 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 le reste des 80+ widgets et extensions pour Elementor.
