Si vous souhaitez faire un site web en une page (« site one-page »), vous aurez certainement besoin de savoir créer une ancre.
A quoi sert une ancre sur WordPress ?
Une ancre a pour objectif de faire un lien au sein d’une même page. Par exemple dans un site one-page, le menu principal peut mener aux différentes parties de votre page.
Voici l’exemple d’un site de restaurant où le menu est composé de 4 items :
- En ce moment
- Menu & carte
- Avis
- Contact
Chacun de ses points correspond à une section spécifique pour pouvoir naviguer sur les différentes parties de la page.
Ajouter des ancres dans sa page
Identifier les sections clés où faire les liens
Pour pouvoir faire des liens comme dans l’exemple ci-dessous, chaque partie de votre menu doit correspondre à une section dans Divi. Si votre site présente votre activité d’indépendant, vous pourrez par exemple avoir les sections suivantes :
- Présentation
- Prestations
- Nos clients
- Nous contacter
Ajouter des identifiants aux sections de Divi
Une fois ces sections définies, ajouter un nom à chacune un « ID CSS » dans chacune des sections avancées de votre page.
Allez dans les paramètres de la section > Avancé > ID et classes CSS > ID CSS
Attention, chaque ID ajoutée doit être unique. Deux ID sur une même page ne peuvent porter le même nom. En effet, si le point A doit aller vers le point B mais qu’il y a deux B possibles, le lien ne pourra fonctionner.
Paramétrer son menu principal dans le tableau de bord de WordPress
Une fois vos sections identifiées avec vos id distincts, retournez dans votre dashboard WordPress afin de paramétrer le menu principal. Pour cela, rendez-vous dans la partie apparence puis menus. C’est ici que vous allez reporter chaque ancre renseignée dans l’étape précédente.
Ajouter des liens personnalisés pour naviguer facilement
Dans un menu WordPress classique, on ajoute des pages dans notre menu. Dans le cas des ancres, nous utilisons l’item « liens personnalisés ».
Renseigner son ancre grâce au sélecteur ID
Une fois le texte du lien choisi, ajouté votre ID précédé de /#
Finaliser le menu WordPress pour une navigation optimisée
Ajoutez chacune des ancres au menu principal de WordPress et testez ensuite. Si vous avez des pages annexes à insérer au menu, vous pouvez également les ajouter de façon classique avec la section « pages ».
