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 gratuit Widget info-bulle 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.
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, ce qui laisse deux options honnêtes Allumez Déclencher sur Cliquez et un robinet ouvre l'info-bulle Ou réglé Désactiver sur vers Mobile, ou Tablet & Mobile, qui cache les info-bulles sur ces écrans et confie le travail au Link de chaque marqueur.
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 |
| mobile | Par positions de l'appareil | Désactivez les info-bulles sur Tablet & Mobile ou Mobile |
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 free 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. Les points avec effet d'impulsion désactivé sont activés, les info-bulles sont réglées pour déclencher en clic et un lien sur chaque marqueur pointant vers la pleine page. Quinze épingles restent lisibles de cette façon ; quinze pilules pulsantes ne le font pas.
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 ?
Activez Déclencher sur Cliquez dans la section Conseils d'outils pour que les visiteurs appuient sur un marqueur pour ouvrir son info-bulle Vous pouvez également définir Désactiver sur Mobile ou Tablet & Mobile, qui masque les info-bulles sur ces écrans et permet au marqueur Lien d'amener les visiteurs à plus d'informations.
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.
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. Les info-bulles peuvent nécessiter un déclenchement en clic ou une désactivation pour les petits écrans.
Le widget Image Hotspot est-il gratuit ?
No. Image Hotspot fait partie de Maître Addons Pro. Le plugin gratuit a 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 ?
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
