Créer un lien d’ancrage entre un bouton et un post sur une autre page sous Divi

Comment lier un bouton et un post ou un module placé sur une autre page ? Sur Divi, c’est un jeu d’enfant. Nous utiliserons, pour ce faire, les liens d’ancrage, appelés en anglais anchor links. Ces liens permettent de créer des liens internes au site, qui facilitent la navigation de l’internaute. Ils servent généralement à créer des liens hypertextes entre les titres d’une table des matières avec les chapitres qui leur sont associés dans la même page. Cela montre ce qu’il faut retenir : ces liens d’ancrage permettent de renvoyer le lecteur vers un contenu de notre choix, qu’il se trouve dans la même page ou sur une autre. Divi facilite grandement leur mise en place. Mais, comme je ne suis pas un grand fan des plugins, nous ne traiterons que de la méthode manuelle.

1. Le principe du lien d’ancrage

Prenons notre exemple de départ, pour que vous compreniez bien : pour lier les titres d’une table des matières aux chapitres que chacun d’eux concerne, nous allons devoir créer, pour chaque chapitre, une section qui accueillera un module Ligne et un module Texte où s’insèrera chacun des chapitres. À l’intérieur des modules Texte, les titres de chapitre devront respecter une règle : être présentés uniquement en h2, pas en h1 qui est lui dédié exclusivement au titre général du post.

1.1 La table des matières

Elle accueillera une liste à puces, une par chapitre. On sélectionne le premier titre, puis dans la boîte à outil de l’éditeur de texte, on utilise le symbole nœud de chaîne pour créer un lien. Pour le titre 1, choisissons #chapitre1 (bien faire précéder le nom qu’on lui donne d’un dièse (#).

1.2 Les chapitres

Mintenant, on crée une section avec ligne et module Texte pour chaque chapitre. Puis dans les paramètres de la section du premier chapitre, on va dans l’onglet Avancé et dans l’entrée CSS ID, on inscrit chapitre1, qui se réfère donc au lien inscrit dans le premier titre de la table des matière, mais très important : cette fois sans le #. Bien respecter l’orthographe du texte entré en lien dans le sommaire. Cela fait, on reproduit la même procédure pour les autres chapitres : chapitre2, chapitre3, etc.

Pour vérifier que cela fonctionne, publiez votre post et testez les liens.

2. Comment créer un lien d’ancrage entre un bouton et une section d’une autre page

Maintenant que vous avez compris le principe, on entre dans le cœur de notre sujet : lier un bouton à un post ou un module d’une autre page. La procédure est toujours aussi simple, mais elle diffère sur un point : dans le builder de Divi, les boutons sont toujours assortis d’un paramètre Lien. Le module que j’utilise pour ce tutoriel contient toutefois deux boutons, je n’utilise que le premier et donc, c’est le lien du bouton 1 qui nous occupe.

Dans mon exemple, le bouton « Contactez-moi » doit diriger l’internaute vers le formulaire de contact de ma page Contact. Du côté de mon formulaire de contact, j’ouvre les paramètres de sa section et je rentre dans l’onglet Avancé, case ID CSS le nom attribué à mon bouton : contactez-moi, sans #, comme vu dans le chapitre précédent. On enregistre.

Direction page d’accueil. Là, j’ouvre les paramètres du module qui contient le bouton 1 qui recevra le lien d’ancrage. Dans l’onglet Contenu, je mets dans le lien qui lui est affecté celui du formulaire de contact de ma page, en prenant soin d’ajoutez le # avant contactez-moi, ce qui donne pour le coup l’adresse de ma page Contact suivi de l’ID CSS sans # de mon formulaire de contact :

Désormais, en cliquant sur le bouton Contactez-moi, l’internaute est immédiatement renvoyé vers le formulaire de contact. À vous de jouer.