Accueil » Blog » Plugins Wordpress » Créer un lien sur une image avec “Draw attention”

Créer un lien sur une image avec « Draw attention »

Créer un lien sur une image peut se faire facilement dans WordPress. Cependant, ce lien concerne toute l’image et redirige vers un contenu interne ou externe au site Internet. « Draw attention » est une extension WordPress qui va amener vos images à un autre niveau puisque vous allez pouvoir créer des zones cliquables pour afficher des informations ou créer un lien sur une image qui redirige vers l’internaute vers un autre contenu interne ou externe à votre site. Dans ce tutoriel, je vais vous expliquer comment utiliser cette extension bien pratique et les avantages qu’elle procure.

Draw attention c’est quoi ?

« Draw attention » est une extension WordPress qui permet de créer des images interactives. Elle permet de créer des zones cliquables avec une forme personnalisée sur une image. Cette zone peut être alors définie comme un lien externe vers une URL bien précise ou afficher une infobulle contenant des informations sur la zone sélectionnée.

Création d’une image interactive avec « Draw attention » sur WordPress

Vous allez voir que la création d’une image avec des zones cliquable est vraiment un processus simple à mettre en place. Pour commencer, ne prenez pas une image trop grande. Pensez à la taille réelle sur votre écran. De même, n’oubliez pas de compresser l’image pour optimiser l’affichage. Ceci étant dit, nous pouvons commencer.

1. Installer « Draw attention » sur WordPress

Vous trouverez l’extension Draw attention directement dans WordPress.

Draw-attention pour créer un lien sur une image

Pour la télécharger, suivez ces étapes :

  1. Connectez-vous à votre interface d’administration WordPress.
  2. Cliquez sur « Extensions » dans le menu latéral.
  3. Cliquez sur « Ajouter une nouvelle ».
  4. Dans la barre de recherche, saisissez « Draw attention ».
  5. Lorsque l’extension apparaît, cliquez sur « Installer maintenant ».
  6. Une fois l’installation terminée, cliquez sur « Activer ».

2. Création d’un projet et réglage du style des zones à cliquer pour créer un lien sur une image

Maintenant que l’extension est activée, vous pouvez commencer à créer des éléments visuels interactifs. Dans le menu latéral de votre interface d’administration WordPress, cliquez sur « Draw attention ».

paramètres de la zone cliquable de l'image

Indiquez un titre pour votre projet et sélectionnez les réglages pour modifier l’apparence de la zone cliquable. Vous pouvez :

  • Choisir la couleur de mise en évidence de la zone.
  • Choisir l’opacité de la couleur de cette zone.
  • Sélectionner la taille de la bordure.
  • Sélectionner les couleurs par défaut de la zone.

3. Réglages de l’apparence des informations pour le visiteur

Lorsque l’on va cliquer sur un élément de l’image, on a la possibilité d’afficher des informations spécifiques pour cette zone. Les réglages suivants concernent l’apparence de l’affichage de cette information.

Réglages de l'apparence de l'infobulle

Comme vous pouvez le voir, les réglages concernent :

  • La couleur de l’arrière-plan de l’image.
  • La couleur du texte.
  • Celle du titre.
  • La couleur de fond de l’infobulle.
  • Le texte à afficher dans la boite d’information lorsqu’aucune zone n’est sélectionnée.

4. Ajouter une image

Sur la droite, vous pouvez importer l’image sur laquelle vous allez créer des zones cliquables. Vous pouvez sélectionner votre fichier dans la médiathèque ou la télécharger depuis votre ordinateur.


uploader une image pour créer une image interactive avec Draw attention

5. Créer un lien sur une image avec des zones cliquables.

Une fois votre image téléchargée, vous la retrouvez dans la colonne de droite, mais aussi en bas dans l’onglet « Hotspot areas » puis en cliquant sur l’onglet « Clickable area #1 ». Si elle n’est pas présente, enregistrez votre page pour la rafraîchir.

Comment définir une zone cliquable sur l'image pour ajouter un lien ou afficher une infobulle avec Draw attention
Définir une zone cliquable sur l’image pour ajouter un lien ou afficher une infobulle

Sur la gauche de l’image, vous pouvez zoomer plus ou moins sur l’image afin d’affiner la mise en place des différentes zones à créer.

Pour cela, vous disposez de formes prédéfinies telles que :

  • Un cercle.
  • Un rectangle.
  • Un hexagone.

Rassurez-vous, vous pouvez en fait modifier l’apparence de ces zones. En effet, une fois celle-ci tracée, un nouveau menu est disponible sur la droite de l’image.

modifier une zone cliquable sur draw attention
Modifier la zone cliquable sur « Draw attention »

Sélectionnez un point blanc et maintenez le clic gauche de la souris pour adapter la forme. Relâchez pour valider la position et sauvegardez les modifications en cliquant sur « Save ». Vous pouvez également supprimer la forme en cliquant sur la corbeille.

6. Ajoutez les informations à afficher ou créer un lien sur l’image

Nous arrivons à la dernière étape. Nous allons définir l’action à effectuer lorsque l’on clique sur cette zone.

Si vous décidez d’afficher des informations au clic, ajoutez un titre, le contenu à afficher dans la description et sélectionnez « Show More info » dans la partie « Action ».

Vous pouvez aussi, dans le champ « Detail Image » indiquer l’URL d’une image pour qu’elle s’affiche dans l’infobulle.

Si toutefois vous préférez créer un lien sur l’image, sélectionnez « Go to URL » dans la partie action et indiquez votre lien dans la partie « Detail image ».

Une fois terminé, vous pouvez sauvegarder votre projet ou ajouter une nouvelle zone sur votre image en cliquant sur le bouton « Add Another Area ». Répétez l’opération et sauvegardez votre projet.

7. Insérer votre image cliquable dans un article ou une page WordPress

Dans la colonne de droite, vous disposez d’un code court que vous allez pouvoir utiliser pour ajouter votre image à une page web. Copiez ce code qui devrait ressembler à :

[drawattention]

Rendez-vous ensuite sur une page ou un article et sélectionnez une ligne sur la page.

Tapez ensuite :

/code

Et sélectionnez « Code court ». Vous pouvez coller le code de votre image et sauvegarder votre page. C’est aussi simple que ça.

Mon avis sur ce plugin

« Draw attention » est très convivial et facile à utiliser, même pour les débutants. L’interface est intuitive et vous guide à travers le processus de création des zones visuelles interactives. Je trouve le tarif un peu élevé pour la version pro de cette extension, mais son utilisation et pour des cas spécifiques.

Les avantages d’utiliser l’extension « Draw Attention » sur WordPress

Créer une image avec des zones cliquables offre plusieurs avantages. Au-delà du fait qu’il améliore l’expérience utilisateur à condition que ce soit utilisé judicieusement, il peut améliorer votre taux de conversion. Il améliore également le référencement naturel de votre page en limitant le taux de rebonds et en augmentant la durée des sessions sur votre site. Que du bonheur en somme.

Le tutoriel vidéo pour utiliser « Draw Attention »

Si vous préférez une démonstration de cette extension, j’en ai fait une vidéo que vous pouvez consulter ici :

Comment créer des liens sur une image.

Conclusion sur l’image cliquable dans WordPress

Vous savez maintenant comment utiliser l’extension WordPress « Draw attention » pour créer des éléments visuels interactifs sur votre site et un lien sur une image. N’hésitez pas à essayer ses fonctionnalités pour découvrir si elle peut vous être utile dans un projet. N’hésiter pas aussi à me partager vos impressions sur cette extension.

Contenu similaire

Laisser un commentaire