Principaux points à retenir
- Un point d'accès d'image Elementor est un marqueur épinglé sur une photo qui ouvre une courte étiquette sur le survol ou le robinet, et le widget Master Addons Image Hotspot ajoute un marqueur pour chaque élément de sa liste Hotspots.
- Le widget Image Hotspot a besoin d'Elementor et Master Addons Pro, car Free Elementor n'a pas de widget hotspot et Elementor Pro expédie son propre widget Hotspot distinct.
- Chaque marqueur de point d'accès à l'image est placé avec des curseurs de position horizontale et verticale en pourcentage de l'image, et cette position s'applique sur le bureau, la tablette et le téléphone.
- Les info-bulles Image Hotspot affichent uniquement du texte brut, puisque le texte en gras, les liens, les images et les codes courts saisis dans la zone Contenu de l'info-bulle sont supprimés lorsque la page se rend.
- Déclencher sur Cliquez dans la section Boîtes à outils du point d'accès à l'image permet aux marqueurs de fonctionner sur les téléphones, mais le lien d'un marqueur n'est suivi que lorsque les info-bulles s'ouvrent en vol stationnaire.
- Le widget Image Hotspot peut servir de simple carte d'images avec des marqueurs de points liés, bien qu'il ne puisse pas dessiner de formes cliquables ni de plans de pièce comme le peut un plugin de carte d'images SVG.
Un point d'accès d'image Elementor est un petit marqueur épinglé sur une photo qui montre une courte étiquette lorsqu'un visiteur la survole ou la touche Free Elementor n'a pas de widget pour cela, ce guide utilise donc le Widget de point d'accès d'image Master Addons(en), qui ajoute des marqueurs à n'importe quelle image du panneau Elementor sans code personnalisé Vous avez besoin de Master Addons Pro pour cela.
Les étapes ci-dessous vous mènent d'un conteneur vide à une image interactive publiée : placer des marqueurs par pourcentage, écrire l'étiquette pour chacun d'eux et styliser les marqueurs pour le bureau et les téléphones Les sections suivantes couvrent les limites à connaître avant de construire, comment utiliser les points d'accès comme simple carte d'image et comment le widget se compare au widget Hotspot dans Elementor Pro.
Table des matières
Qu'est-ce qu'un point d'accès image dans Elementor
Un hotspot d'image est un marqueur placé à un point de consigne sur une image Chaque marqueur porte sa propre étiquette courte et, si vous voulez, un lien Sur un bureau l'étiquette apparaît en vol stationnaire Sur un téléphone le visiteur appuie sur le marqueur.
Une photo de produit peut avoir un marqueur sur chaque fonctionnalité Un plan d'étage peut marquer les chambres ou les bureaux Une capture d'écran peut pointer vers les boutons dont un nouvel utilisateur a besoin L'image reste la même, et les marqueurs permettent aux visiteurs de l'explorer sans faire défiler vers une liste séparée de spécifications ou une légende.
Free Elementor n'a pas de widget hotspot Elementor Pro en a un appelé Hotspot, et Master Addons Pro ajoute Image Hotspot, qui peut également utiliser une petite image comme marqueur Ce guide couvre le widget Master Addons.
Si vous ne voulez qu'un indice de survol sur un bouton ou un cap, un point d'accès n'est pas le bon outil Le Widget info-bulle gère cela sans Master Addons Pro, et le Extension ToolTIPS (Pro) ajoute un indice à un élément qui est déjà sur la page.
Vous voulez le voir fonctionner avant de construire ? Le Page du widget Hotspot de l'image propose des démos live, la liste complète des paramètres et un côte à côte avec Elementor Pro Hotspot.
Comment ajouter un point d'accès image dans Elementor
La configuration prend environ cinq minutes pour une image avec quatre ou cinq marqueurs.
Étape 1 : Installez Master Addons et activez Pro
Dans votre tableau de bord WordPress, accédez à Plugins, Ajouter Nouveau et recherchez“Master Addons” Installez-le et activez-le, puis entrez votre Licence PRO sous Additions maîtres, Licence. Image Hotspot n'apparaît dans le panneau Elementor qu'une fois que Pro est actif Il fonctionne avec Elementor gratuit.
Étape 2 : Faites glisser le widget Image Hotspot sur la page
Ouvrez la page dans l'éditeur Elementor et recherchez dans le panneau Elements (Éléments) «“hotspot” » Le résultat avec le badge MA est Image Hotspot Si vous voyez aussi un widget Hotspot cadenassé à côté, celui-ci appartient à Elementor Pro. Faites glisser Image Hotspot dans un conteneur.
Étape 3 : Choisissez votre image
Dans l'onglet Contenu, ouvrez la section Image et cliquez sur Choisir l'image Définir la résolution de l'image sur Pleine ou Large si la photo a des détails fins, car les marqueurs sont assis sur l'image rendue et une copie réduite donne à chaque épingle un aspect approximatif L'alignement place l'image à gauche, au centre ou à droite dans sa colonne.
Étape 4 : Ajoutez des points d'accès et définissez leur position
Ouvrez la section Hotspots Chaque élément de la liste est un marqueur, alors cliquez sur Ajouter un élément une fois pour chaque endroit que vous souhaitez marquer Il n'y a pas de limite sur le nombre d'éléments.
Chaque élément comporte des onglets Contenu, Style et Position Sur l'onglet Position, déplacez les curseurs Position horizontale ( %) et Position verticale ( %) pour placer le marqueur Les valeurs sont un pour cent de l'image, donc 50 et 50 mettent le marqueur au centre Vous ne pouvez pas faire glisser les marqueurs sur le canevas, et les nouveaux éléments commencent tous dans le coin supérieur gauche jusqu'à ce que vous les déplaciez, donc trois éléments frais peuvent ressembler à un.
Une position s'applique sur chaque taille d'écran Un marqueur à 22 % de diamètre et 52 % de dessous se trouve sur la même partie de la photo sur un ordinateur portable et sur un téléphone.
Sous la liste, Désactiver l'effet d'impulsion ? désactive l'anneau pulsé autour de chaque marqueur du widget.
Étape 5 : Choisissez le type de marqueur et écrivez l'étiquette
Dans l'onglet Contenu de chaque élément, Type définit ce qui apparaît à l'intérieur du marqueur : Aucun (un point simple), Texte (un signe plus par défaut, ou un nombre ou un mot que vous tapez), Icône (toute icône Font Awesome) ou Image (une petite image).Le mélange des types sur une image fonctionne bien.
Le champ Lien envoie le visiteur vers une autre page lorsqu'il clique sur le marqueur Il est suivi lorsque les info-bulles s'ouvrent en vol stationnaire Avec le Déclencheur sur Cliquer activé (étape 6), un clic ouvre l'info-bulle et le lien est ignoré.
Contenu de l'info-bulle est la ligne qui apparaît dans l'info-bulle du point d'accès La boîte ressemble à un éditeur de texte intégral, mais l'info-bulle affiche le texte brut : gras, italiques, liens, images et codes courts sont tous supprimés lorsque la page écrit une ligne courte.
Étape 6 : Choisissez comment les marqueurs s'ouvrent
De retour dans l'onglet Contenu, la section Bons d'outils contrôle chaque marqueur du widget à la fois.
- Afficher la position choisit le côté sur lequel l'info-bulle s'ouvre : en haut, en bas, à gauche ou à droite. Un marqueur peut le remplacer par l'option Afficher à son onglet Position.
- L'animation définit l'effet de révélation : Shift-Away, Shift-Toward, Fade, Scale ou Perspective.
- Arrow ajoute un pointeur de l'infobulle au marqueur.
- Le décalage et la distance déplacent l'info-bulle le long du marqueur et l'éloignent de celui-ci.
- Déclencher sur Cliquez ouvre les info-bulles en un clic ou en un clic. Les téléphones n'ont pas de vol stationnaire, alors allumez-le si de nombreux visiteurs utilisent un téléphone.
Étape 7 : Aperçu et publication
Cliquez sur Publier et ouvrez la page dans un nouvel onglet Survolez chaque marqueur pour vérifier le texte et le côté de l'info-bulle, puis redimensionnez la fenêtre en fonction de la largeur du téléphone et vérifiez que les marqueurs ne se couvrent pas.
Stylez les marqueurs et l'image
Le style se déroule à deux endroits : l'onglet Style de chaque marqueur et l'onglet Style principal du widget.
Style par marqueur
L'onglet Style à l'intérieur d'un élément hotspot a les paramètres par défaut et par survol pour la couleur, l'arrière-plan et l'opacité Utilisez-le pour donner à un marqueur une couleur différente, comme un article de vente sur une photo de produit.
Choisissez une couleur de marqueur qui contraste avec la photo derrière elle Un marqueur sourd sur une photo occupée se perd, et les visiteurs ne remarqueront pas qu'il y a quoi que ce soit à planer.
imaginer
La section Image de l'onglet Style principal contrôle la photo : opacité, bordure, rayon de bordure, ombre de boîte et filtres CSS Un rayon et une ombre douce aident l'image à s'asseoir à l'intérieur d'une disposition de carte.
Points chauds
La section Hotspots stylise chaque marqueur à la fois : taille, remplissage, rayon de bordure, opacité, couleur et arrière-plan, chacun avec une version en vol stationnaire Les paramètres sur un marqueur individuel l'emportent sur ceux-ci.
Boutures d'outils
La section Boutons d'outils stylise l'infobulle du point d'accès : alignement du texte, remplissage, rayon de bordure, arrière-plan, couleur du texte, couleur des flèches et typographie.
Construire une image interactive dans Elementor
Une image interactive est une photo qui répond aux questions lorsqu'un visiteur la pointe. Dans Elementor, vous en construisez un avec Image Hotspot en suivant les étapes ci-dessus : un marqueur par spot, une info-bulle d'une ligne sur chacun et Déclenchez sur Cliquez si votre trafic est principalement mobile.
Associer l'image à une liste courte à côté fonctionne bien Le visiteur peut survoler un marqueur ou lire la liste, et les deux pointent vers les mêmes éléments Le achetez cette démo de chambre utilise des marqueurs numérotés sur une photo de salon avec une liste de prix à côté.
D'autres mises en page adaptées à une image interactive incluent une montre ou un gadget avec un marqueur sur chaque partie, une liste de voitures avec des marqueurs sur les lumières et les roues, une photo de propriété avec des étiquettes sur chaque fonctionnalité et une photo d'équipe avec un nom sur chaque personne.
Utilisez les points d'accès d'image comme une simple carte d'image
Une carte d'image rend cliquables des parties d'une image Le point d'accès d'image couvre le cas courant : un marqueur à chaque endroit avec un lien vers une autre page, qui est suivi lorsque les info-bulles s'ouvrent en vol stationnaire Il place uniquement des marqueurs de points Il ne dessine pas de formes cliquables, donc un plan d'étage où chaque contour de pièce doit être cliquable a besoin d'un plugin dédié à la carte d'image tel que Carte d'images Pro(qui dessine des formes vectorielles sur l'image) (en novembre 2026).
Pour les épingles sur une carte de campus, un aménagement de magasin ou un sol de salle de sport, les marqueurs sont suffisants et plus rapides à mettre en place Le démo de la carte de la zone de gym marque cinq zones sur une photo, et chaque marqueur renvoie à la page de réservation de cette zone.
Image hotspots sur les téléphones et tablettes
Les positions des marqueurs représentent un pourcentage de l'image, de sorte que chaque marqueur reste sur la même partie de la photo à chaque taille d'écran. Il n'y a pas de position distincte pour la tablette ou le téléphone.
Les marqueurs conservent leur taille lorsque l'image rétrécit, environ 40 px par défaut Sur un téléphone, une image avec de nombreux marqueurs est encombrée Utilisez moins de marqueurs, taille inférieure sous Style, points chauds ou donnez aux visiteurs du téléphone une image plus simple.
Les téléphones n'ont pas de vol stationnaire, alors activez Déclencher sur Cliquez dans la section Conseils d'outils Les visiteurs appuient sur un marqueur pour ouvrir son info-bulle Gardez à l'esprit qu'avec le mode clic activé, un clic ouvre l'info-bulle et le lien du marqueur n'est pas suivi, donc si les liens comptent plus que les info-bulles, laissez Déclencher sur Cliquez.
Ce dont vous avez besoin pour utiliser les points d'accès d'image
| Configuration | Widget Hotspot que vous obtenez |
|---|---|
| Free Elementor seul | Aucun. Core Elementor n'a pas de widget hotspot. |
| Élémenteur Pro | Widget Hotspot propre à Elementor, avec un contenu tooltip formaté et ses propres animations de marqueurs. |
| Master Addons sans Pro | Pas de point d'accès à l'image De nombreux autres widgets sont inclus. |
| Avec Master Addons Pro | Image Hotspot, l'extension Tooltips et le reste des plus de 80 widgets et extensions. |
Master Addons installe à partir du Répertoire de plugins WordPress. Le point d'accès à l'image a besoin d'un Licence Master Addons Pro par-dessus. Chaque contrôle est répertorié dans le Guide des paramètres du point d'accès à l'image.
Conseils pour travailler avec des points chauds d'image
- Marqueurs d'espace dehors Si deux sont assis près l'un de l'autre, envoyez leurs info-bulles sur les côtés opposés avec l'option Afficher à l'onglet Position de chaque marqueur, ou déposez-en un.
- Gardez chaque étiquette sur une ligne L'info-bulle se rend en texte brut, alors mettez des détails plus longs sur une page et utilisez le lien du marqueur.
- Testez à la largeur du téléphone avant de publier La même position de pourcentage s'applique partout et les marqueurs ne rétrécissent pas, de sorte qu'un marqueur qui semble bien sur un bureau peut couvrir un petit détail sur un téléphone.
- Utilisez une couleur Hover sur les marqueurs afin que les visiteurs puissent savoir sur lequel ils se trouvent.
- Alignez les marqueurs avec les nombres exacts Taper les valeurs dans les champs de pourcentage est plus rapide que de pousser les curseurs lorsque les marqueurs doivent reposer sur de petites parties d'un diagramme ou d'une capture d'écran.
Questions fréquemment posées
Qu'est-ce qu'un point d'accès image dans Elementor ?
Un point d'accès image est un petit marqueur placé au-dessus d'une image Lorsqu'un visiteur la survole ou la touche, une courte étiquette apparaît pour cette partie 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 Cinq à sept marqueurs par image permettent de garder les choses lisibles, et moins sur les images qui seront vues sur les téléphones, car les marqueurs ne rétrécissent pas avec l'image Si vous en avez besoin de plus, divisez le contenu sur deux images.
Les hotspots d'images fonctionnent-ils sur mobile ?
Oui. Les téléphones n'ont pas de vol stationnaire, alors allumez Déclencheur sur Click et les visiteurs appuient sur un marqueur pour ouvrir son info-bulle Les positions sont un pourcentage de l'image et la même chose sur chaque écran, alors vérifiez que les marqueurs ne s'entassent pas à la largeur du téléphone.
Puis-je lier un point d'accès à une autre page ?
Oui. Chaque marqueur a un champ Lien Le lien est suivi lorsque les info-bulles s'ouvrent en vol stationnaire, donc un visiteur lit l'info-bulle en vol stationnaire et se rend à la page en clic Avec Déclencher en Cliquez sur, un clic ouvre l'info-bulle à la place et le lien n'est pas suivi.
Puis-je mettre du texte, des liens ou des images en gras dans une info-bulle hotspot ?
Non. La boîte Contenu de l'info-bulle est un éditeur riche, mais le texte en gras, les liens, les images et les codes courts sont supprimés lorsque la page se rend, de sorte que l'info-bulle affiche le texte brut Écrivez une ligne courte et utilisez le lien du marqueur pour un contenu plus long.
Ai-je besoin de Master Addons Pro pour Image Hotspot ?
Oui. Image Hotspot est un widget Master Addons Pro, et il fonctionne avec Elementor gratuit Il apparaît dans le panneau Elementor une fois a Licence PRO est actif.
En quoi Image Hotspot est-il différent du widget Elementor Pro Hotspot ?
Elementor Pro Hotspot permet un contenu d'info-bulle formaté, a des animations de marqueurs Soft Beat, Expand et Overlay, et s'ouvre en vol stationnaire, en clic ou pas du tout Master Addons Image Hotspot utilise des info-bulles en texte brut, un effet d'impulsion sur les marqueurs et cinq animations d'info-bulle, et il peut utiliser une petite image comme marqueur.
Réflexions finales
Image Hotspot transforme une photo plate en une image interactive : quatre types de marqueurs, des positions définies en pourcentage, une ligne en texte brut par marqueur et cinq animations révélatrices, le tout depuis le panneau Élémenteur Gardez les marqueurs peu sur les images que les téléphones verront, et activez Déclenchez sur Cliquez lorsque la plupart du trafic est mobile.
Pour plus de widgets d'image, voir Comparaison d'images et Effets de survol d'image. Si vous avez besoin de conseils de survol sur les boutons ou le texte au lieu d'images, le Tutoriel du widget Tooltip couvre cela et la liste complète de Widgets et extensions Master Addons affiche ce qui vient d'autre avec le plugin.
Obtenez Master Addons Pro pour ajouter Image Hotspot et le reste des plus de 80 widgets et extensions à Elementor.
