Widget de point d'accès d'image d'élémenteur avec info-bulles (Pro)
Image Hotspot est un widget Master Addons Pro qui épingle des marqueurs sur une image Un marqueur peut être un point simple, une étiquette de texte courte, une icône Font Awesome ou une petite image, et chacun ouvre une info-bulle lorsqu'un visiteur la survole, ou la touche une fois que vous activez Déclencher sur Click Il convient aux photos shop-the-look, aux appels de produits, aux plans d'étage, aux cartes du campus et aux diagrammes étiquetés Si ce que vous voulez, c'est un indice de survol sur un bouton ou un cap, le Widget info-bulle (aucun Master Addons Pro n'est nécessaire) ou le Extension Tooltips (Pro) est l'ajustement le plus proche.
Comment ajouter un point d'accès image dans Elementor
Pour ajouter un point d'accès image dans Elementor, activez Master Addons Pro, modifiez la page avec Elementor et recherchez dans le panneau du widget le point d'accès image Faites-le glisser, choisissez votre image sous Image, puis ouvrez Points d'accès et cliquez sur Ajouter un élément pour chaque marqueur Définissez le type, le contenu et la position de chaque marqueur, puis publiez.
Recherchez dans le panneau “hotspot” et deux résultats reviennent Le seul badgé MA est ce widget Le cadenassé à côté est le propre Hotspot d'Elementor, qui a besoin d'une licence Elementor Pro, il vaut donc la peine de vérifier lequel vous possédez déjà avant de construire.
Déposez le widget, choisissez votre image et définissez Résolution d'image to Full si l'image porte des détails fins Des marqueurs sont assis sur l'image rendue, donc une source réduite donne à chaque épingle un aspect approximatif Ouvrir Points chauds(en anglais), appuyez sur Ajouter un élément et répétez une fois par marqueur Chaque élément porte ses propres onglets Contenu, Style et Position.
Deux choses font trébucher les gens sur la première construction Les marqueurs atterrissent dans le coin supérieur gauche jusqu'à ce que vous touchiez les curseurs Position, donc trois éléments frais s'empilent dans ce qui ressemble à un Et la boîte Contenu de l'info-bulle est un éditeur complet, ce qui rend tentant de coller un paragraphe dans Il y a une raison de résister à cela, couvert plus bas.
Exemples travaillés avec des photos de produits, des cartes et des diagrammes en direct comment ajouter des points d'accès d'image dans Elementor. Chaque contrôle est répertorié dans le Guide des paramètres du widget Hotspot d'image.
Point d'accès à l'image en un coup d'œil
Ce que fait le widget, lisez le code Master Addons Pro.
| Article | Widget de point d'accès d'image |
|---|---|
| Types de marqueurs | Aucun, texte, icône ou image |
| Marqueurs par image | Autant que vous ajoutez à la liste Hotspots |
| Positionnement | Curseurs horizontaux et verticaux en pourcentage de l'image, une position pour chaque taille d'écran, pas de traînée |
| Paramètres par marqueur | Lien, texte tooltip, côté tooltip, couleurs par défaut et de vol stationnaire, opacité |
| Contenu tooltip | Texte brut (HTML est supprimé lors du rendu) |
| Côté info | En haut, en bas, à gauche ou à droite |
| Animation tooltip | Décalage, Décalage vers, Fade, Échelle, Perspective |
| Déclencheur | Survolez ou cliquez avec Déclencheur sur Cliquez |
| Flèche, décalage et distance | Oui |
| Effet pulsé | Activé par défaut, un interrupteur l'éteint pour le widget |
| Lien marqueur | Suivi lorsque les info-bulles s'ouvrent en vol stationnaire |
| modeler | Taille du marqueur, remplissage, rayon, couleurs par défaut et de survol ; rembourrage de l'info-bulle, rayon, couleurs, couleur de flèche, typographie |
| Besoins | Addons Elementor et Master |
Construisez 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 trois étapes.
- Déposez le point d'accès de l'image dans un conteneur et choisissez la photo sous Image.
- Ajouter un élément par spot dans Hotspots Choisissez Texte, Icône ou Image comme marqueur, tapez une info-bulle d'une ligne et définissez Position horizontale et verticale en pourcentage.
- Ouvrez les info-bulles, choisissez le côté et l'animation et activez Déclencher sur Cliquez si la plupart des visiteurs sont au téléphone.
Pour une procédure pas à pas complète avec des captures d'écran, lisez comment ajouter des points d'accès d'image dans Elementor.
Quatre marqueurs numérotés sur une photo de bureau, avec l'info-bulle de la table de réunion ouverte.
Utilisez le point d'accès d'image comme carte d'image simple
Une carte d'image rend les parties d'une image cliquables Le point d'accès à l'image couvre le cas courant : un marqueur à chaque endroit avec un lien vers une autre page, qui fonctionne lorsque les info-bulles s'ouvrent en vol stationnaire Il ne dessine pas de formes ou de zones cliquables comme le fait un plugin de carte d'image SVG tel que Image Map Pro, donc un plan d'étage où chaque contour de pièce doit être cliquable a besoin d'un plugin de carte d'image dédié.
Pour les épingles sur une carte de campus, une disposition de magasin ou un schéma de produit, les marqueurs sont suffisants et plus rapides à mettre en place Le démo de la carte de la zone de gym fonctionne de cette façon.
Quatre types de marqueurs sur une seule image
Le taper à la le contrôle dans l'onglet Contenu d'un marqueur vous donne quatre formes, et vous pouvez mélanger les quatre à l'intérieur d'une seule image.
Aucun laisse un point de couleur nue. C’est l’option la plus propre pour les diagrammes denses où les étiquettes entreraient en collision les unes avec les autres.
Texte imprime une courte chaîne à l'intérieur du marqueur Les chiffres fonctionnent bien ici, car 01, 02 et 03 sur une prise de produit lue comme une visite guidée sans légende à écrire Des chaînes plus longues transforment le point en pilule, qui est le look que vous voulez pour quelque chose comme “Cologne n°5”.
Icône prend n'importe quelle icône Font Awesome de la bibliothèque, afin qu'une feuille puisse remplacer les ingrédients et une étoile pour une note.
imaginer échange le marqueur contre une image de votre médiathèque Les vignettes et les avatars du produit se lisent mieux ; tout ce qui est occupé se transforme en bouillie à la taille du marqueur.
Chaque marqueur accepte également un Lien. Ce lien se déclenche lorsque les info-bulles s'ouvrent en vol stationnaire, ou sur les points d'arrêt où vous avez désactivé les info-bulles. Il ne se déclenche pas lorsque le déclencheur sur le clic est activé, car le robinet est déjà pris.
Placez chaque marqueur par pourcentage
Le poste tab tient deux curseurs, Position horizontale et Position verticale, tous deux mesurés en pourcentage de l'image Le réglage 50 et 24 met un marqueur à un quart du milieu Il n'y a pas de placement par glisser-sur-toile, donc vous poussez les chiffres et regardez l'aperçu.
Pourcentage est ce qui garde les marqueurs honnêtes sur un téléphone L'image de base évolue avec son conteneur et chaque marqueur garde sa tache relative, donc une étiquette épinglée sur un bouchon de bouteille est toujours sur le bouchon de bouteille à 390 px de large, où un décalage de pixel aurait dérivé.
Le même onglet porte un par marqueur Montrer à« , qui remplace le côté global de l'info-bulle pour ce marqueur. Cela aide lorsqu'un marqueur se trouve près du bord droit et que son info-bulle s'épuise de l'image : réglez celui-là sur la gauche et laissez le reste sur le dessus. ».
Marqueurs pulse par défaut. Le Désactivez l'effet d'impulsion le commutateur en bas de la section Hotspots désactive l'animation de chaque marqueur à la fois, ce qui correspond généralement à ce dont un plan d'étage à quinze broches a besoin.
Position, animation et comportement mobile de l'info-bulle
Le Boutures d'outils section pilote chaque info-bulle du widget ensemble : Afficher la position (en haut, en bas, à gauche ou à droite), l'animation (Differ, Maj vers, Fade, Échelle ou Perspective), une bascule de flèche, plus Décalage et Distance pour un coup de coude fin.
Les info-bulles s'ouvrent en vol stationnaire Les téléphones n'ont pas de vol stationnaire, alors allumez Déclencher sur Cliquez et un tap ouvrez l'info-bulle Les positions des marqueurs sont définies une fois en pourcentage et s'appliquent à chaque taille d'écran, sans tablette séparée ni position mobile Les marqueurs gardent leur taille sur un téléphone, donc sur un écran étroit ils couvrent plus de la photo Gardez le compte bas ou abaissez le marqueur Taille en Style, Hotspots.
Une limitation pour planifier autour de Contenu d'info-bulle est une boîte WYSIWYG, mais le widget supprime le balisage avant qu'il ne rende, si gras, les liens, les images et les shortcodes disparaissent tous et l'info-bulle affiche le texte brut Gardez chacun sur une seule ligne courte Lorsque vous avez besoin de contenu d'info-bulle formaté, le widget Hotspot d'Elementor Pro gère le texte riche et ce widget ne le fait pas.
Le style de l'info-bulle elle-même est l'ensemble complet : alignement, remplissage, rayon, arrière-plan, couleur du texte, bordure, couleur des flèches, typographie et ombre de la boîte. L'image de base obtient des filtres d'opacité, de bordure, de rayon, d'ombre de boîte et CSS.
Marqueurs de style pour les défauts et le survol
Le style du marqueur se situe à deux endroits, ce qui est plus simple qu'il n'y paraît une fois que vous connaissez la séparation.
Le widget modeler l'onglet couvre chaque marqueur à la fois : remplissage de texte, rayon de bordure, typographie, un groupe de transition, puis les onglets par défaut et de survol contenant l'opacité, la taille, la couleur, la couleur de fond, le type de bordure et l'ombre de boîte. La taille est un multiplicateur d'échelle de 0,5 à 2, donc définir le survol à 1,15 donne aux marqueurs une légère levée sous le curseur sans rien décaler d'autre sur la page.
L'onglet Style à l'intérieur d'un seul marqueur remplace la couleur, l'arrière-plan et l'opacité de ce marqueur par défaut et par le vol stationnaire. C'est ainsi que vous faites un marqueur rouge sur un mur de violet, pour marquer un article épuisé ou signaler le point chaud que vous souhaitez remarquer en premier.
Border Radius à 100 vous donne des cercles et des pilules Laissez tomber à 6 et les marqueurs de texte deviennent des balises carrées, qui se lisent mieux sur un dessin architectural qu'une rangée de bulles.
Hotspot Elementor Pro vs Hotspot d'image Master Addons
Elementor Pro expédie son propre widget Hotspot Si vous payez déjà pour Elementor Pro, vérifiez celui-là d'abord, car vous n'aurez peut-être pas besoin de celui-ci du tout.
| Caractéristique | Point d'accès Elementor Pro | Point d'accès à l'image des modules complémentaires principaux |
|---|---|---|
| Prix | Besoins d'Elementor Pro | Besoins de Master Addons Pro |
| Types de marqueurs | Texte de l'étiquette et une icône, avec une taille personnalisée | Aucun, texte, icône ou image |
| Animation de marqueur | Soft Beat, Expand ou Overlay, avec animation séquencée | Allumer ou éteindre |
| Contenu tooltip | Texte riche avec formatage | Texte brut uniquement |
| Déclencheur tooltip | Survolez, cliquez ou aucun | Survolez ou cliquez avec Déclencheur sur Cliquez |
| Animation tooltip | Styles de fondu et de diapositive avec un réglage de durée | Décalage, Décalage vers, Fade, Échelle, Perspective, plus flèche, décalage et distance |
| Positionnement | Par positions de l'appareil | Pour cent coulisses horizontales et verticales, une position pour chaque écran, pas de traînée sur la toile |
| Lien marqueur | Lien par point d'accès | Lien par marqueur, suivi lorsque les info-bulles s'ouvrent en vol stationnaire |
| Besoins d'Elementor Pro | Oui | Non |
Elementor Pro gagne sur les animations riches de texte et de marqueurs tooltip. Master Addons est le choix si vous voulez des marqueurs d'image ou utilisez déjà Master Addons Pro sans Elementor Pro. Related : the Widget info-bulle, le Extension Tooltips (Pro), Comparaison d'images et Effets de survol d'image.
Où un point d'accès à l'image gagne sa place
La photographie shop-the-look est l'évidence Une seule prise de vue lifestyle, un marqueur d'image par produit, une infobulle nommant chaque article et un Lien jusqu'à sa page produit Elle fonctionne mieux qu'une grille de vignettes car le visiteur voit les pièces stylisées ensemble avant qu'elles ne les voient tarifées.
Les spécifications sans tableau de spécifications sont l'utilisation la plus silencieuse. Sur les boîtiers d'appareil photo, les montres et les machines, des marqueurs numérotés font marcher un lecteur autour de l'objet dans l'ordre de votre choix, et personne n'a besoin de recaler la ligne 4 d'un tableau sur la photo.
Ensuite, il y a des plans d'étage, des cartes de campus et des diagrammes étiquetés. Des points avec effet d'impulsion désactivé sont activés, une infobulle d'une ligne sur chacun et un lien sur chaque marqueur pointant vers la pleine page, avec des infobulles laissés en vol stationnaire pour que le lien se déclenche toujours. Quinze épingles restent lisibles de cette façon ; quinze pilules pulsantes ne le font pas.
Se marie bien avec : le Widget info-bulle, le Extension ToolTIPS (Pro), Effets de survol d'image, Image avancée et Comparaison d'images.
Exemples de points d'accès d'image
Quatorze démos live construites avec le widget, chacune étant d'une utilisation différente pour un hotspot d'image.
- Achetez le look: repères numérotés sur un salon, chaque infobulle nommant une pièce et son prix.
- Plat restaurant: marqueurs d'icônes nommant le fournisseur de chaque partie de la plaque.
- Liste de propriétés: marqueurs d'étiquettes sur une villa pour le toit-terrasse, la suite et la piscine.
- Liste de voitures: marqueurs d'icônes sur les lumières, les roues et les caméras de stationnement.
- Lookbook de mode: marqueurs sur un sac, une montre et un manteau avec les prix.
- Carte de la zone de gymnastique: un marqueur par zone d'entraînement.
- Regarder l'anatomie: petits marqueurs d'icônes sur le cadran, le mouvement et la couronne.
- Tour de coworking: points simples sur un étage de bureau.
- Matériel téléphonique: marqueurs sur les caméras, le bouton d'alimentation et le port de charge.
- Fonctionnalités du casque: appels sur une prise de vue de produit.
- Casque VR: appels de fonctionnalités et de garantie.
- Répartition des tenues: veste, lunettes de soleil et jeans.
- Promo produit: marqueurs sur une photo de sac fourre-tout.
- Appels de page de destination: marqueurs sur une capture d'écran de page.
Questions fréquemment posées pour le point d'accès à l'image
Que se passe-t-il sur les téléphones portables où il n'y a pas de vol stationnaire ?
Activer Déclencheur sur Cliquez dans la section Conseils d'outils pour que les visiteurs appuient sur un marqueur pour ouvrir son info-bulle Les marqueurs conservent la même position en pourcentage sur chaque écran, donc prévisualisez la page à la largeur du téléphone et abaissez la taille du marqueur s'ils envahissent l'image.
Puis-je utiliser une image personnalisée au lieu d'une icône pour le marqueur de point d'accès ?
Oui. Définissez le type de point d'accès sur Image et choisissez une image dans la bibliothèque multimédia. Une petite image simple telle qu'une vignette de produit ou un avatar se lit mieux à la taille d'un marqueur.
Puis-je faire glisser des marqueurs en place dans l'éditeur ?
N° Chaque marqueur a des curseurs de position horizontale et de position verticale dans son onglet Position, mesurée en pourcentage de l'image Déplacez le curseur et regardez l'aperçu Pourcentage garde le marqueur au même endroit lorsque l'image redimensionne.
Puis-je utiliser Image Hotspot comme carte d'image ?
Pour les liens de points, oui : mettez un marqueur à chaque endroit et donnez-lui un lien, avec des info-bulles laissées en vol stationnaire. Il ne dessine pas de formes ou de zones cliquables, donc pour les contours de pièce sur un plan d'étage, utilisez un plugin de carte d'image tel qu'Image Map Pro.
Y a-t-il un widget hotspot dans Elementor gratuit ?
Le widget Hotspot de No. Elementor fait partie d'Elementor Pro, et Image Hotspot a besoin de Master Addons Pro. Certains autres packs d'addon incluent un widget hotspot dans leurs versions gratuites.
L'image de base elle-même est-elle réactive ?
Oui. L'image évolue avec sa colonne et les positions des marqueurs sont définies en pourcentage, de sorte que chaque marqueur reste sur la même partie de l'image sur toutes les tailles d'écran. Sur les téléphones, activez Déclencher sur Cliquez pour qu'un clic ouvre l'info-bulle.
Le widget Image Hotspot est-il gratuit ?
No. Image Hotspot fait partie de Maître Addons Pro. Sans Pro, vous pouvez utiliser le Widget info-bulle(en), qui ajoute un indice de survol à un seul élément mais ne pince pas les marqueurs sur une image Les utilisateurs d'Elementor Pro peuvent également utiliser le propre widget Hotspot d'Elementor.
Puis-je désactiver l'animation du pouls ?
Oui. Désactiver l'effet d'impulsion se trouve au bas de la section Hotspots et désactive l'impulsion pour chaque marqueur de ce widget. Il n'y a pas de bascule d'impulsion par marqueur, alors utilisez un deuxième widget Image Hotspot si vous avez besoin des deux looks sur une seule page.
Pourquoi le formatage dans mon info-bulle disparaît-il ?
Le widget supprime le HTML du contenu Tooltip avant son rendu, de sorte que le texte en gras, les liens, les images et les codes courts sont supprimés et que l'info-bulle affiche le texte brut Gardez chaque info-bulle sur une ligne courte Pour les info-bulles formatées, le widget Hotspot d'Elementor Pro prend en charge le texte enrichi.
Widgets et extensions d'éléments tendance
Construisez des sites Web sophistiqués en moins de temps.
Glassmorphisme
Extras de conteneurs
Modèles
![Modules principaux Extension de duplicateur de messages/pages pour le lien de ligne Elementor : MA Duplicator dans la liste des pages WordPress créant une ébauche de page de destination - [Dupliqué n° 128]](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Duplicateur de messages/pages
