Comment créer et utiliser un point d'accès d'image dans votre site Web WordPress

Les images et les vidéos rendent toujours les sites Web plus attrayants. Mais une image de point chaud sur votre site Web WordPress peut battre tous les records précédents d’utilisation d’images normales. Les images de points chauds contiennent des zones cliquables qui offriront plus d’informations aux visiteurs de votre site. Avant, créer un hotspot d’image n’était pas si simple. 

Heureusement, désormais, grâce à l’aide de superbes modules WordPress, créer un hotspot d’image est devenu très simple. C'est même devenu le plus simple grâce à ElementsKit Ajouter sur.

ElementsKit est un module complémentaire tout-en-un pour Élémentor qui offre 85+ des widgets, 500+ des blocs, 25+ des pages d'accueil prêtes à l'emploi et bien d'autres. De plus, il propose des widgets gratuits, des widgets professionnels et des modules avancés qui amèneront la personnalisation de votre site à un niveau que vous ne pouvez pas imaginer. Vous pouvez même créer des images de points chauds interactifs en quelques minutes.

Ici, dans cet article, nous révélerons avec quelle facilité vous pouvez créer des images de points chauds avec ElementsKit. Vous apprendrez également à créer des cartes-images interactives. Non seulement des cartes d'images, mais vous pouvez également créer n'importe quelle image de point chaud après avoir lu cet article.

Qu’est-ce qu’un hotspot d’images interactif sur votre site WordPress ?

Les images de points chauds sont images interactives qui contiennent des icônes de points chauds sur l'image. Ces icônes de points d'accès contiennent des fenêtres contextuelles ou des info-bulles contenant des textes, des images, des liens, etc. 

La création d'images interactives vous aidera à fournir Plus d'informations à travers des zones cliquables. Lorsque vous ajouterez simplement une icône de point d’accès sur une image de point d’accès WordPress, cela attirera l’attention de vos visiteurs. 

De plus, vos utilisateurs ou visiteurs voudront passer plus de temps sur votre site grâce à des photos accrocheuses et informatives. En conséquence, vous constaterez une amélioration impressionnante de votre Taux de rebond et taux de conversion à cause des images de hotspot WordPress. 

Pourquoi devriez-vous créer des images de points chauds interactifs ?

Les images de points d'accès interactifs sur votre site WordPress attireront l'attention de vos visiteurs et réduiront la Taux de rebond. Même ces images peuvent être plus efficaces que les vidéos. Vous trouverez également de nombreux exemples d’images de hotspots performantes.

Mais vous devez vouloir savoir exactement quels avantages vous tirerez de ces images. Pourquoi devriez-vous déployer des efforts supplémentaires pour créer ces images ? 

Si vous vous posez ces questions, vous n'êtes certainement pas seul. J'ai également été confronté à ces questions lors de la création d'une image de point d'accès Elementor. Voici les réponses à vos questions sur les raisons pour lesquelles vous devriez déployer des efforts supplémentaires pour créer des points chauds d'images :

1. Les images interactives Hotspot vous aideront à interagir avec vos utilisateurs davantage. Utiliser une image sur votre site Web est toujours bénéfique. Mais ce sera davantage lorsque vous utiliserez une image de point chaud.

2. Cela vous aidera à fournir Plus d'informations à votre visiteur. Comme les images de points chauds contiennent des zones cliquables contenant des info-bulles ou des fenêtres. Ces fenêtres contiennent des photos, des textes, des liens, etc. pour fournir des informations complémentaires.

3. Les images de points chauds sont mobile réactif. 

En 2021 Statiste a découvert à partir d'une étude que « plus de 47 % des visiteurs de sites Web utilisent des appareils mobiles pour visiter des sites aux États-Unis ». 

Vous ne pouvez donc pas ignorer la nécessité d’une image mobile responsive.

4. Lorsque vous pouvez interagir davantage avec vos utilisateurs, vous pouvez également les conserver sur votre site WordPress. En conséquence, le Taux de rebond de votre site diminuera également.
5. Si vous ajoutez des points chauds pour créer des images interactives, cela augmentera l'expérience utilisateur et taux de conversion de votre site. Vous constaterez une amélioration visible pour l’ajout d’images de points chauds.

Maintenant, après avoir connu tous ces avantages, vous vous posez peut-être des questions. 

Comment créer des images Hotspots ? Quelle est la manière la plus simple de créer une zone réactive d’images pour votre site ? 

Droite?

Continuez à lire pour obtenir votre solution. 

Créez des images de points d'accès interactifs sur votre site Web WordPress avec ElementsKit

L'ajout d'images de points chauds à votre site Web vous aidera à interagir davantage avec vos visiteurs qu'auparavant. De plus, vos clients ne s’ennuient jamais en interagissant avec le contenu de votre site Web. 

Heureusement, vous pouvez désormais créer des images interactives pour votre site Web WordPress avec ElementsKit sans perdre beaucoup de temps. Outre le hotspot Image, vous pouvez créer Menu hors toile Elementor, effet d'échange d'image dans WordPress, etc sans codage.

Vous souhaitez en savoir plus sur ElementsKit ?

Puis lire ElementsKit : le meilleur module complémentaire pour Elementor article.

En utilisant le widget ElementsKit, vous pouvez créer des points chauds d'images interactifs en huit étapes simples. Vous vous sentez enthousiasmé par la façon dont vous pouvez faire cela ? 

Allons-y.

Étape 1 : Modifiez une nouvelle page avec Elementor pour créer des images interactives.

Tout d’abord, vous devez installer et activer ElementsKit. Ensuite, accédez à votre tableau de bord WordPress et visitez les pages >> ajouter de nouvelles pour créer un hotspot d'image interactif.

Après cela, cliquez sur le bouton Modifier avec Elementor pour créer une nouvelle image de point chaud.

Étape 2 : Recherchez et sélectionnez le widget de point d'accès.

Dans cette étape, vous devez rechercher un widget de point d'accès dans la zone de recherche de widget.

Maintenant, faites glisser le widget hotspot et ajoutez-le à la nouvelle section comme sur l'image.

Étape 3 : modifiez le contenu de vos points chauds d’image.

Après avoir ajouté le widget hotspot, il est maintenant temps de modifier le contenu du widget. Pour cela, choisissez le style et l’image d’arrière-plan depuis votre médiathèque WordPress ou votre ordinateur. J'utilise l'image de Google Maps ici. Maintenant, téléchargez-le.

Vous pouvez également modifier les éléments suivants avec le widget de point d'accès ElementsKit :

• Afficher l'éclat : Vous pouvez afficher et masquer la lueur qui apparaît autour du pointeur.
• Cliquez ou survolez : Cette option vous aidera à décider si vous souhaitez que vos info-bulles apparaissent au clic ou au survol. Si vous choisissez le survol, vos info-bulles s'afficheront au survol ou au clic lorsqu'un utilisateur clique sur les points chauds.
• Actif ou non : Vous pouvez également afficher ou masquer toutes les info-bulles avec cette option.

Après avoir modifié les éléments ci-dessus, ajoutez une info-bulle pour votre image cliquable de point chaud. Pour ce faire, cliquez sur la case marquée dans l'image.

Vous devez maintenant ajouter un titre et une description pour votre info-bulle. Pour ce faire, insérez un titre et une description pour votre info-bulle. 

Après cela, ajoutez une image appropriée pour votre info-bulle. Cela peut être n’importe quelle image. 

Vous devez maintenant ajuster la position de l'info-bulle. Vous pouvez déplacer votre pointeur de gauche à droite ou de haut en bas en utilisant l'option suivante. Réglez le pointeur. Vous pouvez également ajouter d'autres points chauds en cliquant sur le bouton Ajouter un élément.

Étape 4 : Personnalisez le style du contenu du hotspot d’images WordPress.

Dans cette étape, vous devez modifier le style du contenu de votre hotspot. Choisissez la couleur d’arrière-plan et l’image appropriées pour modifier le style de contenu par défaut de votre image de point d’accès Elementor. Maintenant, définissez le remplissage, la largeur et l'alignement de votre contenu par défaut.

Étape 5 : Personnalisez le style du pointeur pour créer des images interactives.

Dans cette étape, vous devez personnaliser le pointeur. Ici, vous pouvez personnaliser les zones suivantes :

• Couleur de l'arrière plan: Choisissez la couleur d'arrière-plan de votre pointeur.
• Taille du pointeur : Définissez la taille de votre pointeur. Vous pouvez l'agrandir en faisant glisser le cercle vers la droite.
• Rayon de la frontière : Cette option vous permettra de modifier le rayon de votre pointeur si vous le souhaitez.
• Boîte ombre: Vous pouvez ajouter une ombre avec le pointeur avec cette option.
• Type de bordure : Sélectionnez le type de bordure que vous souhaitez pour votre pointeur.
• Couleur des pointes : Personnalisez la couleur du point situé dans le pointeur.
• Couleur lumineuse : Modifiez la couleur de lueur par défaut qui apparaît autour du pointeur si vous le jugez nécessaire.

Étape 6 : Changer le style du titre de votre image de point d'accès.

Pour le style du titre, vous devez choisir la bonne typographie pour votre titre. Dans la section typographie, vous pouvez modifier les zones suivantes :

• Famille.
• Taille.
• Poids.
• Transformer.
• Style.
• Décoration.
• Hauteur de la ligne.
• L'espacement des lettres.

Vous devez également sélectionner la couleur du texte et définir la marge requise pour votre titre.

Étape 7 : Personnalisez le style de la description et de l'image.

Ici, vous devez modifier la description du contenu de l'info-bulle. Ce sera la même chose que la personnalisation du titre. Maintenant, définissez la position de l'image à l'endroit où vous souhaitez qu'elle apparaisse dans votre info-bulle. 

Enfin, modifiez la marge et la largeur de votre image selon votre envie.

Étape 8 : Publiez les modifications que vous avez apportées à l'image de votre point d'accès.

Enfin, après avoir effectué toutes les modifications, il est maintenant temps de publier. Cliquez sur le bouton de publication et vous serez prêt pour votre image de point d'accès.

Voici le résultat de ma carte d'images interactive de point d'accès :

Note:
Vous pouvez également effectuer une personnalisation avancée de votre image de point d'accès. Par exemple, vous pouvez rendre certaines parties collantes de votre image de hotspot. Vous pouvez également définir des conditions, des effets pour vos images. De plus, l’ajout d’une info-bulle avancée est ouvert pour vous. Vous pouvez également surveiller les modifications en cliquant sur le bouton réactif. Votre modification s'affichera sur un nouvel onglet lorsque vous cliquerez sur le bouton réactif.

Encore confus?

Regardez la vidéo de démonstration sur la façon d'utiliser le widget hotspot :

Pourquoi choisir ElementsKit pour créer des images de hotspots interactives ?

Il existe de nombreux modules complémentaires dans WordPress qui proposent un widget de point d'accès pour créer des images de point d'accès. 

Mais pourquoi devriez-vous éviter tous les autres modules complémentaires ? Pourquoi devez-vous choisir uniquement ElementsKit pour créer des images Hotspot interactives de haute qualité ?

Pourquoi est-il considéré comme un excellent outil pour Elementor ?

La version pro d'ElementsKit propose un widget de point d'accès. Il est donc normal que vous vous posiez ces questions. Les gens ne s'en soucient pas beaucoup lorsqu'ils utilisent une version gratuite d'un plugin. Mais c’est le cas lorsqu’ils utilisent une version payante. Parce que les gens veulent acheter le meilleur produit au moment où ils le paient. Vous n'êtes pas différent.

Voici les raisons pour lesquelles vous devriez opter pour ElementsKit plutôt que d’autres modules complémentaires :

• ElementsKit vous proposera excellent soutien. L'équipe d'assistance est toujours prête à proposer des solutions à tout problème que vous rencontrerez lors de l'utilisation de cet addon. De plus, vous obtiendrez la réponse la plus rapide à toutes vos requêtes. Vous obtiendrez difficilement ce support de la part d’autres extensions.
• En raison de sa convivial fonctionnalités, même les débutants n’ont aucun problème à l’utiliser. 

• Vous pouvez créer des images de points chauds à votre guise. La personnalisation avancée est également ouverte pour vous. Non seulement les images de points chauds, mais vous pouvez également créer un entête, bas de page, menu déroulant, etc. avec ElementsKit.

• ElementsKit ne s'est pas arrêté à offrir une excellente expérience utilisateur. Il est continuellement mis à jour pour répondre à vos besoins. De plus, c'est entièrement compatible avec Elementor. Mais vous n’obtiendrez pas cette expérience utilisateur lorsque vous installerez ou utiliserez d’autres modules complémentaires et plugins.

• Que vous soyez propriétaire d'un grand ou petit site, vous pouvez utiliser cet addon sans rencontrer de problèmes. Mais certains modules complémentaires ne répondront pas à vos besoins.
• Certains modules complémentaires peuvent endommager votre site. Vous ne rencontrerez pas ce problème lorsque vous deviendrez utilisateur d’ElementsKit.

Ce sont les raisons les plus vitales qui vous pousseront à installer et à utiliser le ElementsKit Ajouter sur. En raison des avantages ci-dessus, de nombreux utilisateurs abandonnent les autres modules complémentaires et choisissent ElementsKit. Au moment de la rédaction de ce blog, le téléchargement hebdomadaire d'ElementsKit est de 117,238+. Cela prouve que les utilisateurs aiment ElementsKit.

Vous voulez en savoir plus sur le parcours d’ElementsKit ? Puis lire le parcours d'ElementsKit : module complémentaire tout-en-un pour Elementor.

Commencez avec votre image de point d'accès

L’utilisation d’images sur votre site WordPress peut être le moyen le plus efficace de communiquer émotionnellement avec vos visiteurs. Mais les images de points chauds sur votre site WordPress peuvent l’amener à un autre niveau. Heureusement, vous savez désormais comment créer des images de points chauds en quelques minutes avec ElementsKit. 

Si vous ne savez toujours pas comment créer des images de points chauds, faites-le-nous savoir dans la section commentaires ou postez vos questions sur Communauté Wpmet. Nous essaierons de résoudre votre problème. Faites-nous également savoir si ce contenu est utile.