Créer des liens au sein d’une même page avec Divi ou WordPress

Certains d’entre vous savent certainement déjà comment créer des liens au sein d’une même page (qui pointent vers un endroit spécifique de votre page)… Mais lorsqu’on débute, ce n’est pas évident… Lors de mes formations, je vois plein d’apprenants qui ont encore un peu de mal avec cette pratique. Et pour éviter de toujours répéter les même choses (lol), j’ai décidé de l’expliquer dans cet article, cela pourrait aider d’autres personnes qui passeraient par ici 😉

1 – Petit rappel : qu’est-ce qu’une ancre ?

L’ancre ou « ancre de lien » ou « texte d’ancrage » est le mot sous lequel l’éditeur d’un site va insérer un lien. Le lien en question est une adresse web, aussi appelée URL.

Le lien peut pointer vers :

• Une page interne de votre site. Par exemple, pour mon blog, ce pourrait être un lien vers ma page de contact :

<a href="https://astucesdivi.com/contact">Me contacter</a>

Dans cet exemple, « Me contacter » est l’ancre de lien vers ma page de contact.

• Une page externe à votre site. Par exemple, vous faites un lien vers un site externe dont le sujet est en corrélation avec la thématique de votre site ou vers votre profil Facebook (peu importe) :

<a href="https://www.elegantthemes.com/">Découvrir Divi</a>

Dans cet exemple, « Découvrir Divi » est l’ancre de lien vers un site externe.

• Un endroit spécifique au sein d’une page : vous faites un lien qui renvoi vers une section ou vers un paragraphe qui se trouve au sein de la même page :

<a href="#identifiant-css">Voir le paragraphe 3</a>

Dans cet exemple, « Voir le paragraphe 3 » est l’ancre de lien vers une section spécifique de ma page.

Vous pouvez constater que l’adresse web vers laquelle l’ancre renvoi n’est pas une URL classique, il s’agit d’un identifiant : #identifiant-css.

Et c’est justement ce dernier point qui pose quelques soucis lorsqu’on débute et qui mérite une attention particulière, d’où le sujet de cet article.

2 – Comment créer un lien simple : externe ou interne ?

Pour les grands débutants, voyons d’abord comment créer un lien simple (externe ou interne) avec Divi et avec WordPress…

👉 Avec le Divi Visual Builder

Divi permet de placer des liens de diverses manières. La manière traditionnelle est de surligner l’ancre de lien contenu dans votre texte et de cliquer sur l’icône du maillon pour y saisir l’adresse web, externe ou interne :

Divi offre également une autre possibilité pour insérer un lien : l’onglet Lien présent dans l’onglet Contenu de chaque module, ligne ou section :

Dans cet exemple, j’ai placé un lien sur le module Image mais j’aurais pu le placer sur n’importe quel autre type de module Divi puisque chaque élément de Divi est doté de cet onglet Lien.

À la différence du premier exemple, ce n’est pas seulement le texte d’ancrage qui est cliquable mais le module entier.

👉 Avec l’éditeur de WordPress (Gutenberg)

Si vous souhaitez insérer des liens au sein d’une page éditée avec WordPress (sans activer le Divi Builder), la procédure est identique :

La seule différence est qu’avec l’éditeur Gutenberg, vous pouvez seulement insérer des liens sur un texte d’ancrage (comme l’image animée ci-dessus), sur un bloc Image ou sur un bloc Bouton. Les autres blocs de Gutenberg n’offrent pas la possibilité d’insérer un lien sur la totalité du bloc. Par exemple, vous ne pouvez pas insérer de lien sur un bloc Tableau.

<a href="https://astucesdivi.com/contact">Me contacter</a>

<a href="https://astucesdivi.com/contact" target="_blank">Me contacter</a>

3 – Comment créer un lien vers une section située dans la même page

Voyons maintenant comment créer un lien qui renvoie, non pas vers une autre page du site ou vers un site externe, mais vers une section spécifique de votre page.

Pour cela, vous aurez besoin de créer un identifiant CSS, que l’on appelle ID CSS.

⚠️ Cet identifiant (ID CSS) doit être unique dans votre page, vous ne pourrez l’utiliser qu’une seule fois, contrairement aux Classes CSS qui peuvent être réutilisées à l’infini.

L’ID CSS permet de nommer un élément web et de le styliser avec du CSS par exemple, mais dans notre cas, cet ID va nous servir à créer un lien interne au sein de la même page.

Que ce soit avec Divi ou avec Gutenberg, vous avez tous les outils à votre disposition pour créer des ID CSS et les utiliser pour faire des liens dans la même page.

👉 Liens internes dans une même page avec Divi

Voici un exemple de lien à cliquer en haut de page et qui renvoi vers une section située en bas de page :

Après avoir cliqué sur le lien, la page défile jusqu’à la section désirée (scroll). Maintenant, voyons comment faire :

1. Éditez les paramètres de la section de destination (la section vers laquelle le lien interne doit renvoyer).
2. Rendez-vous dans l’onglet « Avancé » et utilisez le champ ID CSS pour saisir un terme unique (que vous inventez), par exemple : learn-more. Notez que cet ID CSS ne doit pas contenir de caractères spéciaux, d’accents, de majuscule ou d’espace (uniquement des minuscules et des tirets).
3. Rendez-vous ensuite dans l’élément qui doit accueillir votre lien : ce peut être un bouton, un appel à l’action ou un texte d’ancrage. Saisissez l’URL de l’ancre, pour mon exemple, il s’agit de #learn-more.

Voilà, le lien qui mène à une section précise de votre page est créé et est fonctionnel, c’est aussi simple que cela !

📌 Notez : l’ID CSS ne contient pas le # – L’URL du lien interne utilise le #

👉 Liens internes dans une même page avec Gutenberg

Avec Gutenberg, c’est pareil. Il vous suffit de placer un ID CSS sur un bloc et de créer le lien correspondant :

1. Sélectionnez le bloc de destination vers lequel le lien doit renvoyer
2. Dans la barre latérale, rendez-vous dans l’onglet Avancé > Ancre HTML et saisissez un identifiant de votre choix. Pour mon exemple, il s’agit de mon-ancre.
3. Ailleurs dans votre page, vous pouvez créer un texte d’ancrage (ou utiliser un bloc Bouton), en surlignant l’élément qui deviendra cliquable.
4. Cliquez ensuite sur l’icône Lien.
5. Saisissez l’adresse : pour mon exemple, il s’agit de #mon-ancre.

Vous l’aurez compris, cette pratique est un grand classique du HTML et c’est pour cette raison que tous les outils d’éditions de sites web permettent de créer des ancres de lien internes de cette manière.

4 – Comment créer un lien vers une section située dans une autre page ?

Une petite précision, cependant, si vous devez faire un lien interne vers une section spécifique située sur une autre page.

Par exemple, vous êtes sur la page « Contact » et vous souhaitez faire un lien vers une section située en bas de votre page d’accueil :

Dans ce cas, vous devrez préciser l’adresse complète de l’URL suivie de l’ID CSS. Par exemple utilisez https://mydomain.com/#lear-more/ au lieu de #learn-more seulement, sinon votre lien ne fonctionnera pas.

5 – Lien du menu qui pointe vers une section d’une page spécifique

C’est une utilisation assez courante des ancres HTML internes : un élément du menu principal de votre site pointe vers une section située sur une page spécifique.

Par exemple, vous trouvez qu’il est inutile de créer une page de contact car une section de votre page d’accueil pourrait simplement contenir votre formulaire, mais vous souhaiteriez quand même indiquer dans le menu principal un lien vers ce formulaire.

La démarche est alors identique aux explications précédentes :

1. Placez votre formulaire en bas de votre page d’accueil. Rendez-vous dans l’onglet Avancé et saisissez un ID CSS. Par exemple : my-contact-form.
2. Rendez-vous ensuite dans l’onglet Apparence > Menu de votre interface WordPress et sélectionnez le champ « Liens Personnalisés ».
3. Saisissez l’URL complète de la page où se trouve votre formulaire (dans mon exemple, il s’agit de la page d’accueil) et ajoutez l’ID CSS en fin d’URL sans oublier le signe #. Exemple : https://mydomain.com/#my-contact-form/. Ajoutez cet élément au menu et enregistrez vos modifications.

De cette manière, le formulaire situé au bas de votre page d’accueil sera accessible d’un simple clic depuis votre menu principal et vous économisez la création d’une nouvelle page.

6 – Créer une table des matières manuelle

Enfin, une autre utilisation courante des ancres HTML internes est de créer une table des matières au sein d’un article ou d’une page afin que les internautes puissent accéder plus rapidement à des parties (sections) de la publication.

Vous devrez alors ajouter un ID CSS à chacune de vos sections ou éléments contenus dans votre page. Par exemple : section-1, section-2, section-3, etc.

Ensuite, vous pourrez utiliser un module Texte pour Divi ou un bloc Liste numérotée pour Gutenberg et vous devrez ajouter vos liens manuellement sur chaque élément de la liste. Par exemple : #section-4 pour renvoyer vers la section qui utilise l’ID CSS section-4.

Si vous publiez beaucoup de contenus et que vous avez régulièrement besoin d’un sommaire, je vous conseille plutôt d’utiliser une table des matières automatique qui vous fera gagner beaucoup de temps. Si c’est occasionnel, la méthode manuelle suffira et vous évitera d’utiliser un plugin supplémentaire.

7 – Ancre HTML, lien dans une même page, ancre de lien…

C’est tout un jargon ! Cet article est un « retour aux basiques » mais il est super important de les connaitre justement…

Car de nos jours, les outils de WordPress nécessitent si peu de connaissance qu’on en oublierait presque qu’ils écrivent du code à notre place et si vous connaissez quelques astuces de ce genre, vous comprenez mieux comment fonctionnent WordPress, Divi, Gutenberg ou même les autres builders comme Elementor et compagnie.

Et si vous cherchiez comment faire un lien qui pointe dans une section de votre page, j’espère que vous avez trouvé votre bonheur ici !