Toutes les collections
Expliquez les informations sur le projet à votre communauté
Utilisation du widget personnalisé pour afficher des images cliquables
Utilisation du widget personnalisé pour afficher des images cliquables

Cet article décrit comment vous pouvez afficher des images cliquables dans la colonne de droite de votre projet.

Yugandhar Gokhale avatar
Écrit par Yugandhar Gokhale
Mis à jour il y a plus d’une semaine

Les liens sont essentiels pour orienter les visiteurs et les aider à naviguer facilement sur un site web. Dans votre site avec EngagementHQ, vous voulez vous assurer que vous disposez de nombreux liens dans les projets (par exemple pour diriger les gens vers certains documents ou outils) et que vous avez des liens entre les projets pour inciter vos visiteurs à s'engager dans plus d'un projet.

Les liens ne doivent pas nécessairement être en texte, mais peuvent aussi être des images. L'ajout d'images cliquables est un excellent moyen d'inclure des appels à l'action tout en ajoutant de la couleur et de la beauté à votre projet.

Regardez ci-dessous l’exemple d’un site actuel. Non seulement il y a une série de boutons dans la description, mais il y a aussi une belle image cliquable dans l'espace widget.

Comme dans l'exemple, pensez à inclure des images cliquables dans des widgets personnalisés pour favoriser les actions concrètes. 

Avant que vous essayiez la méthode HTML ci-dessous, nous vous recommandons de vous reporter à cet article sur le téléchargement et l'hyperlien simple de l'image vers un lien.

La méthode du code HTML :

Pour ce faire, vous devez disposer d'un code HTML de base que vous pouvez copier ci-dessous, coller dans la vue Code de votre widget personnalisé (voir image ci-dessous) et remplir les parties entre guillemets. Si vous n'avez jamais travaillé avec du HTML auparavant, ne vous inquiétez pas, c'est vraiment très simple:

<a href="Insérer l'URL de destination"><img src="Insérer l'emplacement de l'image" title="Insérer un titre" alt="insert description here" Largeur="700px"></a>

Remplacez le texte entre guillemets comme suit:

  • Insérer l'URL de destination : Remplacez cette adresse par le lien actuel, vers lequel vous souhaitez diriger vos visiteurs lorsqu'ils cliquent sur l'image.

  • Insérer l'emplacement de l'image : Remplacez ce lien par l'emplacement de l'image que vous souhaitez rendre cliquable (dans« img src ». src signifie source). Si vous avez téléchargé votre image dans votre bibliothèque sur EngagementHQ, vous pouvez obtenir le lien de lasource de l'image en suivant les instructions suivantes.

  • Insérer un titre : Pour conserver votre niveau d’accessibilité, par exemple pour les personnes qui utilisent des lecteurs d'écran. Insérer une description: Remplacez cette description par une autre. Ceci est également important pour des raisons d'accessibilité comme ci-dessus. 

  • Largeur : La largeur standard du widget personnalisé dans EngagementHQ est de 450 pixels, mais nous vous recommandons de charger une image de 700 pixels de large, car cela permettra de prendre en compte la largeur de l'image lorsqu'elle esta grandie sur une tablette. Le code spécifie la largeur de l'image à 700 pixels. Vous pouvez toujours la modifier en fonction de vos besoins. 

Copiez et collez ce code, dans la zone de texte Contenu, après avoir cliqué sur l'icône < > dans l'éditeur.

Cliquez sur Enregistrer et fermer.

Vous devriez maintenant avoir une image cliquable dans votre widget personnalisé. Cliquez sur Aperçu et essayez-la. Contactez notre équipe d'assistance si vous avez besoin d'une aide supplémentaire via le chat ou l'e-mail support@engagementhq.com.

Vous trouverez ici des détails sur les différents types de fichiers compatibles avec EngagementHQ.

Avez-vous trouvé la réponse à votre question ?