Insérer un lien derrière un titre dans Jimdo

Dans son interface, Jimdo propose 3 niveaux de titres. Toutefois, l'outil standard ne permet pas d'insérer un lien derrière un titre, ce qui est parfois utile, notamment sur la page d'accueil. Petite astuce pour contourner ce problème.

Faire un lien sur un titre dans Jimdo

Le site ChauxFlash se sert d'images avec un titre pour envoyer le lecteur vers les sections de son blog. Nous avons placé un titre au-dessus de chaque image. Par défaut, seule l'image est cliquable.

Pourtant, un lien sur le titre serait nettement plus ergonomique (les internautes cliquent plus sur les textes que sur les images). Rendre le titre cliquable est également meilleur pour le référencement des sous-pages.

Comment insérer un lien derrière les titres ?

Puisqu'on ne peut pas créer un lien derrière un titre, on crée un élément texte, on le formate en titre au moyen des balises <h2>...</h2>  en allant dans l'affichage en HTML. Enfin, on crée un lien derrière le texte.

Méthode par le code HTML

  1. Insérer un élément texte et écrire le titre
  2. Cliquer sur le bouton </> et remplacer les marques de paragraphe <p>...</p> par <h2>...</h2> ou <h3>...</h3> (note : la balise <h1> est réservée au titre principal de la page, derrière lequel on ne met pas de lien). Enregistrer.
  3. Sélectionner le texte formaté en titre et créer un lien. Enregistrer et tester en mode "Affichage visiteur"

Méthode par copier - coller

  1. Créer un titre dans l'interface (Ajouter élément > Titre 2 ou 3)
  2. Copier le titre
  3. Ajouter un élément "Texte" sous le titre et coller le titre. Le formatage du titre est appliqué sur le texte. NB : normalement, le copier / coller "sauvage" est déconseillé.
  4. Insérer un lien derrière le "faux" titre
  5. Pour que le lien fonctionne, il faut encore "nettoyer" le code HTML : Cliquer sur le bouton </> et supprimer le contenu de la balise <h3 id="...> en ne conservant que <h3>
Supprimer le code en bleu
Supprimer le code en bleu

C'est moche, les liens sont soulignés !

Si votre feuille de style prévoit de souligner les liens dans le texte, les "titres" seront également soulignés, ce qui est... moche.

Ce soulignement peut être évité en ajoutant la ligne suivante dans votre <head> (via les Paramètres) :


<style type="text/css">
/*<![CDATA[*/
h2 a:link {
text-decoration: none;
}
/*]]>*/
</style>

Partagez cette astuce !

Cet article vous a été utile ? Partagez-le ou laissez-moi un commentaire, cela fait toujours plaisir !

Écrire commentaire

Commentaires: 5
  • #1

    Maillard (samedi, 25 novembre 2017 13:40)

    Valable aussi en Jimdo Free ?

  • #2

    Amaranthe (samedi, 25 novembre 2017 14:41)

    Oui car rien n'empêche d'aller dans le code HTML d'une zone de texte en JimdoFree :-)

  • #3

    Martine (dimanche, 05 juillet 2020 14:11)

    Merci beaucoup d'avoir partagé avec nous cette astuce qui m'est bien utile!!

  • #4

    chris (lundi, 05 octobre 2020)

    Très bonne astuce. Merci Sylvie :)

  • #5

    Joelle Swanet (jeudi, 11 février 2021 09:48)

    Je viens d'apprendre comment enrichir un texte en mots-clés et j'avais précisément besoin de cette info pour mon site www.lamagiedutour.com que j'essaye d'optimiser.
    C'est génial, merci !