Souhaitez-vous trouver comment créer une image interactive avec Hotspots dans WordPress grâce à Elementor et Essential Addons?
L’image est un excellent outil pour transmettre une information. Tout le monde sait que les informations transmises via l’image — et la forme visuelle dans son ensemble — sont plus faciles à comprendre et à retenir.
Dans le contexte du Web, vous pouvez utiliser de nombreux formats d’image. À partir d’une infographie, d’une photo, d’une bande dessinée, d’une illustration, etc….
Si vous souhaitez créer du contenu Web tel que l’anatomie de quelque chose, des repères urbains, des cartes ou des instructions, la création d’image avec Hotspots peut être une excellente idée.
L’idée de ce type de contenu est de fournir une image interactive qui permet à vos lecteurs de comprendre facilement les informations que vous transmettez. Vous pouvez ajouter des Hotspots sur une image qui contient une info-bulle sur chaque Hotspot. Voici un exemple.
Si vous avez un site web basé sur WordPress, créer une image avec des hotspots n’est pas trop difficile à faire. Vous pouvez en créer un en utilisant le module Essential Addons .
Qu’est-ce que le module Essential Addons?
Les modules Essential Addons est un Module complémentaire d’Elementor. Il s’agit de l’un des modules les plus populaires avec plus de 2 millions de téléchargements. Ce module complémentaire ajoute environ 60 widgets supplémentaires à votre Elementor.
L’un des widgets proposés par Essential Addons est EA Image Hotspots que vous pouvez utiliser pour créer une image interactive. Essential Addons lui-même est un module complémentaire freemium, mais vous devez utiliser la version pro pour créer des images avec Hotspots car le widget EA Image Hotspots n’est disponible que sur cette version.
Comment utiliser le module Essential Addons pour créer des images avec Hotspots
Tout d’abord, vous devez installer les modules Elementor et Essential Addons sur votre WordPress. Vous pouvez obtenir la version pro d’Essential Addons sur son site web officiel. Alors que pour Elementor, vous pouvez utiliser la version gratuite.
Consultez aussi : Comment utiliser un widget global dans Elementor
La version gratuite d’Elementor est disponible sur le répertoire du plugin WordPress afin que vous puissiez l’installer en tapant “ elementor ” sur la zone de recherche du programme d’installation des plugins (Plugins – > Ajouter).
Une fois Elementor et Essential Addons installés, créez une nouvelle page (Pages – > Ajouter) ou un nouvel article (Articles – > Ajouter) et modifiez-le avec Elementor. Vous serez redirigé vers l’éditeur d’Elementor après avoir cliqué sur le bouton Modifier avec Elementor.
Avant de créer les images avec hotspots, vous pouvez d’abord définir la mise en page. Pour ce faire, ouvrez le panneau des paramètres de la page en cliquant sur l’icône d’engrenage dans le coin inférieur gauche du panneau gauche.
Lire aussi : Comment utiliser le widget Publications d’Elementor
Définissez la mise en page sur le menu déroulant Mise en page
Ajoutez une nouvelle section en cliquant sur l’icône plus dans la zone d’édition et ajoutez le widget EA Image Hotspots à partir du panneau de gauche.
Ajoutez votre image en cliquant sur le sélecteur d’image dans le panneau de gauche.
Ouvrir l’option Hotspots sur le panneau de gauche pour ajouter les points d’accès. Par défaut, le widget EA Image Hotspots contient un point d’accès. Vous pouvez cliquer sur le point d’accès par défaut pour modifier son contenu.
Par défaut, le type de point d’accès est défini sur Icône. Vous pouvez le changer en Texte ou laisser Vide si vous le souhaitez.
Cliquez sur l’onglet POSITION pour définir la position du point d’accès. Définissez les positions X et Y en faisant glisser les curseurs.
Cliquez sur l’onglet TOOLTIP pour ajouter le contenu de l’info-bulle. Activez l’info-bulle et ajoutez votre contenu dans l’éditeur. Vous pouvez également définir la position de l’info-bulle, que ce soit en haut, en bas, à gauche ou à droite.
Pour ajouter plus de Hotspots, cliquez simplement sur le bouton AJOUTER UN ELEMENT dans la section Hotspots et répétez les étapes ci-dessus pour définir la position du point d’accès, le contenu de l’info-bulle et la position de l’info-bulle.
Ouvrez la section Tooltip Settings pour définir la taille des info-bulles et l’effet d’animation.
Maintenant, allez à l’onglet Style pour styliser vos hotspots ainsi que les info-bulles. Tout d’abord, ouvrez l’option Image pour définir la taille de l’image.
Ouvrir la section Hotspot pour personnaliser les hotpots. Vous pouvez définir la taille, la couleur de l’icône ( ou le texte en fonction du type de point d’accès que vous avez sélectionné ), la couleur d’arrière-plan, le rayon de bordure etc…
Découvrez également : Comment ajouter des articles connexes dans Elementor
Ouvrez la section Tooltip pour personnaliser les info-bulles. Vous pouvez définir la couleur d’arrière-plan, la couleur du texte, la typographie ( taille du police, la famille de polices, le style de police ) et la largeur.
Jusqu’ici, vous avez réussi à créer des images avec hotspots. Vous pouvez jouer avec le panneau de gauche pour personnaliser vos images avec hotspots jusqu’à ce que vous soyez satisfait du résultat. Une fois que vous avez terminé, vous pouvez cliquer sur le bouton PUBLIER pour publier votre page.
Ajouter des images avec hotspots à Gutenberg
Si vous souhaitez ajouter des images avec hotspots comme matériau de support pour l’article sur lequel vous travaillez, vous pouvez l’intégrer à Gutenberg ( l’éditeur WordPress par défaut ) en utilisant le plugin Elementor Blocks for Gutenberg. Ce plugin vous permet d’utiliser un modèle Elementor comme bloc Gutenberg.
Pour enregistrer les images avec hotspots ci-dessus en tant que modèle de section Elementor, cliquez avec le bouton droit sur la poignée de section et sélectionnez Enregistrer comme modèle.
Donnez un nom à votre modèle et cliquez sur le bouton ENREGISTRER.
Ouvrez l’article dans lequel vous souhaitez ajouter des images avec hotspots. Ajoutez un nouveau bloc, sélectionnez Bibliothèque Elementor et sélectionnez le modèle d’images avec hotspots que vous venez de créer.
Obtenez Elementor Pro Maintenant !!!
Conclusion
Voila ! C’est tout pour cet article qui vous montre comment créer une image interactive avec Hotspots dans WordPress grâce à Elementor et Essential Addons. Si vous avez des soucis sur comment y arriver faites le savoir dans les commentaires.
Cependant, vous pourrez aussi consulter nos ressources, si vous avez besoin de plus d’éléments pour mener à bien vos projets de création de sites internet, en consultant notre guide sur la création de blog WordPress ou celui sur Divi : le meilleur thème WordPress de tous les temps.
Mais en attendant, partagez cet article sur vos différents réseaux sociaux.
…
