1 000 FAQ, 500 tutoriels et vidéos explicatives. Ici, il n'y a que des solutions !
GĂ©rer les ancres sur Site Creator
Ce guide concerne Site Creator et la possibilité de créer des liens vers des ancres.
Qu'est-ce qu'une ancre ?
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: 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: cliquer ici pour l'atteindre !
Comment créer ce type de lien ?
Habituellement, pour créer une ancre en HTML, voici comment procéder :
- identifier l'endroit sur votre page où vous souhaitez créer une ancre (section de texte, image ou tout autre élément)
- utiliser la balise
<a>
avec l'attributhref
pour spécifier la cible de l'ancre- si la cible est sur la même page, utiliser simplement l'ID de l'élément (voir point 3 ci-dessous)
<a href="#section1">Aller Ă la section 1</a>
- si la cible est sur une autre page, spécifier 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>
- si la cible est sur la même page, utiliser simplement l'ID de l'élément (voir point 3 ci-dessous)
- dans la section de votre page où vous souhaitez que les utilisateurs soient redirigés, ajouter 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.
Comment faire avec Site Creator ?
Dans 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 pour faire pointer un lien dessus.
Trouver la référence du bloc de destination
Pour accéder à Site Creator :
- se connecter au Manager Infomaniak (manager.infomaniak.com) depuis un navigateur Web comme Brave ou Firefox
- cliquer sur l'icône en haut à droite de l'interface (ou naviguer grâce au menu latéral gauche p.ex)
- choisir HĂ©bergement (univers Web & Domaine)
- cliquer directement sur le nom de l'objet concerné dans le tableau qui s'affiche
- cliquer sur Site Creator dans le menu latéral gauche
- cliquer sur Personnaliser mon site
Une fois dans Site Creator :
- survoler le bloc de contenu à modifier et cliquer sur la roue dentée:
- faire défiler les paramètres jusqu'à la fin pour obtenir l'ID du bloc en question:
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 :
- sélectionner un texte
- cliquer ensuite sur l'icĂ´ne du chainon:
- choisir 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:- mettre le lien avec le signe dièse (lien vers la même page):
- mettre le nom de la page suivie de l'ID:
- mettre le lien avec le signe dièse (lien vers la même page):