Comment insérer un lien cliquable dans une image ?
Transformer une image en véritable élément interactif
Points clés
• Une image peut devenir cliquable via un lien interne ou externe
• L’Editor permet parfois de modifier un lien déjà existant
• L’ajout d’un lien autour d’une image nécessite souvent le Designer
• Tester le responsive garantit un comportement correct sur mobile
Rendre une image cliquable est très utile dans un site hôtelier : détourner vers une page chambre, une offre spéciale, le spa, un restaurant, un PDF, une page de réservation… C’est possible dans la plupart des cas, mais la méthode dépend de la manière dont votre site est structuré.
Voici comment procéder simplement et proprement.
Ajouter ou modifier un lien sur une image existante dans l’Editor
Si l’image est déjà entourée d’un lien dans la structure (ex : une carte, une vignette d’offre, une image CMS), vous pouvez simplement modifier le lien via l’Editor.
Procédure :
- Ouvrez votre site publié.
- Cliquez sur Login pour accéder à l’Editor.
- Survolez l’image.
- Si l’option Edit apparaît, cliquez dessus.
- Cliquez sur l’icône Lien dans la barre d’édition.
- Choisissez :
• Une page interne (chambres, restaurant, offres…)
• Une URL externe
• Une ancre interne - Publiez la page.
💡 Cette méthode fonctionne uniquement si le designer a prévu un lien autour de l’image.
Ajouter un lien cliquable autour d’une image via le Designer
Si votre image n’est pas encore cliquable, alors vous devez passer par le Designer pour l’entourer d’un lien.
Méthode :
- Ouvrez le Designer.
- Sélectionnez l’image souhaitée dans la page.
- Dans le panneau de droite, cliquez sur Wrap in Link Block (encapsuler dans un lien).
- Le Link Block apparaît autour de l’image.
- Ajoutez le lien :
• Page interne du site
• URL externe
• Ancre - Ajustez la taille du Link Block si nécessaire.
- Testez desktop et mobile.
- Publiez.
💡 Le Link Block est la méthode officielle pour transformer une image en élément cliquable.
Insérer un lien cliquable dans une image CMS
Si votre image se trouve dans une Collection (chambres, offres, restaurant…) :
- Accédez à l’Editor via Login.
- Ouvrez la Collection concernée.
- Vérifiez si un champ lien existe dans l’item.
- Ajoutez ou mettez à jour le lien.
- Publiez.
Dans ce cas, l’image devient automatiquement cliquable si le modèle a été configuré pour cela.
Bien choisir le type de lien
Selon l’usage :
• Page interne → navigation fluide et logique
• Page de réservation → conversion directe
• PDF → brochure, carte de restaurant, spa
• Ancre → guider l’utilisateur plus bas dans la page
• Lien externe → partenaires, réseaux sociaux, presse
💡 Pour les pages internes, il est recommandé de ne pas ouvrir dans un nouvel onglet.
Vérifier le comportement mobile
Sur mobile, certaines images cliquables peuvent être difficiles à sélectionner si :
• L’image est trop petite
• Le padding est insuffisant
• D’autres éléments se superposent
• Le lien ne couvre pas correctement l’image
Testez :
• iPhone et Android
• Portrait et paysage
• Avec une navigation réelle, pas uniquement en prévisualisation
Ce qu’il ne faut pas faire
Pour conserver une expérience premium :
• Ne pas insérer un lien en superposition via une interaction complexe
• Ne pas entourer une image avec plusieurs Link Blocks (conflits de clics)
• Ne pas mettre un lien sur une image décorative sans utilité UX
• Ne pas utiliser un fichier trop lourd (performance mobile impactée)
Conclusion
Oui, vous pouvez rendre une image cliquable sur votre site hôtelier. Si le lien existe déjà, l’Editor suffit pour le modifier. Pour ajouter un lien autour d’une nouvelle image, le Designer permet d’utiliser un Link Block pour un rendu propre et responsive. En testant la version mobile et en choisissant le type de lien approprié, vous assurez une navigation fluide et professionnelle à vos visiteurs.