Comment créer des images interactives dans WordPress

Trouver l'image parfaite pour votre article WordPress est un excellent début, mais c'est souvent une voie à sens unique. Vos visiteurs voient une image statique et peuvent manquer les détails clés que vous souhaitez mettre en évidence.

Cela peut être frustrant, surtout lorsque vous essayez de présenter les caractéristiques d'un produit ou de guider les utilisateurs à travers un processus. Et si vos images pouvaient faire plus et engager activement votre public ?

C'est exactement ce que font les images interactives. Après avoir testé plusieurs plugins ici chez WPBeginner, nous avons trouvé une méthode simple qui permet à quiconque d'ajouter des points d'intérêt cliquables à ses images sans avoir besoin de code.

Dans ce guide, nous vous montrerons comment transformer facilement vos images statiques en expériences interactives et attrayantes pour vos visiteurs.

Dans ce guide, nous vous accompagnerons tout au long du processus. Voici un aperçu rapide de ce que vous apprendrez.

1. Qu'est-ce qu'une image interactive ?
2. Comment ajouter des images interactives à votre contenu WordPress
3. Comment importer/exporter des images interactives vers d'autres sites WordPress
4. Questions fréquemment posées sur les images interactives

Qu'est-ce qu'une image interactive ?

Une image interactive peut avoir des zones de points d'intérêt, des surlignages, des liens, des boutons cliquables, des couleurs, du contenu audiovisuel, et plus encore.

Immédiatement, c'est beaucoup plus engageant qu'une simple image standard que vous téléchargez sur votre site WordPress.

Les images interactives peuvent attirer l'attention du visiteur sur des fonctionnalités et du contenu spécifiques, puis afficher des informations supplémentaires.

Par exemple, vous pourriez afficher une fenêtre contextuelle lorsque le visiteur survole une barre particulière dans un graphique.

Cette interaction peut encourager les visiteurs à explorer vos images plus en détail, ce qui les maintiendra plus longtemps sur la page. Elle peut également créer une expérience plus interactive et intéressante, ce qui peut augmenter vos vues de page et réduire le taux de rebond dans WordPress.

Les images interactives peuvent également montrer aux visiteurs les étapes qu'ils doivent suivre ensuite. Par exemple, vous pourriez ajouter des liens vers d'autres parties de votre site ou afficher un bouton d'appel à l'action.

Cela dit, voyons comment vous pouvez créer des images interactives pour votre site WordPress.

Remarque : Si vous souhaitez plutôt ajouter des images animées à votre site Web, suivez notre guide étape par étape sur comment ajouter des GIF animés dans WordPress.

Comment ajouter des images interactives à votre contenu WordPress

La manière la plus simple et la plus conviviale pour les débutants d'ajouter des zones cliquables ou des points d'intérêt interactifs est d'utiliser Draw Attention. Ce plugin vous permet d'afficher une fenêtre contextuelle « plus d'informations » ou d'ouvrir une nouvelle URL lorsque l'utilisateur interagit avec une image.

La première chose à faire est d'installer et d'activer le plugin Draw Attention. Pour plus de détails, consultez notre guide étape par étape sur comment installer un plugin WordPress.

Après l'activation, allez dans Draw Attention » Edit Image dans le tableau de bord WordPress. Cela vous amène à un écran où vous pouvez créer différentes interactions, puis les ajouter à une image en tant que zones cliquables.

Pour commencer, tapez un titre pour l'image interactive.

Ceci apparaîtra à côté de l'image sur votre site web WordPress. Par exemple, dans l'image suivante, nous utilisons le titre « Fonctionnalités OptinMonster ».

Après avoir tapé un titre, faites défiler jusqu'à la section « Image » et choisissez l'image que vous souhaitez utiliser.

Vous pouvez soit sélectionner une image dans la bibliothèque de médias, soit télécharger une nouvelle image.

Après avoir choisi une image, vous pouvez ajouter des couleurs et des liens, créer des zones cliquables, et plus encore en faisant défiler jusqu'à la section « Zones de point chaud ».

Le plugin crée une Zone cliquable 1 par défaut, alors cliquez pour développer cette section.

Pour commencer, vous devrez surligner la zone que vous souhaitez rendre interactive.

Draw Attention propose quelques formes différentes que vous pouvez utiliser pour le surlignage, alors cliquez simplement sur la forme que vous souhaitez utiliser. Dans l'image suivante, nous avons sélectionné un rectangle.

Maintenant, cliquez et faites simplement glisser pour surligner la zone que vous souhaitez utiliser comme point chaud de l'image.

Draw Attention affichera maintenant de nouveaux paramètres pour cette zone cliquable. Pour commencer, tapez un nom dans le champ « Titre ».

Cela apparaîtra comme une info-bulle lorsque le visiteur passera sa souris sur le point chaud, il est donc judicieux d'utiliser quelque chose de descriptif.

Dans l'image suivante, nous avons transformé la zone de compte à rebours en un point chaud et ajouté le titre d'image « Compteur de temps ».

Une fois que vous avez fait cela, ouvrez le menu déroulant « Action » et choisissez ce qui se passera lorsqu'un visiteur cliquera sur cette zone. Draw Attention peut soit ouvrir un lien, soit afficher une boîte « plus d'informations ».

Vous verrez différents paramètres en fonction des options que vous sélectionnez. Par exemple, si vous choisissez « Aller à l'URL », vous devrez alors ajouter un lien et spécifier s'il doit s'ouvrir dans un nouvel onglet.

Si vous sélectionnez « Afficher plus d'informations », vous devrez alors taper les informations qui apparaîtront lorsque le visiteur cliquera sur le point chaud.

Vous pouvez également ajouter une image ou une URL de détail facultative, qui sera incluse dans la boîte d'informations.

Dans l'image suivante, nous avons ajouté du texte à la boîte d'informations supplémentaires.

Nous avons également ajouté le logo OptinMonster comme image de détail.

Lorsque vous êtes satisfait de l'apparence du point chaud, cliquez sur le bouton « Ajouter une autre zone ».

Vous pouvez maintenant configurer la zone cliquable en suivant le même processus décrit ci-dessus.

Répétez simplement ces étapes pour ajouter toutes les zones cliquables à l'image.

Une fois cela fait, vous voudrez peut-être personnaliser l'apparence des surlignages et de la boîte d'informations supplémentaires. Par exemple, vous pouvez changer la couleur que Draw Attention affiche lorsque les visiteurs survolent une zone cliquable à l'aide des paramètres « Couleur de surlignage ».

Vous pouvez également modifier l'opacité du surlignage et la largeur de la bordure, ajouter une bordure, et plus encore en utilisant les paramètres de la section « Style du surlignage ».

Après cela, vous pouvez faire défiler jusqu'à « Style de la boîte d'informations supplémentaires » et affiner l'apparence de la boîte. Par exemple, vous pouvez changer la couleur d'arrière-plan, la couleur du texte, et plus encore.

Draw Attention est également livré avec différents thèmes que vous pouvez appliquer à votre image interactive.

Pour jeter un coup d'œil à ces thèmes, faites simplement défiler jusqu'à la boîte « Appliquer le schéma de couleurs » et ouvrez le menu déroulant. Vous pouvez choisir entre Clair, Sombre et Draw Attention.

Toutes ces options sont assez simples, il vaut donc la peine d'essayer différents paramètres pour voir ce qui rend le mieux sur votre site Web.

Lorsque vous essayez les différentes options, vous pouvez prévisualiser leur apparence sur votre site Web WordPress en cliquant sur « Prévisualiser les modifications ».

Lorsque vous êtes satisfait de l'apparence et du fonctionnement de l'image interactive, assurez-vous de cliquer sur « Mettre à jour » pour enregistrer vos modifications.

Vous pouvez maintenant ajouter l'image interactive à n'importe quelle page, publication ou zone prête pour les widgets en utilisant le shortcode dans le bloc « Copier le shortcode ».

Pour plus d'informations sur la façon de placer le shortcode, veuillez consulter notre guide sur comment ajouter un shortcode dans WordPress.

Comment importer/exporter des images interactives vers d'autres sites WordPress

Parfois, vous voudrez peut-être réutiliser la même image interactive sur plusieurs sites Web.

Par exemple, si vous êtes un affilié, vous pourriez créer une image interactive qui promeut l'un de vos produits. Vous pouvez ensuite utiliser la même image interactive sur tous vos magasins d'affiliation Amazon et autres sites Web de marketing d'affiliation.

Télécharger la même image puis recréer manuellement toutes les interactions peut prendre beaucoup de temps et d'efforts.

Au lieu de cela, nous vous recommandons de créer l'image interactive une fois, puis d'utiliser la fonction d'importation/exportation de Draw Attention. Cela vous permet de réutiliser la même image sur d'innombrables sites Web ou boutiques en ligne.

Pour ce faire, vous devrez installer le plugin Draw Attention sur le site d'origine qui contient l'image interactive et sur tous les autres sites Web où vous souhaitez utiliser cette image.

Sur votre site d'origine, allez dans Draw Attention » Import / Export et cochez la case à côté de chaque image que vous souhaitez exporter.

Ensuite, cliquez sur le bouton « Générer le code d'exportation ». Après quelques instants, Draw Attention générera un code.

Dans un autre onglet, connectez-vous à votre autre blog WordPress ou site web et allez dans Draw Attention » Import / Export.

Ici, copiez le code d'exportation dans la boîte « Importer » et cliquez sur le bouton « Importer ».

Draw Attention importera maintenant l'image et toutes ses interactions, prêtes à être utilisées.

Répétez simplement ces étapes sur tous les sites web où vous souhaitez utiliser l'image interactive.

Questions fréquemment posées sur les images interactives

Voici les réponses à certaines des questions les plus fréquentes que nous recevons concernant l'ajout d'images interactives dans WordPress.

Quel est le meilleur plugin pour créer des images interactives dans WordPress ?

Pour les débutants, nous recommandons le plugin Draw Attention car il est facile à utiliser et possède une interface simple. La version gratuite fournit toutes les fonctionnalités de base dont vous avez besoin, tandis que la version pro débloque des options plus avancées comme les cartes d'images multiples et un style supplémentaire pour les infobulles.

Les images interactives sont-elles adaptées aux mobiles ?

Oui, le plugin Draw Attention est entièrement réactif. Cela signifie que vos points d'intérêt interactifs et vos boîtes d'information s'ajusteront automatiquement pour s'adapter à toute taille d'écran, offrant une excellente expérience utilisateur sur les appareils mobiles.

Puis-je ajouter des vidéos ou des animations aux points d'intérêt interactifs ?

Vous pouvez utiliser l'action « Aller à l'URL » pour lier un point d'accès à une vidéo sur une plateforme comme YouTube ou Vimeo. Bien que l'intégration directe de vidéos dans la fenêtre contextuelle puisse nécessiter la version pro, le lien est une solution de contournement simple. Pour les images animées, nous vous recommandons de suivre notre guide sur l'ajout de GIF animés à WordPress.

L'ajout d'images interactives ralentira-t-il mon site web ?

Comme tout média, les images interactives ajoutent du poids à votre page. Cependant, le plugin Draw Attention est léger et bien codé. Le facteur le plus important est la taille du fichier image d'origine, nous vous recommandons donc toujours d'optimiser vos images pour le web avant de les télécharger.

Nous espérons que cet article vous a aidé à apprendre comment créer des images interactives dans WordPress. Vous pourriez également vouloir consulter notre guide sur comment créer des superpositions et des survolages de boîtes à bascule d'images dans WordPress et nos meilleurs choix de meilleurs plugins de curseur 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.