Vidéo étape par étape
Introduction
Dans ce tutoriel, vous apprendrez comment ajouter des points d’information à n’importe quelle image en utilisant les fonctionnalités de l’extension JetTricks.
Qu’est-ce qu’un hotspot ?
Un hotspot est un marqueur placé sur l’image pour attirer l’attention de l’utilisateur sur une partie spécifique de celle-ci. En général, ils sont utilisés dans les boutiques en ligne pour proposer à l’utilisateur des liens vers les produits qu’il voit sur une photo promotionnelle. Les points d’information sont également souvent compatibles avec des infobulles qui affichent des informations supplémentaires. Ce guide vous montrera comment placer des points d’information sur les images de votre site web en utilisant les widgets de JetTricks.
Étape 1 : Choisissez l’image
Accédez au tableau de bord et recherchez la page ou la publication où vous souhaitez ajouter une image avec des points d’information. Modifiez-la avec Elementor. Recherchez le widget Hotspots dans le menu des widgets sur le côté gauche. Glissez-le et déposez-le sur la page.
Choisissez l’image que vous souhaitez utiliser comme base pour vos points d’information. Il est préférable de choisir des photos en haute résolution et de bonne qualité si vous voulez que cette partie de la page soit réellement esthétique.
Étape 2 : Choisissez l’image
Comme vous pouvez le voir, un point d’information est créé par défaut et placé au centre d’une image. Allons dans la section Hotspots et cliquons sur l’ Élément#1.
Tout d’abord, vous pouvez modifier ici le contenu ou la position d’un point d’accès. Vous devriez probablement commencer par le Contenu.
- Icône : vous pouvez en choisir une dans la bibliothèque d’icônes, charger un fichier SVG ou même choisir de ne pas utiliser d’icône.
- Texte : les données que vous saisissez ici s’afficheront à côté de l’icône sur le point d’information.
- Description : le texte que vous insérez dans cette zone de texte s’affichera comme infobulle (Tooltip) de ce point d’accès.
- Lien : vous pouvez choisir vers où l’utilisateur sera dirigé lorsqu’il cliquera sur le point d’information (lien vers une autre page, lien vers une image, popup ou laisser vide).
Pour modifier la position, vous disposez de deux curseurs : Position horizontale (%) et Position verticale (%). Vous pouvez déplacer le point d’information en faisant glisser un curseur horizontalement ou en saisissant les valeurs en pourcentage.
Il est possible d’ajouter (ou de dupliquer un existant) autant de points d’information que vous le souhaitez, cliquez simplement sur le bouton « Ajouter un élément ». De plus, vous pouvez sélectionner l’un des effets d’animation, qui s’appliquera à tous les points d’accès. Il existe 6 types d’animation qui s’afficheront en « mode veille », lorsque l’utilisateur ne survole pas l’image.
Étape 3 : Définir les paramètres de l’infobulle
Comme indiqué précédemment, le texte à afficher en tant qu’infobulle doit être saisi dans la zone de texte Description de l’élément Hotspot. Voici d’autres paramètres de personnalisation.
- Show on Init (Afficher à l’initialisation) : si cette option est activée, les infobulles seront toujours visibles ; lorsqu’elle est désactivée, elles n’apparaissent qu’au survol de la souris.
- Placement (Emplacement) : ici, vous pouvez choisir où afficher les infobulles : au-dessus du point d’information, en dessous, à gauche ou à droite.
- Animation (Animation) : vous pouvez choisir parmi 5 types d’animation pour l’apparition de l’infobulle.
- Animation Delay (Délai d’animation) : la valeur qui définit le temps entre l’activation du déclencheur et l’apparition de l’infobulle.
- Appearance Duration (Durée d’apparition) : c’est une valeur qui définit la vitesse de l’animation avec laquelle l’infobulle apparaît après le déclenchement.
- Disappearance Duration (Durée de disparition) : cette valeur définit la rapidité avec laquelle l’infobulle sera masquée après que le pointeur a quitté le point d’information.
- Trigger (Déclencheur) : cette option définit quand l’infobulle sera affichée. « Mouse Enter » signifie que l’infobulle s’affichera lorsque le pointeur entrera dans les limites du point d’information (hotspot). « Click » fera apparaître l’infobulle lorsque l’utilisateur cliquera sur le point d’information. « None » fait en sorte que l’infobulle ne s’affiche jamais.
- Use Arrow (Utiliser une flèche) : lorsque cette option est activée, l’infobulle comporte une petite flèche pointant vers le point d’information.
- Distance (Distance) : il y a un espace entre l’infobulle et le bord du point d’accès, et cette valeur définit la taille de cet espace.
Étape 4 : Modifiez les styles à votre guise
Allez dans l’onglet Style et modifiez le design des points d’information (Hotspots) et des infobulles selon vos goûts et vos besoins.
Une fois tous les réglages effectués, actualisez la page et observez l’image sur l’interface. Placez le curseur sur le point d’information et l’infobulle apparaîtra immédiatement.