Créer un lien "ancre" au sein d'une page

Dans le cas d'une page assez longue ou d'un site d'une seule page (voir exemple), il est parfois nécessaire d'envoyer les gens plus bas dans la page. On utilise pour cela un lien vers "une ancre", c'est-à-dire un lien au sein de la même page. Conseils et mode d'emploi.

Créer une ancre dans une page Jimdo

Un exemple : lien vers les conditions générales

Dans le formulaire d'inscription à nos formations, on recommande de lire les conditions générales qui se trouvent en bas de la page. Une fois que les conditions ont été lues, on propose un lien pour revenir ("remonter") au formulaire.

Etape 1 : créer une ancre là où le lien va mener

  • Placez-vous juste au-dessus du texte où vous souhaitez amener les visiteurs (dans notre exemple, au-dessus du titre "Conditions générales").
  • Créez un élément "Widget / HTML"
  • Indiquez le code suivant : <a name="conditions" id="conditions"></a> et sauvez
  • Le nom ("name") de l'ancre ne doit pas comporter de blanc ni d'accent

Etape 2 : créer un lien vers l'ancre

  • Revenez au début de la page et préparez le texte qui servira de lien, soit sous forme de table des matières (liste à puces), soit un simple texte (ex : "Lisez nos conditions générales ci-dessous").
  • Sélectionnez le texte qui sera cliquable
  • Créez un lien EXTERNE avec le nom de l'ancre précédé d'un carré (ex : #conditions)

Etape 3 : nettoyer le code HTML généré par Jimdo

Lorsque l'on crée un lien "externe", Jimdo l'ouvre dans une nouvelle fenêtre. Dans le cas du lien vers une même page, c'est très désagréable pour le visiteur. On devra donc supprimer un morceau de code autour du lien. Pour cela :

  • Cliquez sur la zone de texte avec le lien vers l'ancre
  • Affichez le code HTML (via le bouton bleu "Options supplémentaires" puis le bouton </>)
  • Supprimez, pour chaque lien, le morceau de code suivant : target="_blank"
  • Cliquez sur OK puis sur "Enregistrer"
  • TESTEZ soigneusement les liens créés en passant par le mode "Afficher" de Jimdo !

Etape 4 : proposer un lien pour remonter en haut de la page

  • Reprenez l'étape 1 en créant une ancre nommée "top" en haut de votre page
  • Créez des liens pour revenir au point de départ de la page, sous chaque paragraphe vers lequel vos liens envoient les visiteurs.

Pensez également à activer (via les paramètres) le bouton "Vers le haut" en bas de chaque page.

Mettre une ancre sur un bouton

Ariana (commentaire ci-dessous) souhaitait nettoyer le code HTML pour créer une ancre sur une même page via un bouton d'action et non un texte surligné.

 

Dans ce cas, on va coder le bouton pour qu'il puisse être relié à l'ancre au sein de la même page. Voici le code du bouton "ancre" (à mettre dans un élément Windget / HTML) :

<div id="cc-m-13455919225" class="j-module n j-callToAction">
<div class="j-calltoaction-wrapper j-calltoaction-align-1">
<a class="j-calltoaction-link j-calltoaction-link-style-2" data-action="button" href="#tarifs" data-title="Tarifs et disponibilités">Tarifs et disponibilités</a>
</div>
</div>

Mettre des ancres dans le menu de Jimdo

La navigation standard de Jimdo permet de créer un lien vers une ancre au moyen du lien suivant (JimdoPro et JimdoBusiness uniquement). Ceci est utile si vous créez un site sur une seule page.

 

Dans "Modifier navigation", cliquez sur "Lien externe" et remplacez le nom de la page par le nom de l'ancre précédé de /# (exemple : /#astuces).


 

Bon à savoir : si vous créez un site web sur une seule page, vous pouvez suivre cet excellent tutoriel en anglais.

Un script pour ralentir la vitesse de défilement vers l'ancre

Pour que la page se déroule doucement vers la cible du lien "ancre", vous pouvez utiliser le script proposé dans le tutoriel en anglais sur les sites en une page (vous pouvez le copier, il se situe tout en bas de l'article).

Il faut coller ce code dans le "head" de votre site (via les paramètres).

N'abusez pas des ancres !

Dans le cas de mon formulaire d'inscription, j'ai mis les conditions générales sur la même page pour éviter de perdre mes visiteurs au moment crucial de leur inscription. J'ai donc utilisé un lien vers le bas de la page.

 

Toutefois, le visiteur est souvent perdu lorsqu'il clique sur un lien vers une ancre. Il faut donc limiter cette pratique.

 

Si votre page est longue, vous pouvez :

  • soit créer des sous-pages et permettre d'y accéder via des liens textuels ET des menus (n'oubliez pas des liens textuels entre les pages, au bas de chaque page)
  • soit laisser la page longue mais aérer le texte en y intercalant des sous-titres, de façon à ce que le visiteur y navigue facilement.
Related Posts Plugin for WordPress, Blogger...

Partagez cet article !

Écrire commentaire

Commentaires : 11
  • #1

    Maillard (jeudi, 19 février 2015 22:24)

    Super clair !
    Un tout grand merci, Sylvie

  • #2

    Arianna (lundi, 28 décembre 2015 00:34)

    Est-il possible de nettoyer le code HTML pour créer une ancre sur une même page via un bouton d'action et non un texte surligné ?
    Merci d'avance

  • #3

    Amaranthe (mardi, 22 mars 2016 13:37)

    Chère Arianna,

    Voici le code du bouton "ancre" (à mettre dans un élément Windget / HTML) :

    <div id="cc-m-13455919225" class="j-module n j-callToAction">
    <div class="j-calltoaction-wrapper j-calltoaction-align-1">
    <a class="j-calltoaction-link j-calltoaction-link-style-2" data-action="button" href="#tarifs" data-title="Tarifs et disponibilités">Tarifs et disponibilités</a>
    </div>
    </div>

  • #4

    Morgane (lundi, 08 août 2016 16:50)

    Bonjour,
    Tout d'abord merci pour ce tuto ! Une question, comment faire pour que la page ne s'ouvre pas dans un nouvel onglet, lorsqu'on intègre l'ancre directement dans le menu? (j'ai bien compris comment le faire lorsqu'il s'agit d'un texte)
    Merci d'avance

  • #5

    Morgane (lundi, 08 août 2016 16:54)

    (ma question est d'ailleurs valable pour tous les liens externes insérés dans le menu, pas seulement dans le cas où on utilise des ancres)

  • #6

    Jo (jeudi, 12 janvier 2017 15:44)

    Bonjour,
    Merci pour ce tuto qui a toujours fonctionné jusque fin 2016 car depuis 2 jours, lorsque je met en place des ancres (et après toutes vérifications), si je clique dessus, il m'ouvrir une nouvelle fenêtre où le site me dit que la page est introuvable.
    Je ne sais vraiment pourquoi ça me fait ça, est-ce que le changement, depuis janvier 2017, en https peut en être la cause?

  • #7

    Amaranthe (vendredi, 13 janvier 2017 09:53)

    Bonjour Jo, Merci d'avoir signalé ce problème. Avez-vous remonté l'info à Jimdo ? C'est très probablement lié au passage en https, en effet.

  • #8

    LURDOS (mardi, 21 février 2017 14:57)

    Bonjour,
    Je suis en rain de retire mon site en one page, et je n'arrive pas a modifier le menu de base du site pour que lorsque l'on clique sur présentation par exemple on arrive sur la partie de la page correspondante sans pour autant ouvrir un nouvel onglet. Comment faire
    Merci

  • #9

    Amaranthe (mardi, 21 février 2017 21:24)

    Cher Lurdos,

    Je vous invite à consulter ce tutoriel en anglais sur les sites d'une page : https://support.jimdo.com/faq/how-to-make-a-one-page-website/

    Voici le résultat en ligne : https://amaranthe3.jimdo.com/ (les menus n'ouvrent pas une nouvelle fenêtre, c'est donc possible).

    Tenez-moi au courant et bon travail !

  • #10

    LURDOS (mercredi, 22 février 2017 15:39)

    Bonjour,
    Merci pour votre réponse. Je n'arrive pas a mettre en place la procédure. Je dois être idiot, mais il y à toujours quelque chose qui ne fonctionne pas.
    Pourriez-vous m'aider ?
    Merci

  • #11

    Jo (samedi, 18 mars 2017 19:29)

    Bonjour voici la réponse du support jimdo concernant mon post #06 :

    "Si les ancres que vous évoquées sont "Discographie I Radioshow I Vidéos", celles-ci fonctionne correctement, avez vous résolu votre problème ? En général, les ancres cassent lors la navigation est réorganisée, ou même lorsque l'onglet est renommé ; lorsque vous faites cela sur une pages où il y a des ancres, il faut bien veiller à actualiser les liens/ancres qui y mènent.

    Concernant le second site, nous vous laissons la possibilité d'insérer du code, mais nous ne pourrons cependant pas vous fournir de code pré-fabriqué pour réaliser une fonction particulière ni vous proposer de support le concernant. La communauté Jimdo France pourra cependant peut-être vous aider, que ce soit sur ce site: http://communautefrancophone.jimdo.com/ ou sur notre forum: http://www.jimdoforum.fr/"

    Je n'ai donc pas de réponse à mon problème, tant pis.