Comment créer une ancre sur Divi ?

par | 2 Sep 2018

ancres Divi
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 servent les ancres 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 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

Dans un menu WordPress classique, on ajoute des pages dans notre menu. Dans le cas des ancres, nous utilisons l’item « liens personnalisés ».

liens_personnalises_wordpress

Renseigner les ancres

Une fois le texte du lien choisi, ajouté votre ID précédé de /#

liens_personnalises_wordpress

Finaliser le menu WordPress

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 ».

<< Retour aux articles

Nos autres articles