Comment ajouter des points chauds d’image dans WordPress (La méthode facile)

Parfois, l’ajout d’images et de publicités ne suffit pas à attirer l’attention des internautes.

C’est là que les hotspots d’images peuvent venir à la rescousse. Ces zones cliquables peuvent transformer une simple image en une expérience attrayante et informative pour vos internautes. Nous les avons expérimentées nous-mêmes pour présenter des points sur une carte, identifier des membres d’une équipe sur une photo et mettre en évidence les caractéristiques d’un produit.

Si vous vous demandez comment faire la même chose, vous êtes au bon endroit. Ce guide vous montrera 2 méthodes simples pour créer un hotspot d’image pour votre site WordPress sans aucun code.

Quand ajouter des points chauds à vos images dans WordPress

Les hotspots d’images sont des points cliquables qui peuvent transformer de simples images en contenu interactif que les internautes peuvent explorer. Mais quand faut-il penser à ajouter des hotspots à vos images ?

Les points chauds sont particulièrement utiles lorsque vous souhaitez mettre en valeur différentes parties de l’image d’un produit.

Imaginons que vous vendiez un nouveau téléphone. Vous pouvez ajouter des points chauds pour mettre en évidence l’appareil photo, l’écran et d’autres caractéristiques. Cela aide les clients à se renseigner sur le produit sans avoir à lire de longues descriptions.

De nombreux sites de vente d’articles ménagers utilisent également des points chauds pour mettre en évidence les détails des articles présentés dans des photos de mise en scène.

Les points chauds sont également très utiles pour rendre les infographies et les visualisations de données plus attrayantes. Au lieu d’entasser toutes les informations dans une seule image, vous pouvez cacher des détails supplémentaires derrière les hotspots. Lorsque les internautes cliquent sur différentes parties de l’infographie, ils peuvent découvrir d’autres faits et chiffres.

Si vous gérez un site eLearning, les hotspots peuvent améliorer l’expérience de l’utilisateur et rendre vos leçons plus interactives. Par exemple, vous pouvez ajouter des hotspots à une carte, permettant aux étudiants de cliquer pour en savoir plus sur différents pays ou points de repère.

Avec cela à l’esprit, regardons comment ajouter facilement des hotspots d’images à votre site WordPress. Nous avons trouvé 2 méthodes, et vous pouvez utiliser les liens rapides ci-dessous pour naviguer dans l’article :

Méthode 1 : Ajouter des points chauds d’image avec SeedProd (pour les pages d’atterrissage/thèmes personnalisés)

Cette première méthode utilise SeedProd, un constructeur de pages par glisser-déposer, pour ajouter des hotspots d’images à votre site WordPress. Nous recommandons cette méthode si vous créez une page d’atterrissage personnalisée ou un thème WordPress personnalisé et que vous souhaitez utiliser une plateforme avec un bloc de hotspots d’images.

Ce que nous aimons à propos de SeedProd, c’est qu’il propose plus de 350 modèles de pages d’atterrissage et kits de thèmes pour différentes catégories d’industries, des boutiques en ligne aux services de nettoyage en passant par les entreprises SaaS. Il y a donc une option pour chaque type de site.

Une chose que vous devez prendre en compte est que si vous voulez juste une solution gratuite pour créer des hotspots d’image, alors cette méthode n’est peut-être pas faite pour vous. En effet, le bloc hotspot de SeedProd n’est disponible que dans les versions payantes de SeedProd. Dans ce cas, nous vous recommandons d’utiliser la méthode 2.

En savoir plus sur les fonctionnalités et le prix de l’extension, consultez notre avis SeedProd.

Une fois que vous avez acheté un plan SeedProd, vous pouvez télécharger et installer l’extension WordPress dans votre zone d’administration. Après cela, allez dans SeedProd «  Paramètres et saisissez votre clé de licence. Vous pouvez trouver cette information sur votre page de compte SeedProd.

Une fois cela fait, il suffit de cliquer sur « Vérifier la clé ».

Ensuite, naviguez vers SeedProd  » Landing Pages.

Ensuite, cliquez sur  » Ajouter une nouvelle page d’atterrissage « .

Vous verrez maintenant tous les modèles que SeedProd propose. Il y a des options pour une page d’atterrissage de liste d’attente virale, une page d’atterrissage de publicité Google, une page « coming soon », et plus encore.

Veillez à faire défiler les options et à les prévisualiser une à une afin de choisir celle qui répond le mieux à vos besoins.

Une fois que vous avez choisi un modèle, il vous suffit de passer la souris sur votre sélection.

Cliquez ensuite sur le bouton orange représentant une coche.

Une nouvelle fenêtre contextuelle apparaît alors, vous demandant de nommer la page et d’insérer son URL slug.

Ensuite, cliquez sur « Enregistrer et commencer à modifier la page ».

Cela ouvrira l’éditeur de glisser-déposer de SeedProd.

Son fonctionnement est similaire à celui de l’éditeur de blocs de WordPress, où vous pouvez faire glisser et déposer des blocs sur la page et cliquer dessus pour les personnaliser à votre guise.

Pour créer des hotspots d’images, vous pouvez trouver le bloc « Hotspot » dans la barre latérale gauche.

Il vous suffit ensuite de le faire glisser et de le déposer directement sur votre page.

Ensuite, vous devez téléverser l’image WordPress à laquelle vous souhaitez ajouter des hotspots.

Vous pouvez le faire en cliquant sur le bloc « Hotspot » et en sélectionnant « Utiliser votre propre image » ou « Utiliser une image de stock » pour sélectionner une image.

La première option ouvrira la bibliothèque de médias où vous pourrez choisir une image existante ou en téléverser une nouvelle. Si la taille de l’image est assez importante, vous pouvez consulter notre guide sur la façon de téléverser de grandes images dans WordPress.

Une fois que vous avez téléversé une image, vous pouvez saisir un texte alt pour décrire l’image à l’intention des moteurs de recherche et des outils de lecture d’écran.

Vous pouvez également personnaliser la taille et l’alignement de l’image.

Ensuite, vous pouvez faire défiler l’écran vers le bas pour commencer à ajouter vos hotspots.

Vous pouvez le faire en cliquant sur le bouton « + Add Hotspot ».

Un point orange apparaît alors sur votre image. Vous pouvez ajuster sa position en faisant glisser les barres d’orientation horizontale et verticale.

En outre, vous pouvez insérer le texte qui doit apparaître lorsque le curseur de l’utilisateur survole la zone sensible.

En descendant, vous pouvez modifier la couleur du hotspot.

Il suffit de cliquer sur les paramètres « Couleur » pour choisir une couleur adaptée à votre marque et à la conception de votre site.

Si vous continuez à faire défiler l’écran vers le bas, vous pouvez activer le commutateur « Paramètres avancés ».

C’est ici que vous pouvez ajouter un lien au texte de l’infobulle de votre hotspot afin que les utilisateurs soient redirigés vers la page souhaitée.

En outre, vous pouvez choisir une icône personnalisée pour remplacer la forme de cercle par défaut.

Pour ce faire, il suffit de cliquer sur le bouton « Choisir une icône ».

Une fenêtre popup apparaîtra où vous pourrez choisir différentes icônes de la bibliothèque de SeedProd. Vous pouvez également choisir des icônes de Font Awesome si vous avez besoin de plus d’options.

Pour utiliser une icône, il suffit de cliquer dessus.

Une fois que vous avez choisi une icône, vous pouvez faire glisser la barre « Taille de l’icône » pour réduire ou agrandir la forme, selon vos préférences.

Vous pouvez ensuite répéter les étapes pour créer d’autres points chauds d’images interactives.

Ci-dessous, vous pouvez ajouter un effet d’animation à vos hotspots d’images. Deux options sont disponibles : ‘Soft Beat’ et ‘Expand’.

Passons maintenant à la section « Tooltip ».

Ici, vous pouvez modifier la position de l’infobulle (à droite, à gauche, au-dessus ou au-dessous de la zone sensible) et changer le déclencheur.

Si vous sélectionnez « Cliquer », cela signifie que l’info-bulle s’affichera lorsque l’utilisateur cliquera sur la zone sensible. En revanche, « Hover » signifie que l’info-bulle s’affichera lorsque le curseur passera au-dessus de la zone.

Ensuite, vous pouvez modifier la durée de l’infobulle.

Il s’agit simplement du temps nécessaire pour que l’info-bulle apparaisse après que l’utilisateur a survolé ou cliqué sur la zone sensible. Si vous souhaitez que le texte s’affiche instantanément, il vous suffit de lui donner la valeur 0.

Vous pouvez également désactiver la flèche de l’infobulle, selon vos préférences.

Si vous passez à l’onglet « Avancé », vous pouvez personnaliser davantage l’apparence de l’image.

Par exemple, vous pouvez ajouter une ombre à la boîte ou ajuster le rembourrage et la marge.

Une fois que vous avez terminé, cliquez sur le bouton « Enregistrer » dans le coin supérieur droit.

Cliquez ensuite sur « Publier » pour mettre la page en direct.

Et le tour est joué ! Veillez à visualiser la page sur mobile, ordinateur de bureau et tablette pour voir si elle se présente bien sur tous les appareils.

Voici à quoi ressemble notre hotspot d’images interactif :

Méthode 2 : Ajouter des points chauds d’image avec l’extension Image Hotspot (gratuite mais limitée)

Si l’utilisation d’un constructeur de pages et le changement de thème vous semblent un peu trop contraignants, vous pouvez utiliser l’extension gratuite WordPress Image Hotspot à la place. Cette extension est une excellente alternative à la méthode 1, mais notez que la version gratuite ne permet d’ajouter que jusqu’à 6 hotspots sur une seule image.

Pour utiliser Image Hotspot, vous pouvez installer et activer l’extension WordPress dans votre zone d’administration. Ensuite, allez dans Image Map Hotspot  » All Image Map Hotspot et cliquez sur le bouton ‘Add New’.

Donnez maintenant un nom à votre nouveau hotspot de carte d’image. Sélectionnez ensuite l’un des types d’affichage de l’infobulle. Vous pouvez faire apparaître les infobulles de la zone sensible en les survolant ou en les cliquant.

Une fois cela fait, cliquez sur « Enregistrer ».

Une fois cette étape franchie, ajoutons votre image.

Pour ce faire, il suffit de cliquer sur le bouton « Téléverser une image ».

Cela ouvrira la bibliothèque de médias, où vous pourrez téléverser une nouvelle image ou sélectionner une image existante.

Vous pouvez ensuite ajouter des points chauds à votre carte-image. Pour ce faire, il vous suffit de cliquer sur le bouton « Ajouter un point ».

Une fenêtre contextuelle apparaît alors pour vous permettre de configurer votre hotspot d’images interactif.

Tout d’abord, accédez à l’onglet « Marqueur ». C’est ici que vous pouvez personnaliser l’aspect de l’image de la zone sensible. Pour modifier les icônes, vous pouvez cliquer sur le signe « + » à côté des champs « Icônes » et/ou « Icônes de survol ».

Icônes » désigne le symbole par défaut de la zone sensible lorsque l’utilisateur ne clique pas dessus ou ne la survole pas. Quant à « Icônes en survol », il s’agit du symbole qui apparaît lorsque l’utilisateur clique ou survole le hotspot.

Maintenant, allez-y et sélectionnez une icône pour remplacer l’option par défaut actuelle. L’extension propose un large choix.

Une fois que vous avez fait votre choix, il vous suffit de cliquer dessus et d’appuyer sur le bouton « Fermer ».

Une fois les images de votre hotspot modifiées, vous pouvez changer les couleurs des icônes.

L’extension vous permet de rendre la couleur de l’icône du hotspot par défaut différente de la couleur du survol de l’icône. De cette façon, les utilisateurs peuvent facilement savoir si un hotspot est actif lorsqu’ils cliquent ou survolent l’icône.

Pour modifier la couleur, il suffit de cliquer sur le bouton carré de sélection de la couleur et de sélectionner la couleur souhaitée.

Vous pouvez ensuite cliquer n’importe où sur la page pour passer à un autre paramètre.

Vous pouvez également personnaliser la taille de l’icône du hotspot sur le bureau. Plus le nombre est élevé, plus l’icône est grande.

Lorsque vous êtes satisfait de l’aspect de l’icône, cliquez sur « Enregistrer ».

Faites défiler la page vers le haut et passez à l’onglet « Contenu ». C’est ici que vous pouvez personnaliser le texte et l’apparence de l’infobulle.

L’extension vous donne le choix entre 4 modèles, afin que vous puissiez choisir celui qui convient le mieux à la conception de votre site.

Par ailleurs, veillez à remplacer le contenu du titre par défaut par votre propre texte.

En fonction de la conception de votre site, il se peut que vous souhaitiez agrandir la taille de la police et modifier la couleur du texte pour en améliorer la lisibilité.

Lorsque vous êtes satisfait des paramètres, cliquez simplement sur « Enregistrer ».

Le dernier onglet est « Lien ». Ici, vous avez la possibilité de faire en sorte que le texte de votre infobulle soit hyperlié, afin que les utilisateurs puissent être redirigés vers une autre page.

Si vous souhaitez le faire, sélectionnez « Oui » dans le champ « Do you Link Title ?

Ensuite, insérez l’URL de votre lien de titre dans le champ approprié et choisissez si vous voulez que le lien s’ouvre dans un nouvel onglet ou non.

Enfin, cliquez sur « Enregistrer ».

Un nouveau hotspot devrait maintenant apparaître sur votre image, que vous pouvez faire glisser jusqu’à la position souhaitée.

Vous pouvez également répéter les mêmes étapes que précédemment pour créer d’autres points chauds de l’image.

Une fois votre carte-image configurée, vous pouvez cliquer à nouveau sur le bouton « Enregistrer ».

Pour ajouter le hotspot d’image à l’une de vos pages, publications et/ou widgets, vous pouvez copier le shortcode au-dessus de l’image.

Après cela, il suffit de coller le shortcode dans un bloc de shortcodes sur votre widget, page ou publication dans l’éditeur de blocs. Vous pouvez en savoir plus sur la façon de procéder dans notre guide étape par étape sur l ‘ajout et l’utilisation de shortcodes dans WordPress.

Voici à quoi ressemble notre hotspot d’images interactif :

Découvrez d’autres fonctions de conception passionnantes pour votre site WordPress

Outre la création d’images interactives, il existe bien d’autres moyens de rendre la conception de votre site attrayante. Voici quelques guides pour vous aider :

• Comment ajouter le défilement infini à votre site WordPress (étape par étape)
• Comment créer un plan de site visuel sur WordPress (étape par étape)
• Comment créer une barre flottante collante en bas de page dans WordPress
• Comment ajouter un redimensionnement de police dans WordPress pour l’accessibilité
• Comment ajouter un bouton « cliquer pour appeler » dans WordPress (étape par étape)
• Comment ajouter une barre de défilement personnalisée dans WordPress
• Comment ajouter une barre de progression dans vos publications WordPress
• Comment créer un séparateur de forme personnalisé dans WordPress
• Comment ajouter un News Ticker défilant dans WordPress

Nous espérons que cet article vous a aidé à apprendre comment ajouter facilement des hotspots d’images dans WordPress. Vous pouvez également consulter notre guide ultime des astuces de la barre latérale de WordPress pour obtenir un maximum de résultats et nos choix d’experts des meilleurs constructeurs de thèmes WordPress.

Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.