Comment ajouter des images interactives dans WordPress

Créer des sites Web attrayants qui ne seront pas largués mentalement par les utilisateurs en un clin d’œil nécessite une planification minutieuse et l’utilisation d’un contenu visuel de haute qualité. Dans la plupart des cas, les mots seuls ne suffisent tout simplement pas à garder les visiteurs sur une page, car :

Un moyen particulièrement efficace d’interagir avec votre public consiste à utiliser du contenu visuel interactif en raison de son pouvoir de raconter des histoires de manière plus vivante que les graphiques statiques.

Pourquoi les images interactives sont-elles importantes

Les images interactives vous permettent d’aller plus loin en matière d’engagement des utilisateurs. Par exemple, vous pouvez télécharger une photo de la faune, puis permettre aux utilisateurs d’appuyer sur chaque animal pour en savoir plus à son sujet. Ou, si vous gérez une boutique en ligne, les gens peuvent cliquer sur chaque produit pour lire les avis des utilisateurs et voir plus de photos de celui-ci.

La chose est, en plaçant des points chauds sur les images, puis en les liant à du texte, de l’audio, de la vidéo ou à tout autre type de contenu, vous pouvez donner vie aux pages et rendre votre site Web plus mémorable. Vous pouvez également les surcharger de points forts, d’informations supplémentaires, de descriptions, de liens vers d’autres pages Web et jouer avec les couleurs afin d’inviter les utilisateurs à passer à l’action et à s’impliquer dans votre marque.

Comment ajouter des images interactives dans WordPress

Quand il y a quelque chose que WordPress ne peut pas faire directement, c’est à ce moment-là que les plugins sont à l’honneur. Cette fois n’est pas différent.

Le moyen le plus rapide d’ajouter des images interactives dans WordPress est d’utiliser un plugin. Alors que plusieurs plugins premium sur le marché pourraient vous aider à faire le travail, y compris Image Map Pro pour WordPress, Publicité, et WooMapper, nous avons vraiment aimé les fonctionnalités que le Attirer l’attention packs de plugins. Vous obtenez beaucoup de valeur sans avoir à dépenser d’argent puisque le plugin peut être téléchargé gratuitement à partir du référentiel officiel des plugins WordPress.

La première étape consiste à installer le plugin et à l’activer sur votre site Web. Pour commencer à créer une image interactive, recherchez le Attirer l’attention dans votre menu, et cliquez sur Éditer l’image.

Tout d’abord, vous pouvez ajouter le titre de l’image qui sera visible une fois l’image affichée.

Ensuite, sur le côté droit de l’écran, ajoutez la nouvelle image que vous souhaitez modifier ou sélectionnez-en une dans la bibliothèque multimédia.

Une fois l’image téléchargée, vous pouvez ajuster de nombreuses options de style et modifier les couleurs, entrez la valeur par défaut Plus d’informations texte, etc…

Si vous faites défiler un peu la page, vous atteindrez le Zones de points chauds section. C’est ici que vous pouvez commencer à ajouter des zones sensibles sur votre image.

Pour commencer, cliquez sur Zone cliquable #1. Votre image apparaîtra maintenant sous Coordonnées.

Maintenant, cliquez simplement sur la partie de l’image où vous souhaitez ajouter le premier point. Vous pouvez dessiner diverses formes de points chauds en ajoutant plus de points qui formeront ensuite une zone de points chauds.

Sous l’image, vous trouverez un ensemble d’options supplémentaires qui vous permettent de ajoutez un titre pour votre zone de hotspot, choisissez ce qui va se passer une fois qu’un utilisateur clique sur un hotspot (vous pouvez insérer plus d’informations ou ajouter un lien qui les mènera à une autre page Web), entrez une description et téléchargez une image qui s’affichera une fois que l’utilisateur aura cliqué sur le hotspot.

Lorsque vous êtes satisfait du résultat final, appuyez sur le bouton Mettre à jour bouton.

Maintenant, pour ajouter votre image interactive à une page ou à un article, copier le shortcode affiché à droite de l’écran.

Ensuite, rendez-vous sur la page où vous souhaitez afficher l’image interactive. Si vous utilisez toujours l’éditeur classique, collez le code dans le Éditeur de texte. A Gutenberg, ajoutez le Petit code bloquez d’abord et insérez votre code. Si Elementor est votre constructeur de page préféré, ajoutez le code au Petit code widget et l’image interactive apparaîtra sur votre page.

Importer/exporter des images interactives

Le plugin Draw Attention contient une autre option pratique qui s’avère utile si vous travaillez sur plusieurs sites et que vous souhaitez importer et exporter des images interactives d’un site à l’autre.

Dans ce cas, vous devez d’abord installer le plugin sur les deux sites Web. Sur le site Web à partir duquel vous souhaitez exporter l’image, accédez à Attirer l’attention > Importer / Exporter, sélectionnez les images en question et appuyez sur la Générer le code d’exportation bouton.

Maintenant, copiez l’intégralité du code.

Ensuite, allez sur l’autre site Web où vous souhaitez importer l’image et à nouveau, cliquez sur Attirer l’attention > Importer / Exporter, collez votre code dans le Importer champ et appuyez sur le Importer bouton.

L’inconvénient de l’utilisation de la version gratuite de ce plugin est qu’il vous permet d’ajouter une seule image interactive à votre site Web.. Si vous choisissez de passer à l’un de leurs forfaits premium Cependant, vous aurez la possibilité d’ajouter autant d’images interactives que vous le souhaitez et de définir un nombre illimité de points chauds, de sélectionner une mise en page préférée et l’une des 20 palettes de couleurs prédéfinies, d’obtenir un an de support et de mises à jour, et plus encore.

Dernières pensées

L’utilisation d’images interactives peut sans aucun doute vous aider à garder les visiteurs sur votre site Web et éventuellement à augmenter vos taux de conversion. Plus le contenu que vous proposez est intéressant et attrayant, plus les gens voudront faire affaire avec vous. Le Draw Attention est un plugin formidable si vous avez besoin d’une solution qui vous permettra d’ajouter une image interactive à vos pages sans tracas. N’oubliez pas d’optimiser les images avant de les télécharger afin de ne pas compromettre les performances et l’UX du site.