{"id":367356,"date":"2023-05-16T15:12:00","date_gmt":"2023-05-16T12:12:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=367356"},"modified":"2022-10-12T12:35:54","modified_gmt":"2022-10-12T09:35:54","slug":"comment-ajouter-facilement-un-hotspot-dimage-dans-wordpress","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fr\/comment-ajouter-facilement-un-hotspot-dimage-dans-wordpress\/","title":{"rendered":"Comment ajouter facilement un hotspot d’image dans WordPress"},"content":{"rendered":"\n

Les humains sont des \u00eatres visuels et il est difficile d’imaginer un outil plus puissant qu’une image pour attirer l’attention du groupe de votre cible. Mais, il pourrait y avoir un \u00e9l\u00e9ment encore plus attrayant qu’une belle image – un hotspot d’image pour WordPress. Un hotspot d’image est un type d’image avec des hotspots interactifs<\/strong>. Lorsque l’utilisateur survole un point d’acc\u00e8s, une fen\u00eatre contextuelle pouvant contenir presque tout ce que vous voulez appara\u00eet.<\/p>\n

Un hotspot d’image sur votre site Web WordPress est une belle fa\u00e7on de partager plus d’informations sur un sujet donn\u00e9<\/strong> – des blogs culinaires aux sites Web de construction et tout le reste. Vous pouvez afficher les ingr\u00e9dients et les mesures des repas, les types de mat\u00e9riaux utilis\u00e9s, les noms et les titres ainsi que toute autre information sur le contenu de votre site Web. La popup peut contenir du texte, un autre, une image, une vid\u00e9o ou un lien. En plus de fournir \u00e0 vos utilisateurs des d\u00e9tails plus pr\u00e9cis, vous rendez \u00e9galement votre site Web plus interactif en utilisant des points d’acc\u00e8s aux images<\/strong>.<\/p>\n

Si vous pensez avoir besoin d’un concepteur de sites Web professionnel pour ajouter cet \u00e9l\u00e9ment sophistiqu\u00e9 \u00e0 votre site Web, nous avons d’excellentes nouvelles\u00a0! Vous pouvez facilement tout ajouter par vous-m\u00eame. Restez \u00e0 l’\u00e9coute pour en savoir plus sur la fa\u00e7on d’ajouter un hotspot d’image dans WordPress avec un plugin :<\/p>\n<\/p>\n

Pourquoi nous avons choisi les addons Qi pour Elementor pour cr\u00e9er un hotspot d’image WordPress Elemen<\/h2>\n

D’apr\u00e8s notre exp\u00e9rience, Qi Addons for Elementor<\/a> est l’un des meilleurs addons Elementor. Il comprend 60 widgets gratuits et plus de 40 widgets premium et de nombreuses options pour ajouter diff\u00e9rents \u00e9l\u00e9ments au site avec de nombreuses options de personnalisation et de style<\/strong> afin que vous puissiez \u00eatre s\u00fbr qu’ils s’int\u00e9greront dans la conception globale de votre site. En plus de tout cela, il est incroyablement simple \u00e0 utiliser<\/strong> \u2013 c’est pourquoi nous optons tr\u00e8s souvent pour cet addon, ce qui am\u00e9liore grandement le site.<\/p>\n

Le widget personnalis\u00e9 Image Hotspots<\/a> est un widget premium. Il vous permet d’ ajouter une image sp\u00e9cifique et de positionner des hotspots avec des informations sp\u00e9cifiques les concernant<\/strong>. L’ utilisateur obtient alors les informations en survolant le hotspot<\/strong>. La grande chose est que nous pouvons d\u00e9terminer les positions r\u00e9actives afin qu’il n’arrive pas que sur diff\u00e9rents appareils, le hotspot ne corresponde pas \u00e0 l’objet auquel il se r\u00e9f\u00e8re. Sur la d\u00e9mo du widget elle-m\u00eame, vous pouvez voir quelques solutions conceptuelles de l’auteur qui peuvent vous inspirer.<\/p>\n

Comment ajouter un \u00e9l\u00e9ment WordPress de point d’acc\u00e8s d’image<\/h2>\n

Une fois que vous avez ajout\u00e9 Qi Addons \u00e0 votre site, trouvez le widget personnalis\u00e9 Image Hotspots en tapant "image hotspot" dans le champ de recherche, ou simplement en parcourant les \u00e9l\u00e9ments. Vous remarquerez que tous les widgets Qi ont des ic\u00f4nes rouges reconnaissables<\/strong>.<\/p>\n

\"Comment<\/a><\/p>\n

Lorsque vous faites glisser le widget vers l’emplacement souhait\u00e9, vous verrez certaines de ses valeurs par d\u00e9faut. Le widget a deux onglets – Personnaliser<\/strong> et Style<\/strong> qui incluent une vari\u00e9t\u00e9 d’options pour ajuster l’\u00e9l\u00e9ment, tandis que l’onglet Avanc\u00e9 est un onglet Elementor qui contient tous les \u00e9l\u00e9ments.<\/p>\n

\"Comment<\/a><\/p>\n

Commen\u00e7ons par les options g\u00e9n\u00e9rales de l’onglet personnalis\u00e9. Ce que vous remarquerez en premier ici, c’est l’endroit o\u00f9 l’image et les trois \u00e9l\u00e9ments sont ins\u00e9r\u00e9s<\/strong>. Ces \u00e9l\u00e9ments sont en fait des hotspots<\/strong> et leurs param\u00e8tres de position et de contenu. Par d\u00e9faut, il existe trois points d’acc\u00e8s, mais vous pouvez supprimer ceux qui existent d\u00e9j\u00e0 ou en ajouter de nouveaux<\/strong>.<\/p>\n

\"Comment<\/a><\/p>\n

Une fois que vous avez ins\u00e9r\u00e9 une image, \u00e0 partir d’une biblioth\u00e8que, ou en en t\u00e9l\u00e9chargeant une nouvelle, il est temps de positionner les hotspots et d’y ajouter du contenu.<\/p>\n

En ce qui concerne le contenu, vous avez l’option Titre et sous-titre \u00e0 d\u00e9finir et d\u00e8s que vous commencerez \u00e0 les modifier, vous verrez comment le contenu change en direct.<\/p>\n

Il y a aussi un champ d’\u00e9pingle ici o\u00f9 vous pouvez s\u00e9lectionner une ic\u00f4ne<\/strong> pour votre \u00e9pingle, il n’est pas n\u00e9cessaire qu’elle soit celle par d\u00e9faut. La biblioth\u00e8que d’ic\u00f4nes est \u00e0 votre disposition, mais vous pouvez \u00e9galement ajouter votre propre ic\u00f4ne SVG. Par exemple, SVGREPO<\/a> propose un grand nombre d’ic\u00f4nes gratuites disponibles \u00e0 des fins commerciales.<\/p>\n

Quant \u00e0 la position horizontale et \u00e0 la position verticale, elles servent \u00e0 l’orientation du hotspot sur les positions gauche\/centre\/droite et haut\/milieu bas<\/strong>, tandis que l’option D\u00e9calage nous permet en fait d’affiner les positions. Nous n’expliquerons pas cela en d\u00e9tail car nous sommes s\u00fbrs que vous verrez par vous-m\u00eame comment vos vid\u00e9os bougent en modifiant les valeurs de d\u00e9calage. Ce qu’il est important de garder \u00e0 l’esprit, c’est que lorsque vous personnalisez les hotspots, vous devez \u00e9galement observer la page d’aper\u00e7u qui n’a pas de barre de param\u00e8tres, afin que vous puissiez voir \u00e0 quoi tout ressemble sur un \u00e9cran en taille r\u00e9elle<\/strong>.<\/p>\n

Aussi, en plus du d\u00e9calage, vous remarquerez des ic\u00f4nes d’\u00e9cran avec le titre, c’est-\u00e0-dire des ic\u00f4nes classiques qui indiquent que des options responsives sont disponibles pour ce param\u00e8tre<\/strong>. Assurez-vous de les v\u00e9rifier aussi. Il est pr\u00e9f\u00e9rable de ne pas placer de points chauds le long du bord d’une image car vous devez penser \u00e0 quoi ressemblera la fen\u00eatre contextuelle du point chaud de l’image sur diff\u00e9rentes tailles d’\u00e9cran<\/strong>.<\/p>\n

L’option Fade Info Position est l’endroit o\u00f9 les informations sur le hotspot survol\u00e9 apparaissent.<\/p>\n

\"Comment<\/a><\/p>\n

C’est le r\u00e9sultat apr\u00e8s avoir ajout\u00e9 l’image et les \u00e9pingles, nous pouvons maintenant proc\u00e9der au style de tout pour qu’il ressemble exactement \u00e0 ce que nous voulons.<\/p>\n

\"Comment<\/a><\/p>\n

R\u00e9glage du style d’image de la zone sensible<\/h2>\n

En ce qui concerne la stylisation, une vari\u00e9t\u00e9 d’options sont class\u00e9es dans un onglet Style sp\u00e9cial, afin que vous puissiez voir o\u00f9 nous stylisons les \u00e9pingles, les informations, le titre et le sous-titre.<\/p>\n

\"Comment<\/a><\/p>\n

Quant au Pin, tous les param\u00e8tres sont faciles \u00e0 comprendre. Vous pouvez choisir une ic\u00f4ne qui s’appliquera \u00e0 toutes les broches<\/strong>, contrairement aux param\u00e8tres dans les \u00e9l\u00e9ments o\u00f9 vous pouvez en choisir une distincte pour chacun. Vous pouvez \u00e9galement sp\u00e9cifier sa taille et sa couleur<\/strong>. Vous pouvez ajouter une ic\u00f4ne d’arri\u00e8re-plan en utilisant la taille du porte-\u00e9pingle. Notre arri\u00e8re-plan est de taille rouge et 15px.<\/p>\n

L’option Rayon de la bordure nous a permis de faire ressembler l’arri\u00e8re-plan \u00e0 un cercle<\/strong> car le rayon est appliqu\u00e9 \u00e0 l’arri\u00e8re-plan.<\/p>\n

\"Comment<\/a><\/p>\n

Le style des informations fait r\u00e9f\u00e9rence \u00e0 l’ apparence du champ dans lequel les informations apparaissent<\/strong>. L’affichage des informations est une option qui d\u00e9termine la fa\u00e7on dont le survol est affich\u00e9. Cela pourrait \u00eatre Fade and Reveal, nous avons choisi Reveal. La couleur du champ et le rembourrage sont ce que vous pouvez \u00e9galement personnaliser ici. Info Border Radius est une option particuli\u00e8rement int\u00e9ressante pour la mise en page de r\u00e9v\u00e9lation que nous avons utilis\u00e9e car le rayon aide \u00e0 s’adapter au champ d’information et \u00e0 l’ic\u00f4ne de broche elle-m\u00eame<\/strong>. Si nous n’ajoutions pas de rayon ici, le champ d’information blanc irait au-dessus de l’\u00e9pingle de la bo\u00eete \u00e0 ic\u00f4nes rouge.<\/p>\n

\"Comment<\/a><\/p>\n

Les options de style de titre d’information font r\u00e9f\u00e9rence au titre que nous avons ajout\u00e9 \u00e0 chaque \u00e9pingle. Les param\u00e8tres ici s’appliqueront \u00e0 tous les titres de ce hotspot d’image<\/strong>. Vous \u00eates probablement familiaris\u00e9 avec les options et \u00e0 premi\u00e8re vue, vous pouvez sp\u00e9cifier la balise de titre, la couleur, affiner la typologie du titre. Title Margin Bottom est une option importante lorsque vous avez \u00e9galement des sous-titres dans votre champ d’informations, car vous pouvez alors ajouter cette marge pour cr\u00e9er un espace entre le titre et le sous-titre.<\/p>\n

\"Comment<\/a><\/p>\n

En ce qui concerne le style de sous-titre Info, si vous ajoutez un sous-titre ici, vous pouvez styliser son apparence plus en d\u00e9tail. Dans les options de typographie, vous pouvez jouer avec diff\u00e9rents param\u00e8tres.<\/p>\n

\"Comment<\/a><\/p>\n

Voici \u00e0 quoi ressemble le r\u00e9sultat final. texte que nous avons ajout\u00e9 avec Nous avons \u00e9galement utilis\u00e9 le widget Qi du titre de la section<\/a> pour ajouter le texte et rendre cette section du site Web beaucoup plus int\u00e9ressante pour les futurs utilisateurs.<\/p>\n

\"Comment<\/a><\/p>\n

En conclusion<\/h2>\n

Qi Addons est un outil tr\u00e8s intuitif que tout le monde peut utiliser en toute simplicit\u00e9 et sans codage ni aucune autre connaissance technique. N’h\u00e9sitez pas \u00e0 explorer les options de ce widget par vous-m\u00eame, \u00e0 exp\u00e9rimenter, \u00e0 jouer et \u00e0 profiter du processus cr\u00e9atif pour rendre votre site Web plus attrayant pour vos utilisateurs. Si vous avez des questions, n’h\u00e9sitez pas \u00e0 nous contacter dans la section commentaires – nous attendons avec impatience vos exp\u00e9riences avec Qi et les images hotspot !<\/p>\n

Source d’enregistrement: wpklik.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"

L’ajout de points d’acc\u00e8s aux images dans WordPress est facile lorsque vous disposez d’un outil parfait – apprenez \u00e0 le faire en quelques clics.<\/p>\n","protected":false},"author":1,"featured_media":372289,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[205,568,423],"tags":[844],"class_list":["post-367356","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-elementor-4","category-les-bases-de-wordpress","category-plugins-wordpress","tag-affiai-fr"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/posts\/367356","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/comments?post=367356"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/posts\/367356\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/media\/372289"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/media?parent=367356"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/categories?post=367356"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/tags?post=367356"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}