Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

Vous souhaitez rendre vos images WordPress plus interactives et attrayantes ? Les hotspots d’images transforment les images statiques en contenu dynamique en ajoutant des zones cliquables qui révèlent des informations supplémentaires.

Nous les avons expérimentés nous-mêmes pour présenter des points sur une carte, identifier des membres d’une équipe sur une photo et mettre en avant les fonctionnalités d’un produit. Nos recherches nous ont permis de trouver deux façons simples d’ajouter des points chauds d’image dans WordPress.

Prêt à améliorer l’expérience visuelle de votre site ? Premiers pas.

How to Add Image Hotspots in WordPress

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 annotations sur les images pour mettre en évidence les détails des articles présentés dans les photos staging.

IKEA's image hotspot example

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 :

💡 Vous êtes trop occupé pour concevoir votre site WordPress ? Laissez notre équipe d’experts en conception WordPress créer un site époustouflant, optimisé pour le référencement, qui reflète parfaitement votre vision – pendant que vous vous concentrez sur ce qui compte le plus.

Planifiez votre consultation gratuite dès aujourd’hui !

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.

Nous avons testé d’autres constructeurs de pages dans le passé, comme Divi et WPBakery, mais SeedProd arrive toujours en tête.

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é”.

Enter your license key

Ensuite, naviguez vers SeedProd ” Landing Pages.

Ensuite, cliquez sur ” Ajouter une nouvelle page d’atterrissage “.

Adding a new landing page in SeedProd

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.

SeedProd's template library

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.

Choosing a SeedProd template

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”.

Inserting the landing page details in SeedProd

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.

The SeedProd drag-and-drop interface

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.

Choosing the SeedProd Hotspot block

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.

Uploading an image to the SeedProd Hotspot block

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.

Adding an alt text to the image hotspot in SeedProd

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”.

Adding a hotspot to the image in SeedProd

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.

Customizing the image hotspot settings in SeedProd

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.

Changing the hotspot color in SeedProd

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.

Enabling the hotspot block's advanced settings in SeedProd

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”.

Replacing the hotspot icon in SeedProd

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.

Choosing an icon for the hotspot in SeedProd

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’.

Adding an animated effect to the hotspot block in SeedProd

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.

Adding a tooltip trigger to the hotspot block in SeedProd

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.

Setting the tooltip duration for the hotspot block in SeedProd

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.

Configuring the SeedProd advanced block settings

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.

Publishing a landing page with an image hotspot made with SeedProd

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 :

An image hotspot example made with SeedProd

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 page et le changement de thème vous semblent un peu trop contraignants, vous pouvez utiliser le plugin gratuit WordPress Image Hotspot à la place. C’est l’une des meilleures extensions de points d’accès aux images que nous ayons essayées et c’est une excellente alternative à la méthode 1.

Ajoutéé que la version gratuite permet uniquement d’ajouter jusqu’à 6 hotspots sur une même 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’.

Adding a new image in the Image Hotspot plugin

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

Une fois cela fait, cliquez sur “Enregistrer”.

Saving a new image hotspot file in the Image Hotspot plugin

Une fois cette étape franchie, ajoutons votre image.

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

Uploading a new image to the Image Hotspot plugin

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”.

Adding a hotspot to an image with the Image Hotspot plugin

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.

Changing the default hotspot icon with the Image Hotspot plugin

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”.

Choosing a hotspot icon in the Image Hotspot plugin

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.

Customizing the Image Hotspot plugin's hotspot appearance settings

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.

Choosing a color for the default hotspot with the Image Hotspot plugin

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”.

Changing the hotspot's icon size with the Image Hotspot plugin

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.

Configuring the hotspot's tooltip text with the Image Hotspot plugin

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”.

Saving the tooltip settings of the Image Hotspot plugin

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”.

Adding a link to the hotspot's tooltip text with the Image Hotspot plugin

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.

Dragging the newly created hotspot on the image with the Image Hotspot plugin

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.

Copying the image hotspot's shortcode made with the Image Hotspot plugin

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 :

Image hotspot example made with the Image Hotspot plugin

Plus d’astuces de conception WordPress à connaître

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 :

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.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

Comments

  1. Congratulations, you have the opportunity to be the first commenter on this article.
    Have a question or suggestion? Please leave a comment to start the discussion.

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.