Gérer les ancres sur Site Creator

Ce guide concerne Site Creator et la possibilité de créer des liens vers des ancres.

Préambule

• Une ancre en design Web est un lien hypertexte qui pointe vers une position spécifique sur une page web, qu'elle soit sur la même page ou sur une page différente. Lorsqu'un utilisateur clique sur un lien d'ancrage, il est redirigé vers l'endroit spécifié (en principe une indication invisible placée dans le code source) de la page.
• Les ancres sont utiles pour permettre aux utilisateurs de naviguer rapidement vers des sections spécifiques d'une page Web ou même d'une autre page. Elles améliorent l'expérience utilisateur en fournissant un moyen efficace de trouver et d'accéder à des informations précises.

Exemple d'ancre

Une ancre est située (de façon invisible) en bas de cette FAQ. Elle est nommée "fin", par conséquent le lien suivant contient tout simplement la cible #fin et sans autre indication, un navigateur Web va chercher ce terme dans le code de la page où l'on se trouve et diriger l'utilisateur dessus: cliquez ici pour l'atteindre !

Créer ce type de lien sur Site Creator

Habituellement, pour créer une ancre en HTML, voici comment procéder :

1. Identifiez l'endroit sur votre page où vous souhaitez créer une ancre (section de texte, image ou tout autre élément).
2. Utilisez la balise <a> avec l'attribut href pour spécifier la cible de l'ancre:
   1. si la cible est sur la même page, utilisez simplement l'ID de l'élément (voir point 3 ci-dessous)
      <a href="#section1">Aller à la section 1</a>
   2. si la cible est sur une autre page, spécifiez l'URL complète de la page, suivie de l'ID de l'élément cible (voir point 3 ci-dessous)
      <a href="page2.html#section1">Aller à la section 1 de la page 2</a>
3. Dans la section de votre page où vous souhaitez que les utilisateurs soient redirigés, ajoutez un élément avec l'ID correspondant:
   <div id="section1"> <!-- Le contenu de la section 1 --></div>
    

Lorsque les utilisateurs cliquent sur le lien "Aller à la section 1", la page fera défiler automatiquement jusqu'à la section ayant l'ID "section1". Si la cible est sur une autre page, ils seront redirigés vers cette page et l'ancre fonctionnera de la même manière.

Avec Site Creator, le point 3 ci-dessus n'est pas "libre": chaque bloc possède déjà son ID (ou hashtag) qu'il faudra indiquer (ou modifier au préalable - voir point 3 ci-dessous) afin de faire pointer un lien dessus.

Trouver la référence du bloc de destination

Accédez à Site Creator:

1. Cliquez ici afin d'accéder à la gestion de votre produit sur le Manager Infomaniak (besoin d'aide ?).
2. Cliquez directement sur le nom attribué au produit concerné.
3. Cliquez sur Personnaliser mon site:
   

Une fois dans Site Creator :

1. Survolez le bloc de contenu à modifier et cliquer sur la roue dentée:
   
2. Faites défiler les paramètres jusqu'à la fin pour obtenir l'ID du bloc en question:
   
3. Un double-clic sur le champ indiquant l'ID permet de spécifier son propre intitulé à la place de l'ID aléatoire:
   

Créer un lien vers la référence du bloc

Pour ajouter un lien sur du texte dans Site Creator, avec comme destination le bloc situé plus bas sur la même page :

1. Sélectionnez un texte.
2. Cliquez ensuite sur l'icône du chainon:
   
3. Choisissez le type "Section" pour créer un lien vers une partie de la même page en choisissant la référence du bloc obtenue ci-dessus:
   
   
   Autres possibilités:
   1. Mettre le lien avec le signe dièse (lien vers la même page):
      
   2. Mettre le nom de la page suivie de l'ID:
      

FIN DE LA PAGE (et ancre placée sur cet élément) - cliquez ici pour remonter à l'ancre située au début de la page…