Comment ajouter des hotspots d'image dans WordPress (La méthode facile) 

Imaginez une photo de chambre stylisée où chaque article (la lampe, le cadre de lit, le coussin décoratif) possède une étiquette cliquable qui renvoie à sa page produit. C'est un hotspot d'image, et cela peut remplacer une grille de produits entière par une seule image.

J'ai moi-même utilisé le bloc Hotspot de SeedProd sur des pages de produits et j'ai eu des info-bulles en ligne en une dizaine de minutes. Dans ce tutoriel, je vais vous montrer comment ajouter des hotspots d'image dans WordPress étape par étape, sans code.

Voici quelques utilisations concrètes :

• Mise en scène de produits e-commerce : Étiquetez chaque article d'une photo de pièce (cadre de lit, lampe, coussins) avec un lien vers chaque page produit. Une image remplace une grille de produits entière.
• Schémas d'e-learning : Étiquetez des tableaux d'anatomie, des cartes historiques ou des schémas techniques sans surcharger l'image de texte.
• Visites virtuelles immobilières : Ajoutez des hotspots aux photos de pièces avec les dimensions, les caractéristiques ou les attractions à proximité indiquées.
• Photographie d'événements : Identifiez les personnes sur une photo de groupe en étiquetant les noms ou les identifiants de réseaux sociaux.

Ajouter des hotspots d'image à votre site WordPress est un excellent moyen de le rendre plus interactif. Lorsque les visiteurs interagissent avec vos cartes d'image, ils passent plus de temps sur votre site, ce qui contribue à réduire votre taux de rebond.

De plus, la création d'images hotspots interactives peut améliorer l'expérience utilisateur, ce qui, à son tour, peut augmenter vos taux de conversion.

Maintenant que vous savez ce que sont les hotspots d'image, vous avez probablement quelques questions. Comment créer des images hotspots et quelle est la manière la plus simple de les ajouter à votre site WordPress ?

Nous vous montrerons comment faire cela ensuite.

Comment ajouter des hotspots d'image dans WordPress

Il existe plusieurs façons d'ajouter des hotspots d'image à votre site WordPress. Vous pouvez utiliser un plugin de hotspot d'image WordPress, un thème WordPress avec fonctionnalité de hotspot comme Divi, ou en coder un vous-même avec HTML et CSS personnalisé.

La manière la plus simple d'ajouter des hotspots d'image à votre site WordPress est d'utiliser un constructeur de site web par glisser-déposer comme SeedProd.

Note : Le bloc Hotspot nécessite SeedProd Pro ou une version supérieure. Si vous utilisez la version gratuite, il existe des plugins de hotspots d'images gratuits sur WordPress.org qui prennent en charge jusqu'à 6 hotspots par image sans frais.

Le bloc Hotspot de SeedProd gère le positionnement, les infobulles et l'animation par glisser-déposer. Aucun shortcode ni CSS requis.

Dans ce guide, j'utiliserai SeedProd pour ajouter des hotspots d'images à WordPress. Suivez les étapes ci-dessous pour commencer.

Étape 1. Installer et activer SeedProd

Tout d'abord, rendez-vous sur le site web de SeedProd et téléchargez le plugin. Bien que SeedProd ait une version gratuite, nous utiliserons SeedProd Pro pour ce tutoriel car il inclut le bloc Hotspot d'images.

Une fois que vous avez choisi votre plan tarifaire et téléchargé le fichier zip du plugin, vous devrez l'installer et l'activer sur votre site web WordPress. Vous pouvez consulter ce guide sur l'installation d'un plugin WordPress si vous avez besoin d'aide pour cette étape.

Après avoir ajouté SeedProd à votre site WordPress, accédez à la page SeedProd » Paramètres et entrez votre clé de licence produit.

Vous pouvez trouver la clé dans la section téléchargements de votre tableau de bord de compte SeedProd.

Une fois que vous avez entré votre clé, cliquez sur le bouton Vérifier la clé pour débloquer vos fonctionnalités premium.

Étape 2. Choisissez un thème WordPress ou un modèle de page de destination

Maintenant que vous avez confirmé vos paramètres de licence, vous êtes prêt à commencer à construire avec SeedProd. Pour ce faire, vous devrez d'abord décider quel type de mise en page vous souhaitez créer.

Dans SeedProd, vous pouvez soit créer des pages de destination individuelles, soit des sites web WordPress complets avec son constructeur de thèmes. À partir de là, vous pouvez les personnaliser avec le même éditeur glisser-déposer.

Pour ce guide, nous allons créer une page de destination autonome. Cependant, vous pouvez suivre ce guide sur la création d'un thème WordPress personnalisé si vous préférez cette approche, puis revenir à l'étape 3 de ce tutoriel pour apprendre à ajouter des hotspots d'images.

Puisque nous créons une mise en page de page de destination, allons à SeedProd » Pages de destination, faites défiler la section des modes de page de destination et cliquez sur le bouton Ajouter une nouvelle page de destination.

Cela vous mènera à la bibliothèque de modèles de pages de destination préconçus, où vous pourrez choisir un design qui correspond le mieux aux besoins de votre entreprise. Chaque modèle est 100 % réactif sur mobile, avec des designs pour divers cas d'utilisation, y compris le fitness, l'immobilier, le marketing numérique, et plus encore.

Ne vous inquiétez pas si vous ne trouvez rien de convenable. Vous pouvez personnaliser chaque centimètre du modèle jusqu'à ce qu'il ait l'apparence que vous souhaitez. Alors, allez-y et choisissez un modèle en le survolant et en cliquant sur l'icône de coche.

Sur l'écran suivant, vous pouvez donner un nom et une URL à votre page, puis cliquer sur le bouton Enregistrer et commencer à modifier la page pour la lancer dans l'éditeur visuel de SeedProd.

Étape 3. Ajoutez le bloc Hotspot WordPress

Le constructeur de pages de SeedProd est super facile à naviguer. Vous verrez différentes sections et blocs dans le panneau de gauche et un aperçu de page en direct sur la droite.

Cliquez n'importe où sur l'aperçu pour modifier le contenu de n'importe quel élément. Par exemple, cliquer sur le bloc de texte ouvre un panneau où vous pouvez taper votre propre message de bienvenue ou description.

Et dans le bloc de formulaire d'opt-in, vous pouvez personnaliser vos champs de formulaire, changer la couleur d'arrière-plan du bouton de soumission, et plus encore.

Avant d'ajouter le widget de point d'intérêt d'image à votre page, trouvons l'endroit parfait, comme la première image de la page.

Vous devrez supprimer ce bloc d'abord pour faire de la place pour l'image du point d'intérêt, alors survolez-le jusqu'à ce que vous voyiez une bordure orange, puis cliquez sur l'icône de la corbeille pour le supprimer.

Maintenant, vous pouvez trouver le bloc Point d'intérêt dans le panneau des blocs avancés et le faire glisser dans l'espace de votre page.

Ensuite, ouvrez les paramètres du bloc et ajoutez une image où vous souhaitez ajouter des icônes de point d'intérêt.

Vous pouvez soit télécharger une photo depuis votre ordinateur ou la médiathèque WordPress, soit choisir parmi des milliers d'images de stock (disponibles dans les plans SeedProd plus et supérieurs).

Après avoir ajouté une image, vous pouvez créer votre premier point d'intérêt.

Développez simplement le placeholder du point d'intérêt et entrez votre description de point d'intérêt. C'est ce qui apparaîtra lorsque les utilisateurs cliqueront ou survoleront l'icône du point d'intérêt.

Vous pouvez changer la position de l'icône circulaire du point d'intérêt en faisant glisser les curseurs d'orientation verticale et horizontale. De plus, vous pouvez changer la couleur et l'animation de l'icône pour la faire ressortir davantage.

De plus, en activant les Paramètres avancés, vous pouvez choisir une étiquette, entrer un lien et sélectionner des icônes et des tailles personnalisées à partir de la bibliothèque Font Awesome.

Pour rendre vos points d'intérêt plus accrocheurs, vous pouvez ouvrir la section Info-bulles et choisir les paramètres de déclenchement et d'animation.

Ensuite, cliquer sur l'onglet Avancé vous permet de choisir plus d'options de formatage et de style, y compris la typographie, les couleurs de texte, l'espacement, et plus encore.

Pour ajouter plus de points d'intérêt à votre image, répétez cette étape autant de fois que vous le souhaitez. N'oubliez pas de cliquer sur le bouton Enregistrer pour conserver vos modifications.

J'ai configuré le bloc Point d'intérêt sur une page produit et les info-bulles étaient actives en environ 10 minutes. Les curseurs de positionnement sont plus précis que ce à quoi je m'attendais.

Maintenant, continuez à personnaliser votre page jusqu'à ce qu'elle ressemble exactement à ce que vous voulez.

Par exemple, vous pouvez utiliser le bloc Accordéon pour ajouter une section FAQ à votre page, le bloc Vidéo pour afficher des vidéos YouTube ou Vimeo, le bloc Google Maps pour afficher votre emplacement, et plus encore.

Étape 4. Configurer vos paramètres

Cliquez sur l'onglet Connecter en haut pour intégrer votre service de marketing par e-mail, ou sur l'onglet Paramètres de la page pour configurer les options de référencement, d'analyse et de domaine personnalisé. Celles-ci sont facultatives mais valent la peine d'être configurées avant de publier.

Étape 5. Publiez votre image Hotspot dans WordPress

Après avoir configuré vos paramètres, vous êtes prêt à publier votre page de destination et à rendre votre image de point d'intérêt visible sur votre site Web.

Pour ce faire, cliquez sur la flèche du bouton Enregistrer et sélectionnez Publier.

Vous pouvez maintenant afficher votre page pour voir vos points d'intérêt d'image en action !

Et voici un aperçu de l'info-bulle du point d'intérêt :

FAQ sur l'ajout de hotspots d'images dans WordPress

À quoi puis-je utiliser les points d'intérêt d'image ?

Les boutiques de commerce électronique les utilisent pour étiqueter des produits dans des photos de style de vie, en reliant chaque article directement à sa page produit. Vous pouvez également utiliser des points d'intérêt sur des diagrammes d'apprentissage en ligne pour étiqueter des parties sans encombrer l'image, sur des photos immobilières pour mettre en évidence les caractéristiques d'une pièce, ou sur des photos d'événements pour identifier les personnes sur une photo de groupe.

Les points d'intérêt d'image fonctionnent-ils sur les appareils mobiles ?

Oui. Le bloc Point d'intérêt de SeedProd est responsive sur mobile, et les info-bulles peuvent être déclenchées par un toucher sur les écrans tactiles. Vous pouvez également afficher ou masquer des éléments spécifiques sur ordinateur par rapport au mobile dans l'onglet Avancé des paramètres du bloc.

Existe-t-il un plugin gratuit pour les points d'intérêt d'image dans WordPress ?

Oui, il existe des plugins gratuits de points d'intérêt d'image sur WordPress.org. La plupart prennent en charge jusqu'à 6 points d'intérêt par image dans le niveau gratuit, et certains ont des limitations de compatibilité avec les thèmes. Si vous avez besoin de points d'intérêt illimités ou si vous souhaitez la flexibilité de positionnement et de style d'un éditeur visuel complet, SeedProd Pro mérite d'être considéré.

Puis-je personnaliser la conception de mes points d'intérêt ?

Oui. Dans SeedProd, vous pouvez modifier la couleur de l'icône, le style d'animation, la position et l'apparence de l'info-bulle. Les paramètres avancés vous permettent de choisir des icônes personnalisées dans la bibliothèque Font Awesome et d'ajouter des liens à chaque marqueur.

Vous savez maintenant comment ajouter des images à points d'intérêt à WordPress sans utiliser de shortcodes, de CSS personnalisé ou d'extensions inutiles. Mieux encore, il ne faut que quelques minutes pour créer des points d'intérêt d'image interactifs avec SeedProd.

Alors, qu'attendez-vous ?

Si vous avez apprécié ce tutoriel, vous pourriez également aimer les guides WordPress suivants :

• Comment ajouter un bouton à votre en-tête WordPress
• Comment créer des compteurs de nombres animés dans WordPress
• Comment ajouter des curseurs de photos avant/après à WordPress

Merci de votre lecture ! Nous serions ravis d'entendre vos réflexions, alors n'hésitez pas à rejoindre la conversation sur YouTube, X et Facebook pour plus de conseils et de contenu utiles pour développer votre entreprise.