Vous voulez rendre vos images WordPress plus interactives et attrayantes ? Les points chauds d'image 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 mettre en évidence des points sur une carte, identifier des membres d'une équipe sur une photographie et souligner les caractéristiques d'un produit. D'après nos recherches, nous avons trouvé 2 moyens faciles d'ajouter des points chauds d'image dans WordPress.
Prêt à améliorer l'expérience visuelle de votre site Web ? Commençons.
Quand ajouter des points chauds à vos images dans WordPress
Les points chauds d'image sont des zones cliquables qui peuvent transformer de simples images en contenu interactif que les visiteurs peuvent explorer. Mais quand devriez-vous envisager d'ajouter des points chauds à vos images ?
Un bon moment pour utiliser des points chauds est lorsque vous souhaitez présenter différentes parties d'une image de produit.
Disons que vous vendez un nouveau téléphone. Vous pouvez ajouter des points chauds pour signaler son appareil photo, son écran et d'autres caractéristiques. Cela aide les clients à en apprendre davantage sur le produit sans lire de longues descriptions.
De nombreux sites Web d'articles ménagers utilisent également des annotations d'image pour mettre en évidence les détails du produit des articles affichés dans des photos mises en scène.
Les points chauds sont également parfaits pour rendre les infographies et la visualisation de données plus attrayantes. Au lieu de bourrer toutes les informations dans une seule image, vous pouvez cacher des détails supplémentaires derrière des points chauds. Lorsque les gens cliquent sur différentes parties de l'infographie, ils peuvent voir plus de faits et de chiffres.
Si vous gérez un site web d'eLearning, les hotspots peuvent améliorer l'expérience utilisateur et rendre vos leçons plus interactives. Par exemple, vous pourriez ajouter des hotspots à une carte, permettant aux étudiants de cliquer pour en savoir plus sur différents pays ou monuments.
Dans cet esprit, examinons comment ajouter facilement des hotspots d'image à votre site web 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 hotspots d'image avec SeedProd (pour les pages de destination/thèmes personnalisés)
- Méthode 2 : Ajouter des hotspots d'image avec le plugin Image Hotspot (gratuit mais limité)
- Plus de conseils de conception WordPress que vous devriez connaître
Méthode 1 : Ajouter des hotspots d'image avec SeedProd (pour les pages de destination/thèmes personnalisés)
Cette première méthode utilise SeedProd, un constructeur de pages par glisser-déposer, pour ajouter des hotspots d'image à votre site web WordPress. Nous recommandons cette méthode si vous créez une page de destination personnalisée ou un thème WordPress personnalisé et que vous souhaitez utiliser une plateforme avec un bloc de hotspots d'image.
Nous avons testé d'autres constructeurs de pages par le passé comme Divi et WPBakery, mais SeedProd arrive toujours en tête.
Ce que nous aimons chez SeedProd, c'est qu'il offre plus de 350 modèles de pages de destination et kits de thèmes pour différentes catégories d'industries, des boutiques en ligne et services de nettoyage aux entreprises SaaS. Il y a donc une option pour chaque type de site.
Une chose à considérer est que si vous souhaitez simplement une solution gratuite pour créer des points d'intérêt sur les images, cette méthode n'est peut-être pas pour vous. En effet, le bloc de points d'intérêt de SeedProd n'est disponible que dans les versions payantes de SeedProd. Dans ce cas, nous vous recommandons d'opter pour la méthode 2.
Pour plus d'informations sur les fonctionnalités et les prix du plugin, consultez notre avis sur SeedProd.
Une fois que vous avez acheté un plan SeedProd, vous pouvez télécharger et installer le plugin WordPress dans votre zone d'administration. Ensuite, allez dans SeedProd » Paramètres et entrez votre clé de licence. Vous trouverez ces informations sur la page de votre compte SeedProd.
Une fois terminé, cliquez simplement sur « Vérifier la clé ».
Après cela, accédez à SeedProd » Pages de destination.
Ensuite, cliquez sur « Ajouter une nouvelle page de destination ».
Vous verrez maintenant tous les modèles que SeedProd propose. Il existe des options pour une page de destination de liste d'attente virale, une page de destination pour les publicités Google, une page « bientôt disponible », et plus encore.
Assurez-vous de parcourir les options et de les prévisualiser une par une afin de pouvoir choisir celle qui correspond le mieux à vos besoins.
Une fois que vous avez choisi un modèle, survolez simplement votre sélection.
Ensuite, cliquez sur le bouton de la coche orange.
Maintenant, une nouvelle fenêtre contextuelle apparaîtra, vous demandant de nommer la page et d'insérer son slug d'URL.
Après avoir fait cela, cliquez sur « Enregistrer et commencer à modifier la page ».
Cela ouvrira l'éditeur glisser-déposer de SeedProd.
Il fonctionne de manière similaire à l'éditeur de blocs WordPress, où vous pouvez faire glisser et déposer des blocs sur la page et cliquer dessus pour les personnaliser comme vous le souhaitez.
Pour créer des points d'intérêt sur les images, vous pouvez trouver le bloc ‘Hotspot’ dans la barre latérale gauche.
Ensuite, il suffit de le faire glisser et de le déposer sur votre page.
Ensuite, vous devez télécharger l'image WordPress sur laquelle vous souhaitez ajouter des points d'intérêt.
Vous pouvez le faire en cliquant sur le bloc ‘Hotspot’ et en choisissant ‘Utiliser votre propre image’ ou ‘Utiliser une image de stock’ pour sélectionner une image.
La première option ouvrira la médiathèque où vous pourrez choisir une image existante ou en télécharger une nouvelle. Si la taille est assez grande, vous pouvez consulter notre guide sur comment télécharger de grandes images dans WordPress.
Une fois que vous avez téléchargé une image, vous pouvez saisir du texte alternatif pour décrire l'image pour les moteurs de recherche et les outils de lecture d'écran.
Vous pouvez également personnaliser la taille et l'alignement de l'image.
Après cela, vous pouvez faire défiler vers le bas pour commencer à ajouter vos points d'intérêt.
Vous pouvez le faire en cliquant sur le bouton ‘+ Ajouter un point d’intérêt’.
Un point orange apparaîtra maintenant sur votre image. Vous pouvez ajuster sa position en faisant glisser les barres d'orientation horizontale et verticale.
De plus, vous pouvez insérer le texte qui doit apparaître lorsque le curseur d'un utilisateur survole le point d'intérêt.
En descendant, vous pouvez changer la couleur du point d'intérêt.
Cliquez simplement sur les paramètres ‘Couleur’ pour choisir une couleur qui correspond à votre marque et au design de votre site web.
Si vous continuez à faire défiler vers le bas, vous pouvez activer le bouton bascule ‘Paramètres avancés’.
C'est ici que vous pouvez ajouter un lien vers le texte de l'info-bulle de votre point d'accès afin que les utilisateurs puissent être redirigés vers la page souhaitée.
En outre, vous pouvez choisir une icône personnalisée pour remplacer la forme circulaire par défaut.
Pour ce faire, cliquez simplement sur le bouton « Choisir une icône ».
Une fenêtre contextuelle apparaîtra où vous pourrez choisir parmi diverses icônes de la bibliothèque de SeedProd. Vous pouvez également choisir des icônes dans Font Awesome si vous avez besoin de plus d'options.
Pour utiliser une icône, cliquez simplement dessus.
Une fois que vous avez choisi une icône, vous pouvez faire glisser la barre « Taille de l'icône » pour rendre la forme plus petite ou plus grande, selon vos préférences.
Vous pouvez ensuite répéter les étapes pour créer d'autres points d'accès interactifs à l'image.
Ci-dessous, vous pouvez ajouter un effet animé à vos points d'accès d'image. Il existe 2 options : « Battement doux » et « Expansion ».
Passons maintenant à la section « Info-bulle ».
Ici, vous pouvez modifier la position de l'info-bulle (droite, gauche, au-dessus ou en dessous du point d'accès) et modifier le déclencheur.
Si vous sélectionnez « Clic », cela signifie que l'info-bulle s'affichera lorsque l'utilisateur cliquera sur le point d'accès. En revanche, « Survol » signifie que l'info-bulle apparaîtra lorsque le curseur la survolera.
Ensuite, vous pouvez modifier la durée de l'info-bulle.
Cela fait simplement référence au temps qu'il faudra pour que l'info-bulle apparaisse après que l'utilisateur ait survolé ou cliqué sur le point d'accès. Si vous souhaitez que le texte s'affiche instantanément, réglez-le simplement sur 0.
Vous pouvez également désactiver la flèche de l'info-bulle, selon vos préférences.
Maintenant, si vous passez à l'onglet « Avancé », vous pouvez personnaliser davantage l'apparence de l'image.
Par exemple, vous pouvez ajouter une ombre portée ou ajuster le remplissage et la marge.
Une fois que vous avez terminé, cliquez simplement sur le bouton « Enregistrer » dans le coin supérieur droit.
Ensuite, cliquez sur « Publier » pour rendre la page en ligne.
Et voilà ! Assurez-vous de visualiser la page sur mobile, sur ordinateur et sur tablette pour voir si elle est belle sur tous les appareils.
Voici à quoi ressemble notre point d'accès interactif à l'image :
Méthode 2 : Ajouter des hotspots d'image avec le plugin Image Hotspot (gratuit mais limité)
Si l'utilisation d'un constructeur de pages et le changement de thème vous semblent un peu excessifs, vous pouvez utiliser à la place le plugin gratuit WordPress Image Hotspot. C'est l'un des meilleurs plugins de points d'intérêt d'image que nous ayons essayés et une excellente alternative à la méthode 1.
Cependant, notez que la version gratuite ne permet d'ajouter que jusqu'à 6 points d'intérêt sur une seule image.
Pour utiliser Image Hotspot, vous pouvez installer et activer le plugin WordPress dans votre zone d'administration. Ensuite, allez dans Image Map Hotspot » All Image Map Hotspot et cliquez sur le bouton « Ajouter nouveau ».
Maintenant, donnez un nom à votre nouveau point d'intérêt d'image. Sélectionnez ensuite l'un des types d'affichage de l'infobulle. Vous pouvez faire apparaître les infobulles du point d'intérêt interactif en survolant ou en cliquant.
Une fois terminé, cliquez sur « Enregistrer ».
Une fois cela terminé, ajoutons votre image.
Pour ce faire, cliquez simplement sur le bouton « Télécharger l'image ».
Cela ouvrira la médiathèque, où vous pourrez télécharger une nouvelle image ou en sélectionner une existante.
Ensuite, vous pouvez ajouter des points d'intérêt à votre carte d'image. Cliquez simplement sur le bouton « Ajouter un point » pour ce faire.
Une fenêtre contextuelle apparaîtra maintenant pour que vous puissiez configurer votre point d'intérêt d'image interactif.
Tout d'abord, accédez à l'onglet « Marqueur ». C'est là que vous pouvez personnaliser l'apparence de l'image du point d'intérêt. Pour changer les icônes, vous pouvez cliquer sur le signe « + » à côté des champs « Icônes » et/ou « Icônes de survol ».
« Icônes » fait référence au symbole par défaut du point d'intérêt lorsqu'il n'est pas cliqué ou survolé. Pendant ce temps, « Icônes de survol » est le symbole qui apparaît lorsque l'utilisateur clique ou survole le point d'intérêt.
Maintenant, sélectionnez une icône pour remplacer l'option par défaut actuelle. Le plugin en propose beaucoup parmi lesquelles choisir.
Une fois que vous avez fait votre choix, cliquez dessus et appuyez sur le bouton « Fermer ».
Avec vos images de point d'intérêt configurées, vous pouvez changer les couleurs des icônes.
Le plugin vous permet de rendre la couleur par défaut de l'icône du point d'intérêt différente de la couleur au survol de l'icône. De cette façon, les utilisateurs peuvent facilement savoir si un point d'intérêt est actif lorsqu'ils cliquent dessus ou le survolent.
Pour changer la couleur, cliquez simplement sur le bouton carré de sélection de couleur et choisissez la couleur que vous souhaitez utiliser.
Vous pouvez ensuite cliquer n'importe où sur la page pour passer à un autre réglage.
Vous pouvez également personnaliser la taille de l'icône du point d'intérêt sur ordinateur. Plus le chiffre est élevé, plus l'icône sera grande.
Une fois que vous êtes satisfait de l'apparence de l'icône, cliquez simplement sur « Enregistrer ».
Faites maintenant défiler vers le haut et basculez vers l'onglet « Contenu ». C'est ici que vous pouvez personnaliser le texte et l'apparence de l'infobulle.
Le plugin vous propose 4 modèles parmi lesquels choisir, vous pouvez donc sélectionner celui qui convient le mieux au design de votre site web.
En dehors de cela, assurez-vous de remplacer le contenu du titre par défaut par votre propre texte.
Et en fonction du design de votre site web, vous voudrez peut-être agrandir la taille de la police et changer la couleur du texte pour améliorer sa lisibilité.
Lorsque vous êtes satisfait des réglages, cliquez simplement sur « Enregistrer ».
Le dernier onglet est « Lien ». Ici, vous avez la possibilité de rendre le texte de votre infobulle hyperlien, afin que les utilisateurs puissent être redirigés vers une autre page.
Si vous souhaitez le faire, sélectionnez « Oui » dans le réglage « Voulez-vous lier le titre ? ».
Après cela, insérez l'URL de votre lien de titre dans le champ approprié et choisissez si vous souhaitez que le lien s'ouvre dans un nouvel onglet ou non.
Enfin, cliquez sur « Enregistrer ».
Maintenant, un nouveau point d'intérêt devrait apparaître sur votre image, que vous pouvez faire glisser à la position souhaitée.
Vous pouvez également répéter les mêmes étapes qu'auparavant pour créer d'autres points d'intérêt d'image.
Une fois que votre carte d'image est configurée, vous pouvez cliquer à nouveau sur le bouton « Enregistrer ».
Pour ajouter le point d'intérêt d'image à n'importe laquelle de vos pages, articles et/ou widgets, vous pouvez copier le shortcode au-dessus de l'image.
Après cela, collez simplement le shortcode dans un bloc de shortcode sur votre widget, page ou article dans l'éditeur de blocs. Vous pouvez en apprendre davantage sur la façon de faire cela dans notre guide étape par étape sur comment ajouter et utiliser des shortcodes dans WordPress.
Voici à quoi ressemble notre point d'intérêt d'image interactif :
Plus de conseils de conception WordPress que vous devriez connaître
En plus de créer des points d'intérêt d'image interactifs, il existe de nombreuses autres façons de rendre le design de votre site Web attrayant. Voici quelques guides pour vous aider :
- Éléments de conception clés pour un site web WordPress efficace
- Comment ajouter le défilement infini à votre site WordPress (étape par étape)
- Comment ajouter le défilement infini à votre site WordPress (étape par étape)
- Comment créer un plan de site visuel dans WordPress (étape par étape)
- Comment créer une barre de pied de page flottante et fixe dans WordPress
- Comment ajouter un redimensionneur 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 articles WordPress
- Comment créer un séparateur de forme personnalisé dans WordPress
- Comment ajouter un bandeau d'actualités défilant dans WordPress
Nous espérons que cet article vous a aidé à apprendre comment ajouter facilement des points d'intérêt d'image dans WordPress. Vous voudrez peut-être aussi consulter notre guide ultime des astuces de barre latérale WordPress pour obtenir des résultats maximums et nos sélections d'experts des meilleurs constructeurs de thèmes WordPress.
Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.
Vous avez une question ou une suggestion ? Veuillez laisser un commentaire pour lancer la discussion.