Comment créer un hotspot d'images en utilisant le widget Hotspot d'Elementor

Une image explique souvent mieux des concepts complexes que mille mots. Vous pouvez zoomer sur l'image pour voir tous les détails du produit ou de l'article. De plus, l'ajout de points d'information à l'image peut rendre l'image du produit plus vivante et plus intéressante.

Les points chauds de l'image sont un moyen de présenter des informations. Ils attirent l'attention de l'utilisateur sur le produit et l'incitent à cliquer ou à acheter.Elementor Le widget Image Hotspot permet d'obtenir facilement cet effet.

Cet article décrit comment utiliser la fonction Elementor (utilisé comme expression nominale) Point d'accès Widget pour créer des hotspots d'images. Avant de commencer, comprenez ce qu'est une zone sensible.

Qu'est-ce qu'un point chaud de l'image ?

Les hotspots d'image sont des zones cliquables ajoutées à une image qui affichent des informations supplémentaires ou des invites d'action lorsque l'utilisateur clique dessus. Vous pouvez superposer des boutons ou des formes sur l'image et définir l'emplacement exact.

Lorsque vous cliquez sur le hotspot, le contenu s'affiche. Comme le montre l'image ci-dessous, l'image est marquée d'un signe plus. Vous pouvez afficher un contenu tel que la description du produit, le prix ou un lien de saut.

Création de points chauds sur les images avec le widget Happy Addons Hotspot Widget

Si votre site web est basé sur WordPress Conçue par Elementor, cette fonctionnalité est très facile à mettre en œuvre. Il suffit d'installer Elementor et le plugin HappyAddons, une puissante extension d'Elementor avec des centaines de widgets et des dizaines de fonctionnalités utiles.

Étape 1 : Installer les plugins Elementor et HappyAddons

HappyAddons Hotspots est un widget premium pour HappyAddons, assurez-vous que les plugins suivants sont installés :

• Elementor
• HappyAddons
• HappyAddons Pro

Astuce : Après avoir utilisé HappyAddons Pro, vous n'avez pas nécessairement besoin de l'option Elementor Pro.

Étape 2 : Glissez-déposez le widget Hotspot dans la zone d'édition d'Elementor.

existent Elementor Trouvez le widget HappyAddons Hotspots dans le panneau et faites-le glisser à l'endroit approprié sur la page.

Étape 3 : Sélectionnez l'image à ajouter au hotspot

Cliquez sur la zone de téléchargement d'images et sélectionnez une image existante ou téléchargez-en une nouvelle.

Étape 4 : Ajouter des points chauds à l'image

Une fois l'image ajoutée, vous verrez apparaître un hotspot par défaut sur l'image. Ensuite, dans l'onglet Contenu du panneau Elementor, trouvez l'option Spot. Le premier hotspot est nommé item #1 par défaut, cliquez dessus pour entrer dans les paramètres.

Cliquez sur le bouton "+ Ajouter un élément" pour ajouter d'autres points chauds.

Vous pouvez personnaliser chaque hotspot un par un, en ajoutant du texte, des icônes et même en insérant des images. Les détails dépendent de votre image de fond.

Utilisez les paramètres de position X et Y pour déplacer avec précision l'emplacement du hotspot.

Ensuite, saisissez les informations relatives à la zone sensible dans l'option "Info-bulle". Remplissez le texte dans la zone de paragraphe et mettez-le en forme en le mettant en gras, en italique, en le soulignant ou en ajoutant un lien.

Répétez la même opération pour les autres points chauds.

Étape 5 : Ajuster le style du hotspot

Chaque hotspot peut être stylisé séparément. Dans le Elementor Les éléments suivants peuvent être ajustés dans l'onglet "Style" de l'onglet "Style" :

• ampleur
• degré élevé
• marge intérieure
• cadre
• couleur
• couleur du texte
• Couleur d'arrière-plan de la boîte de repérage

Il peut être librement paramétré pour répondre aux besoins visuels de la page.

Si vous devez modifier le style de la boîte d'info, cliquez sur l'option Info-bulle et continuez à ajuster les paramètres pertinents jusqu'à ce que l'effet approprié soit présenté.

Étape 6 : Ajouter des extensions à l'aide des options avancées

Vous souhaitez ajouteranimeQuels sont vos paramètres d'arrière-plan ou réactifs ? Cliquez sur le bouton Options avancées pour en savoir plus. "Les options avancées sont la configuration par défaut d'Elementor. Vous pouvez consulter la documentation pour en savoir plus sur l'utilisation de ces fonctionnalités.

Conseil : le nombre de points chauds de l'image n'est pas limité.

Grâce au mode responsive d'Elementor, il est également possible de vérifier que les images s'affichent correctement sur différents appareils.

Contexte et signification de l'utilisation des points chauds de l'image

Le dicton "une image vaut mille mots" est bien connu. Mais une image ne peut pas couvrir toute l'information, et les points chauds de l'image peuvent résoudre ce problème. Ils apportent un contenu supplémentaire à l'image, la rendant plus interactive et plus expressive.

La combinaison d'images et de texte permet souvent d'obtenir un meilleur retour d'information. Voici quelques scénarios d'application typiques :

Vitrine infographique

Les infographies sont souvent utilisées pour des tutoriels, des statistiques, des processus et d'autres contenus, et sont idéales pour une présentation visuelle.

L'ajout d'un point chaud permet aux utilisateurs d'obtenir plus d'informations explicatives en cliquant sans perturber la typographie originale.

application pédagogique

Les images de points chauds sont parfaites pour les scénarios d'enseignement, en particulier dans les types de cours suivants :

• Bio : Lors de l'apprentissage de la structure du corps humain, les points chauds peuvent être étiquetés pour chaque organe ou partie afin de faciliter la compréhension et la mémorisation.

• Géographie : Vous avez du mal à vous souvenir des noms de pays et de lieux ? Créez un hotspot sur la carte et connaissez l'emplacement et le nom exacts d'un simple clic.

• Historiographie : Lorsque vous expliquez des événements historiques, vous pouvez identifier les personnages dans les images afin que les élèves se souviennent plus facilement du contexte de l'histoire.

Questions fréquemment posées

Qu'est-ce qu'un point chaud de l'image ?

Un hotspot d'image est une zone spécifique d'une image qui, lorsque l'on clique dessus, fait apparaître une fenêtre contextuelle avec un contenu qui peut être un message d'information, un texte, une vidéo ou un lien.

Quels sont les types de points chauds de l'image ?

Les types les plus courants actuellement disponibles sont les suivants :

1. Affichage du contenu des images
2. disposition d'un puzzle
3. hotspot par glisser-déposer
4. Points chauds de l'image fixe
5. Point d'accès à l'image de la diapositive

Quels styles peuvent être définis pour les formes de points chauds ?

Les formes les plus courantes sont les suivantes

• rectangles
• orbiculaire
• polygonal

Comment est configuré le Hotspot interactif d'Image ?

Si vous souhaitez créer des images avec un effet interactif cliquable, vous devez utiliser la fonction hotspot. Lorsque l'utilisateur clique dessus, un contenu graphique, image ou vidéo peut apparaître.

Vous pouvez définir les éléments suivants :

1. Nombre de points chauds
2. Emplacement de chaque hotspot
3. Style d'affichage pour chaque hotspot

Voici le processus complet de création de points chauds d'image. Si vous souhaitez rendre le contenu de votre page plus attrayant, mettez la main à la pâte et essayez cette méthode de conception. En quelques étapes seulement, vous pouvez obtenir un affichage graphique hautement interactif.

résumés

effet de levier Elementor Avec le widget Hotspot fourni par Happy Addons, les images ne sont plus seulement des affichages statiques, mais un support interactif qui peut transmettre plus d'informations. Par une simple opération de glisser-déposer, vous pouvez ajouter plusieurs zones cliquables à une image pour afficher du texte, des icônes,lien (sur un site web)et d'autres contenus pour rendre la page plus expressive

Contactez nous
Vous n'arrivez pas à lire le tutoriel ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !	Service clientèle WeChat
① Tel : 020-2206-9892
② QQ咨询：1025174874
(iii) Courriel : info@361sale.com
④ Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.