Comment transformer vos images en zones cliquables sur Google Sites ?

Écran de tablette affichant une image interactive sur Google Sites avec des liens.

Des images clicables sur ton Google Sites ?

Imaginez un organigramme où chaque visage mène directement à la page LinkedIn de la personne, ou une carte interactive de votre entreprise. C’est désormais possible sur Google Sites, et la bonne nouvelle, c’est que l’outil est déjà à votre portée : Google Drawings. Fini les images statiques, place à l’interactivité !

Le secret : Google Drawings

Peut-être connaissez-vous déjà Google Drawings pour la création de schémas ou d’infographies. Mais saviez-vous qu’il cache une fonctionnalité très puissante pour rendre vos Google Sites plus dynamiques ? L’idée est simple : superposer des zones transparentes sur votre image et y lier des URLs. C’est une astuce simple mais diablement efficace pour créer des images interactives Google Sites.

Guide pas à pas pour des images qui ont du clic

Voici comment procéder pour créer votre première image cliquable :

  1. Ouvrez Google Drawings : Depuis votre Google Drive, créez un « Nouveau » document, puis allez dans « Plus » et sélectionnez « Google Drawings« .

  2. Importez votre image : Insérez l’image de votre choix dans le document Google Drawings. Que ce soit une photo d’équipe, un logo, un plan, ou un organigramme, c’est elle qui sera la base de votre interactivité.

  3. Dessinez les zones cliquables : C’est ici que la magie opère.

    • Allez dans l’outil « Formes » et choisissez la forme qui correspond le mieux à la zone que vous souhaitez rendre cliquable (carré, cercle, forme libre…).
    • Dessinez cette forme sur la partie de l’image que vous ciblez (par exemple, le visage d’une personne sur une photo).
    • Une fois la forme sélectionnée, cliquez sur l’icône de lien (la petite chaîne) dans la barre d’outils et collez l’URL de destination (page LinkedIn, site web, document, etc.). Cette méthode de Google Drawings lien image est clé.
  4. Rendez les formes invisibles : Pour que votre image ressemble à l’originale et que les formes ne soient pas visibles, vous devez les rendre transparentes :

    • Sélectionnez votre forme.
    • Pour la couleur de remplissage, choisissez « Transparent ».
    • Pour la couleur de la bordure, choisissez également « Transparent ».
  5. Intégrez à Google Sites : Une fois votre Google Drawing prêt, donnez-lui un nom explicite (ex: « Organigramme Interactif »).

    • Sur votre Google Site, cliquez sur « Insérer » puis « Drive ».
    • Recherchez et sélectionnez votre Google Drawing. Ajustez sa taille pour qu’il s’intègre parfaitement à votre page.
    • Publiez ou prévisualisez votre site, et hop ! Vos zones sont cliquables.

Pourquoi cette astuce va vous simplifier la vie ?

Cette technique ouvre un monde de possibilités pour personnaliser Google Sites et le rendre plus professionnel et engageant. Imaginez :

  • Un organigramme cliquable Google Sites où chaque collaborateur est un lien vers sa fiche ou son profil.
  • Des logos de partenaires qui renvoient directement à leurs sites.
  • Des fiches produits illustrées, avec des zones cliquables menant à des descriptions détaillées.
  • Même des blagues cachées (Easter eggs) pour les utilisateurs attentifs !

Attention aux limitations

Il est crucial de noter que cette méthode fonctionne parfaitement lorsque le Google Drawing est intégré tel quel dans Google Sites. Si vous exportez le Drawing en image (JPEG ou PNG) pour l’intégrer, les liens seront perdus. De même, cette astuce est spécifique à l’intégration de documents Google (Drawings, Slides) et ne s’applique pas aux carrousels d’images qui ne gèrent pas cette interactivité directement via un fichier image exporté.

Alors, prêt à rendre vos Google Sites plus interactifs et à surprendre vos visiteurs ? Quelles images de votre site aimeriez-vous rendre cliquables en premier ?

Écran de tablette affichant une image interactive sur <a href="https://lemondenumeriquedemelanie.com/creez-un-site-interne-gratuitement-loutil-google-sites-a-maitriser-absolument/">Google Sites</a> avec des liens.’ class=’wp-image-9990’/></figure>
<p></p>
<div data-elementor-type="section" data-elementor-id="5455" class="elementor elementor-5455" data-elementor-post-type="elementor_library">
<section class="elementor-section elementor-top-section elementor-element elementor-element-f882817 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="f882817" data-element_type="section">
<div class="elementor-container elementor-column-gap-default">
<div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-251b002" data-id="251b002" data-element_type="column">
<div class="elementor-widget-wrap elementor-element-populated">
<div class="elementor-element elementor-element-36ba581 elementor-widget elementor-widget-text-editor" data-id="36ba581" data-element_type="widget" data-widget_type="text-editor.default">
<p style="text-align: center;">Cet article m’a été utile ?</p>								</div>
</div>
</div>
</div>
</section>
<section class="elementor-section elementor-top-section elementor-element elementor-element-cc8201d elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="cc8201d" data-element_type="section">
<div class="elementor-container elementor-column-gap-default">
<div class="elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-57b0f51" data-id="57b0f51" data-element_type="column">
<div class="elementor-widget-wrap elementor-element-populated">
<div class="elementor-element elementor-element-48d67d9 elementor-button-success elementor-align-right elementor-widget elementor-widget-button" data-id="48d67d9" data-element_type="widget" data-widget_type="button.default">
<a class="elementor-button elementor-button-link elementor-size-sm" href="#avis_positif">
<span class="elementor-button-content-wrapper">
<span class="elementor-button-icon">
<svg aria-hidden="true" class="e-font-icon-svg e-far-thumbs-up" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M466.27 286.69C475.04 271.84 480 256 480 236.85c0-44.015-37.218-85.58-85.82-85.58H357.7c4.92-12.81 8.85-28.13 8.85-46.54C366.55 31.936 328.86 0 271.28 0c-61.607 0-58.093 94.933-71.76 108.6-22.747 22.747-49.615 66.447-68.76 83.4H32c-17.673 0-32 14.327-32 32v240c0 17.673 14.327 32 32 32h64c14.893 0 27.408-10.174 30.978-23.95 44.509 1.001 75.06 39.94 177.802 39.94 7.22 0 15.22.01 22.22.01 77.117 0 111.986-39.423 112.94-95.33 13.319-18.425 20.299-43.122 17.34-66.99 9.854-18.452 13.664-40.343 8.99-62.99zm-61.75 53.83c12.56 21.13 1.26 49.41-13.94 57.57 7.7 48.78-17.608 65.9-53.12 65.9h-37.82c-71.639 0-118.029-37.82-171.64-37.82V240h10.92c28.36 0 67.98-70.89 94.54-97.46 28.36-28.36 18.91-75.63 37.82-94.54 47.27 0 47.27 32.98 47.27 56.73 0 39.17-28.36 56.72-28.36 94.54h103.99c21.11 0 37.73 18.91 37.82 37.82.09 18.9-12.82 37.81-22.27 37.81 13.489 14.555 16.371 45.236-5.21 65.62zM88 432c0 13.255-10.745 24-24 24s-24-10.745-24-24 10.745-24 24-24 24 10.745 24 24z"></path></svg>			</span>
<span class="elementor-button-text">Oui, c

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur la façon dont les données de vos commentaires sont traitées.

Retour en haut