Créer des ancres de menu sous Elementor – 1/2

Table des matières

Lorsque l’on se créé un site web dit « one-page » qui, comme son nom l’indique aux anglophones, ne possède qu’une seule et unique page, on peut vite se retrouver à scroller sans fin pour trouver l’information recherchée. D’où l’intérêt de créer un menu pour accéder plus aisément aux différentes sections de ladite page. Si construire un menu classique sous WordPress est plutôt simple, même si nous pourrons revenir dessus si quelqu’un me le demande (je vous renvoie vers la zone de commentaire à cet effet), créer un menu à partir d’une même page n’est pas forcément évident. C’est là qu’intervient l’Ancre de Menu.

Et comme tous les builders ne proposent pas le même fonctionnement, je m’en vais vous expliquer les différentes méthodes pour les trois builders sur lesquels j’ai été amenée à travailler, à savoir Elementor, Divi et Avada. Vous m’excuserez si je ne couvre pas le builder que vous utilisez actuellement, mais l’une des techniques abordées ci-après devrait fonctionner pour vous également.

1 – Positionnement des ancres de menu

Accessible à partir de la version gratuite d’Elementor, la méthode la plus simple sera d’utiliser l’outil Ancre de menu mis à votre disposition dans le menu Eléments/Général. Sélectionnez l’outil et positionnez-le au-dessus de l’élément qui servira de début de section (ici le titre de l’article)

Une fois l’ancre positionnée, nommez-là en remplissant le champ ID de l’ancre de menu. Avec ou sans majuscule, vous décidez. Sachez que personne ne verra ce terme, il ne servira qu’à la création du menu. Simplifiez-vous donc la tâche utilisant un terme court et explicite. Et notez-le pour l’avoir sous la main lors de la création du menu.

Positionnez autant d’ancres que vous aurez de sections. Attention : pensez bien à ancrer vos sections principales comme vos sous-sections. Et ne vous inquiétez pas, rien ne révèlera la présence de ces ancres sur le site. N’oubliez pas de publier vos modifications et revenez à l’Editeur WordPress.

2 – Création du menu

Maintenant, créons notre menu. Rendez-vous sur Apparence/Menus et créez un nouveau menu. Pour cette technique, nous créerons ce menu à partir des « Liens personnalisés« . Cet élément est très simple à compléter. Vous disposez de deux champs : Adresse web et Texte du lien. Dans le champ Adresse web, entrez le nom de votre ancre (ID) précédé du signe #. Dans le champ Texte du lien, entrez l’intitulé que vous voulez voir apparaitre dans le menu. Assignez ce menu en menu principal et enregistrez-le. Vous avez maintenant un menu regroupant toutes vos ancres, chacune redirigeant vers la section concernée.

3 – Création de sous-sections

Si votre site dispose de nombreuses informations, vous pourrez avoir besoin de créer un sous-menu pour faciliter la navigation. Si votre page est bien organisée, le titre de votre menu sera celui de votre section, du style « Services » ou « Témoignages ».

Mais il arrive qu’il n’y ait pas d’élément qui puisse faire office de début de section. Dans ce cas, WordPress offre la possibilité de créer un titre de menu sans lien. Toujours à partir des « Liens personnalisés« , insérez le caractère # dans le champ adresse Web, le titre de menu souhaité dans « Texte du lien » et ajoutez cette entrée au menu. Une fois l’élément ajouté, supprimez le # pour ne pas affecter votre référencement.

A partir de ce header de menu, vous pourrez ajouter les menus ancrés créés précédemment et les organiser à votre convenance.

Exemple d'utilisation des liens personnalisés

Vous voilà avec un menu aux petits oignons pour votre one-page !

f39200Rendez-vous dans quelques jours pour les autres builders. En attendant, si vous avez besoin de conseils sur votre site, sa construction. sa maintenance ou son alimentation, vous savez me contacter 🙂

Vous avez apprécié cet article ?

Partager sur facebook
Partager sur twitter
Partager sur linkedin
Partager sur pinterest

Leave a comment

Demande de devis

Vous avez un projet ? Rencontrons-nous !