Passer au contenu principal
Utilisez des Images Liées sur votre Page de Projet

Transformez les images en hyperliens dans les widgets personnalisés ou les descriptions de projets.

Vidya N avatar
Écrit par Vidya N
Mis à jour il y a plus de 4 mois

Sur votre site EngagementHQ, vous pouvez utiliser l'éditeur de texte ou le Mode HTML pour transformer les images en liens. Les liens images peuvent être utiles pour ajouter des appels à l'action sur les pages de votre projet, mais ils posent quelques problèmes d'accessibilité.

Les images liées deviennent soit décoratives, soit fonctionnelles, et doivent être accompagnées du texte alternatif pertinent. Les images décoratives, telles que les cartes de projet sur votre page d'accueil, sont accompagnées d'une légende qui explique ce que fait le lien et ne nécessitent pas de texte alternatif. Les images fonctionnelles, telles que les liens vers des boutons, doivent être accompagnées d'un texte alternatif décrivant la fonction du lien.

Vous pouvez ajouter des images liées dans des zones telles qu'un widget personnalisé, une description de projet ou le widget de style libre sur la page d'accueil, et il y a deux façons de le faire :

Si vous utilisez une image liée pour promouvoir l'inscription, veuillez consulter les widgets intégrés Bannière d'Inscription et Suivre le Projet. Si vous souhaitez afficher des images, nous vous invitons à utiliser le Widget Photos pour ajouter une galerie d'images.

Utiliser l'éditeur de texte

Cette option est préconisée car elle est plus simple et ne nécessite aucune connaissance en HTML.

  1. Utilisez la fonction Insérer une image pour placer l'image à l'endroit prévu.

  2. Choisissez l'image et, dans le menu des options, cliquez sur l'icône Insérer un lien.

  3. Collez l'URL et cochez la case Ouvrir dans un nouvel onglet, si nécessaire.

  4. Ajouter un Texte alternatif correspondant.

  5. Faites un Aperçu du projet pour s'assurer que le lien fonctionne.

L'exemple ci-dessus est une image liée dans la description du projet.

Utiliser HTML dans le Mode HTML

Vous devez avoir des connaissances élémentaires en HTML pour utiliser cette fonction. Vous devrez utiliser l'extrait de code suivant :

<a href= “insert destination URL here”><img src=”insert image location here” title=”insert title” alt=”insert description here”></a>

Remplacer le texte cité par le texte suivant :

  • Insérer ici l'URL de destination : l'URL vers laquelle vous souhaitez établir un lien

  • Insérer l'emplacement de l'image ici : l'URL de l'image que vous souhaitez afficher

  • Insérer le titre : le titre de l'image que vous utilisez

  • Insérer la description ici : le texte alternatif de votre image

Cet exemple est une image liée dans un widget personnalisé.

Pour ajouter l'extrait de code :

  1. Une fois que vous avez configuré et copié votre extrait de code, accédez à l'éditeur de texte de la zone dans laquelle vous souhaitez le placer.

  2. Cliquez sur < > pour ouvrir le Mode HTML.

  3. Collez l'extrait à l'endroit où vous souhaitez que l'image soit placée et sélectionnez < > pour fermer le Mode HTML. Vous ne pourrez pas enregistrer tant que le Mode HTML sera ouvert.

  4. Enregistrez vos modifications.

Faites un Aperçu de votre projet pour vous assurer que l'image et le lien s'affichent bien. Si vous rencontrez des problèmes, veuillez contacter notre équipe d'assistance par chat ou par courriel.

Quoi d’autre

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