Comme promis et pour faire suite à mon dernier article, je vous donne la méthode pour créer simplement des ancres de lien sur les builders Divi et Avada, ainsi que quelques petits tuyaux supplémentaires.
Je ne reviendrai pas sur la création de menus dans le back-office de WordPress, cette technique étant identique, quel que soit le builder utilisé. Vous pourrez la retrouver dans l’article précédent qui concernait Elementor et Elementor Pro.
Mais revenons sur nos deux autres builders et la création d’un menu sur votre one-page.
Créer une ancre de menu sous Avada
Avada, tout comme Elementor, a choisi d’intégrer les ancres de menu dans ses éléments de construction. Nommé Menu Anchor, cet élément est accessible via la bibliothèque Avada et se positionne au-dessus de la section de destination.
Une fois l’élément positionné, rendez vous dans les réglages et entrez le nom de votre ancre dans la fenêtre de saisie Name sans le #.
Comme toujours, saisissez autant d’ancres que nécessaires puis passez à la création du menu dans le B.O. de WordPress.
Créer une ancre de menu sous Divi
Sous Divi, point d’élément de menu, il faut donc user d’une autre technique, toute aussi efficace et toute aussi rapide. La raison pour laquelle l’élément n’existe pas vient probablement du fait que les fonctionnalités pour créer cette ancre sont déjà accessibles à partir de tous les éléments mis à disposition par Divi.
Pour y accéder, il vous suffit de vous positionner sur l’élément de votre choix : section, rangée ou module et de suivre les étapes suivantes :
- Accédez au menu de paramétrage ⚙︎
- Cliquez sur l’onglet Avancé puis sur le menu ID et classes CSS
- Dans ID CSS, entrez l’identifiant de votre choix (toujours sans #) et enregistrez.
N’oubliez pas d’utiliser des identifiants simples et de les noter pour les faire correspondre lors de la création de votre menu dans le Back-Office de WordPress.
Et pour les autres builders ?
En réalité, la méthode que nous avons utilisé via Divi est celle qui fonctionnera sous n’importe quel builder avec lequel vous choisirez de travailler.
Tous les éléments entrant dans la construction d’une page sont dotés de cette fonctionnalité CSS ID. Elle peut être positionnée à différents endroits, selon ce que l’équipe de développement aura décidé, mais elle est généralement aisée à trouver.
Sous Divi, nous l’avons vu, elle se trouve sous l’onglet Avancé, comme sous Elementor. Sous Avada, vous trouverez cette fonctionnalité en bas du menu Général de l’élément sélectionné.
Les autres usages des ancres de menu
Créer une ancre vers une autre page du site
Jusqu’ici, on a vu comment créer une ancre qui amène vers une section d’une même page. Alors comment créer une ancre qui mènerait vers une autre ressource du site ?
L’astuce se passe sur le back-office WordPress, au moment de la création du menu. Lors de la création du lien personnalisé, il suffit d’insérer l’adresse de la page cible, suivi du # de l’ancre : ex : https://monsiteweb/apropos/#portfolio. Dans cet exemple, le menu nous amène vers la page A propos et directement à la section dont l’ID sera portfolio.
Cette astuce fonctionne de la même manière si vous souhaitez diriger votre lecteur d’un article de votre blog vers le paragraphe précis d’un autre de vos articles.
Dans ce cas, créez un lien sur votre page de départ. Au moment de renseigner l’URL de destination du lien, insérez le lien de la page de destination avec le # de la section de destination.
Créer un sommaire d’article
Les ancres ne sont pas utiles uniquement sur la page d’accueil de votre site. Elles sont également extrêmement utiles à la création d’un sommaire pour un article fourni. Dans ce cas de figure, tout se passe sur l’interface de saisie de WordPress, à la rédaction de votre article.
Chacun des titres de votre article peut être agrémenté d’une ancre HTML. La procédure est extrêmement simple :
- Créez nouveau bloc et sélectionnez l’élément Titre grâce à l’icône +
- Entrez votre texte
- Tout en restant positionné sur cet élément, sélectionnez le menu Bloc à droite de votre page
- Dans Avancé, entrez votre ancre dans le masque de saisie Ancre HTML
Pour créer votre menu, il vous suffit de copier tous vos titres en début d’article et de créer un lien à partir de chaque titre. Dans ce lien, entrez le nom de votre ancre, précédé du symbole #.
Bien sûr, vous pouvez aussi choisir la facilité et utiliser un plugin de type Easy Table of Content, dont le paramétrage simple vous évitera quelques cheveux blancs 🙂
Voilà pour les ancres. Rendez-vous dans quelques jours pour de nouveaux conseils, astuces et bonnes pratiques !
Que vous ayez besoin de conseils personnalisés, de faire construire votre site ou simplement de faire auditer sa structure et/ou son contenu, contactez-moi et nous discuterons de votre projet.
