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

Créer un lien sur une image avec “Draw attention”

Votez pour post

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.

Sommaire
show

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

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 les fonctionnalités de “Draw attention” pour découvrir si elle peut vous être utile dans un projet. N’hésiter pas aussi à nous partager vos impressions sur cette extension.

Laisser un commentaire

Nous utilisons des cookies pour personnaliser le contenu et les publicités, pour fournir des fonctions de médias sociaux et pour analyser notre trafic. Nous partageons également des informations sur votre utilisation de notre site avec nos partenaires de médias sociaux, de publicité et d'analyse. View more
Cookies settings
Accepter
Politique des cookies & vie privée
Privacy & Cookies policy
Cookies list
Cookie name Active

Qui sommes-nous ?

L’adresse de notre site Web est : https://wphibou.com/.

Utilisation des données personnelles collectées

Commentaires

Quand vous laissez un commentaire sur notre site web, les données inscrites dans le formulaire de commentaire, mais aussi votre adresse IP et l’agent utilisateur de votre navigateur sont collectés pour nous aider à la détection des commentaires indésirables.

Une chaîne anonymisée créée à partir de votre adresse de messagerie (également appelée hash) peut être envoyée au service Gravatar pour vérifier si vous utilisez ce dernier.

Les clauses de confidentialité du service Gravatar sont disponibles ici : https://automattic.com/privacy/. Après validation de votre commentaire, votre photo de profil sera visible publiquement à coté de votre commentaire.

Médias

Si vous êtes un utilisateur ou une utilisatrice enregistré·e et que vous téléversez des images sur le site web, nous vous conseillons d’éviter de téléverser des images contenant des données EXIF de coordonnées GPS. Les visiteurs de votre site web peuvent télécharger et extraire des données de localisation depuis ces images.

Formulaires de contact

Le formulaire de contact est accessible ici.

Cookies

Si vous déposez un commentaire sur notre site, il vous sera proposé d’enregistrer votre nom, adresse de messagerie et site web dans des cookies.

C’est uniquement pour votre confort afin de ne pas avoir à saisir ces informations si vous déposez un autre commentaire plus tard.

Ces cookies expirent au bout d’un an.

Si vous avez un compte et que vous vous connectez sur ce site, un cookie temporaire sera créé afin de déterminer si votre navigateur accepte les cookies. Il ne contient pas de données personnelles et sera supprimé automatiquement à la fermeture de votre navigateur.

Lorsque vous vous connecterez, nous mettrons en place un certain nombre de cookies pour enregistrer vos informations de connexion et vos préférences d’écran. La durée de vie d’un cookie de connexion est de deux jours, celle d’un cookie d’option d’écran est d’un an. Si vous cochez « Se souvenir de moi », votre cookie de connexion sera conservé pendant deux semaines. Si vous vous déconnectez de votre compte, le cookie de connexion sera effacé.

En modifiant ou en publiant une publication, un cookie supplémentaire sera enregistré dans votre navigateur. Ce cookie ne comprend aucune donnée personnelle. Il indique simplement l’ID de la publication que vous venez de modifier. Il expire au bout d’un jour.

Contenu embarqué depuis d’autres sites

Les articles de ce site peuvent inclure des contenus intégrés (par exemple des vidéos, images, articles…). Le contenu intégré depuis d’autres sites se comporte de la même manière que si le visiteur se rendait sur cet autre site.

Ces sites web pourraient collecter des données sur vous, utiliser des cookies, embarquer des outils de suivis tiers, suivre vos interactions avec ces contenus embarqués si vous disposez d’un compte connecté sur leur site web.

Statistiques et mesures d’audience

« Ce site utilise Google Analytics, un service d’analyse de site internet fourni par Google Inc. ( » Google « ). Google Analytics utilise des cookies, qui sont des fichiers texte placés sur votre ordinateur, pour aider le site internet à analyser l’utilisation du site par ses utilisateurs. Les données générées par les cookies concernant votre utilisation du site (y compris votre adresse IP) seront transmises et stockées par Google sur des serveurs situés aux Etats-Unis. Google utilisera cette information dans le but d’évaluer votre utilisation du site, de compiler des rapports sur l’activité du site à destination de son éditeur et de fournir d’autres services relatifs à l’activité du site et à l’utilisation d’Internet. Google est susceptible de communiquer ces données à des tiers en cas d’obligation légale ou lorsque ces tiers traitent ces données pour le compte de Google, y compris notamment l’éditeur de ce site. Google ne recoupera pas votre adresse IP avec toute autre donnée détenue par Google. Vous pouvez désactiver l’utilisation de cookies en sélectionnant les paramètres appropriés de votre navigateur. Cependant, une telle désactivation pourrait empêcher l’utilisation de certaines fonctionnalités de ce site. En utilisant ce site internet, vous consentez expressément au traitement de vos données nominatives par Google dans les conditions et pour les finalités décrites ci-dessus. »

WPHibou utilise le pixel Facebook. Cette technologie permet à Facebook d’identifier, parmi les visiteurs de WPHibou, ceux qui possèdent un compte Facebook. Cette stratégie est utilisée à des fins marketing, afin de proposer, éventuellement,  des publicités ciblées sur les pages Facebook des utilisateurs.

Utilisation et transmission de vos données personnelles

Durées de stockage de vos données

Si vous laissez un commentaire, le commentaire et ses métadonnées sont conservés indéfiniment. Cela permet de reconnaître et approuver automatiquement les commentaires suivants au lieu de les laisser dans la file de modération.

Pour les utilisateurs et utilisatrices qui s’enregistrent sur notre site (si cela est possible), nous stockons également les données personnelles indiquées dans leur profil. Tous les utilisateurs et utilisatrices peuvent voir, modifier ou supprimer leurs informations personnelles à tout moment (à l’exception de leur nom d’utilisateur·ice). Les gestionnaires du site peuvent aussi voir et modifier ces informations.

Les droits que vous avez sur vos données

Si vous avez un compte ou si vous avez laissé des commentaires sur le site, vous pouvez demander à recevoir un fichier contenant toutes les données personnelles que nous possédons à votre sujet, incluant celles que vous nous avez fournies. Vous pouvez également demander la suppression des données personnelles vous concernant. Cela ne prend pas en compte les données stockées à des fins administratives, légales ou pour des raisons de sécurité.

Transmission de vos données personnelles

Les commentaires des visiteurs peuvent être vérifiés à l’aide d’un service automatisé de détection des commentaires indésirables.

Informations de contact

Vous pouvez faire votre demande en envoyant un message à l’aide du formulaire de contact du site.

Informations supplémentaires

Comment nous protégeons vos données

Les données recueillies sont stockées par le sous-traitant GETresponses, dont la politique de confidentialité est disponible ici en  version traduite en Française et ici en version originale.

wphibou.com utilise le pixel Facebook. Les données recueillies sont stockées par Facebook dont la politique de confidentialité est accessible ici.

Paiement sécurisé: WPHibou utilise les services de Paypal et/ou  de Stripe pour sécuriser les paiements. Ces deux sociétés sont parmi les leaders mondiaux en la matière, et présentent toutes les garanties de protection des consommateurs.

Vos données personnelles sont conservées de manière confidentielles et ne sont ni cédées ni vendues à des tiers.

Opérations de marketing automatisé et/ou de profilage réalisées à l’aide des données personnelles

Votre e-mail est collecté pour vous faire parvenir nos nouveaux articles, nouvelles vidéos et nos offres commerciales, dans le strict respect de la réglementation européenne sur la collecte des données.

Vos données ne seront jamais revendues à des tiers.

Vos données peuvent être classées selon vos clics réalisés dans les mails afin d’apporter un contenu adapté dans les mails suivants.

Dans tous les mails vous retrouverez un lien de désabonnement, vos données seront alors supprimées.

Cela ne prend pas en compte les données stockées à des fins administratives, légales ou pour des raisons de sécurité.

Save settings
Cookies settings