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

Publié le 28/01/2021 | 21 commentaires

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 :

Insérer un lien classique avec le Divi Builder

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 :

Placer un lien sur un module avec le Divi Builder

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 :

Lien Gutengerg 1

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.

Rappel : la « Cible du lien » est la manière dont votre lien doit s’ouvrir. Vous pouvez décider de l’ouvrir normalement (à la place de la page actuelle) ou bien dans un nouvel onglet du navigateur. En HTML, ça donne :

Ce lien s’ouvrira à la place de la page actuelle :

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

Ce lien s’ouvrira dans un nouvel onglet du navigateur grâce à l’attribut target= »_blank » placé dans la balise <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 :

Lien au sein d'une même page avec le Divi Builder

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

Lien vers une section de la même page avec Divi
Lien vers une section présente dans la même page avec Divi
  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 :

Lien interne dans une même page avec Gutenberg
Faire un lien interne dans une même page avec Gutenberg
  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 :

Lien Interne Section Autre Page

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.

Lien interne vers une section d'une autre page
Lien interne vers une section présente dans une autre page de votre site (avec Divi)

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 :

Lien du menu principal vers une section de la page
Un élément du menu principal pointe vers une section de la page
  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.

Table des matières manuelle avec Divi ou Gutenberg
Créer une table des matières manuelle avec Divi (en haut) ou Gutenberg (en bas).

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 !

Lien vers une même page Divi ou Gutenberg
Liens vers une section Divi
Anchor Link within same page with Divi

1,734 mots

7

Ça devrait vous plaire aussi :

La bibliothèque des Snippets pour Divi

La bibliothèque des Snippets pour Divi

Cet article vous propose un condensé des bouts de code (snippets) à copier-coller sur votre site afin de régler quelques détails visuels/graphiques. Vous allez l’adorer !

Comment fixer la barre d’outils du module Texte de Divi ?

Comment fixer la barre d’outils du module Texte de Divi ?

Découvrez cette astuce rapide qui permet de fixer la barre d’outils du module Texte, afin qu’elle soit accessible de manière constante (au scroll). Ainsi vous gagnerez en efficacité et en productivité lors de la création de vos contenus avec Divi.

21 Commentaires

  1. ivan chosse

    MERCI BEAUCOUP POUR VOS EXPLICATIONS CLAIRES SUR LES LIENS! j’ai passé un temps fou à communiquer avec divi pour en final « ça ne marche pas ». et là j’ai tout compris!
    ça fait du bien de « comprendre »! hihihi
    cordialement
    Ivan

  2. Lycia Diaz

    Super Ivan !

  3. Vero

    Encore un partage d’astuce qui me fait gagner telllllllement de temps. Merci Lycia !

  4. Vicky

    Bonjour Lycia, j’ai suivi exactement le procédé en mettant « Inscris-toi » dans le CSS ID de la section vers laquelle je veux mener et j’ai mis « #inscris-toi » dans le URL du bouton source. Le champs en dessous, j’ai sélectionné «  »Bouton lien cible » « Dans la même fenêtre ». Est-ce qu’il y a autre chose à vérifier? Merci

  5. Lycia Diaz

    Salut Vicky, si ça ne marche pas, il vaut mieux vérifier si tout a été écris de la bonne manière.

  6. Adr111

    Bonjour, on dirait que avec les mise à jour, l’ancre interne ne marche plus, quelqu’un a eu le meme problème ?

  7. Lycia Diaz

    Non, tu peux avoir un plugin qui fout le bordel ?

  8. marie

    Bonjour,
    merci pour ces explications, cependant, après avoir tout suivi à la lettre, vérifié l’orthographe, rien n’y fait, les liens me ramènent tout en haut de la page concerné et de tiennent pas compte des sections ancrées. J’ai le soucis sur toutes mes pages.
    Je précise que j’ai également activé l’option « Méthode alternative de défilement par ancrage » dans les paramètres de DIVI.
    Avez-vous une idée du problème svp ?
    D’avance merci pour votre aide,
    Marie

  9. Lycia Diaz

    Salut Marie, tu as dû intervertir le # ?

  10. Julien

    Bonjour. tuto très clair sur les ancres dans Divi. Tout fonctionne chez moi.
    J’ai un question concernant le défilement jsuqu’à une ancre : actuellement et par défaut, lorsque je clique sur un lien, il y a un scroll automatique dans ma page jusqu’à la cible. Je souhaiterai tester un passage « direct » lorsque je clique sur un lien vers ma cible (sans scroll) .Est-ce possible d’avoir cette option, ou de régler le type de scroll (vitesse de défilement ou animation type accélération/décélération). J’espère avoir été claire 😉

  11. Lycia Diaz

    Salut Julien, je ne pense pas que tu puisses agir sur le scroll

  12. Julien

    Merci pour ta réponse. J’ai une autre question : sur la version mobile de mon site les ancres ne semblent pas fonctionner : les liens de mon menu ne réagissent pas, ni les boutons .Alors qu’en version PC, mes ancres dans la même page fonctionnent parfaitement. Ai-je oublié quelque chose en faisant ma version mobile?

  13. Lycia Diaz

    Oh ça c’est bizarre ! Il y a souvent une mise en cache sur mobile, si tu as modifié récemment ça pourrait venir de là

  14. Olivier Guichon

    Bonjour,
    Lorsqu’on fait un lien dans une même page, l’affichage dans le navigateur ne se positionne pas exactement au niveau de la cible mais il y a toujours un décalage d’1 cm par exemple avec l’élément précédent. C’est le même comportement quand on clique dans l’ascenseur à droite de l’écran sous le curseur: il y a toujours un résiduel de la page précédente qui s’affiche. J’ai des sections dimensionnées à 100vh et qui s’enchainent dans la page et souhaiterais afficher la section entière uniquement bien calé dans l’écran.

    Savez-vous résoudre ce point?

    merci

    Olivier

  15. Olivier Guichon

    Bonsoir Lycia,

    Malheureusement je n’ai que l’option « désactivé le niveau supérieur du menu déroulant » dans navigation/paramètres généraux.

    Avec quelle version as-tu fait les copies d’écrans?

    Est-ce que l’explication que je donne est suffisamment claire pour comprendre ma problématique? Car j’aimerais bien savoir si c’est solutionnable ou si c’est natif dans les navigateurs et il y aurait rien à faire…

    Merci pour ton premier message en tout cas.

    Olivier

  16. Olivier Guichon

    Bonjour Lycia,

    Il me semble que j’avais déjà répondu à ta proposition. Mais je ne vois pas la réponse. Je la refais donc.
    Ma version de divi est probablement plus récente que celle de la copie d’écran que tu montres dans ce point 2. Je n’ai pas l’option « Méthode alternative de défilement » dans l’onglet Divi/option thème/navigation/paramètre généraux. Toutefois je ne pense pas que ça résoudrait ce point. Mais ce point est peut être normal finalement. L’écran d’accueil « Bienvenue sur Astuces Divi » a le même comportement: le passage à la page suivante comme décrit dans mon message précédent laisse une petite bande noir du bas de l’image d’arrière plan en haut de ce 2ieme écran.

    J’ai remarqué que certains sites laissaient un espace blanc assez large entre les écrans. Les transitions ont peut-être cette vertu. elles ont peut-être été créées pour ça.

    J’espère que mon explication est claire.

    Merci en tout cas et votre site est interessant.

    Olivier

  17. Lycia Diaz

    Olivier, tu as raison, cette option n’est plus disponible. Mais en vrai, tu ne devrais pas en avoir besoin, moi je n’ai jamais ce souci on dirait. Sinon, c’est surement solutionnable, il faudrait trouver un snippet de code, que je n’ai pas dans mon chapeau pour l’instant.

  18. Lycia Diaz

    Salut Olivier. Je ne suis pas sûre de tout comprendre. Si tu vas sur un de mes articles et que tu cliques sur un titre de la table des matières, tu verras que ce titre est bien visible (non coupé) dans la fenêtre du navigateur. Mais pour la page d’accueil d’Astuces Divi, je ne comprends pas car je n’ai pas de méthode de défilement par scroll, du moins je crois 😉
    Alors je ne sais pas, il faudrait trouver un petit bout de script certainement pour corriger ce problème… Mais je suis une bille en JS.

  19. mapi

    bonjour,
    j’ai voulu faire une ancre dans le module onglets (1 onglet par ancre, mais ça ne marche pas. Une idée ?
    Merci,
    Mapi

  20. Lycia Diaz

    Je ne sais pas si cela peut marcher avec le module Onglet. Il faut vérifier si tu n’as pas utilisé plusieurs fois la même ancre car cela ne peut pas fonctionner au sein de la même page.

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Je souhaite recevoir les news du blog Astuces Divi !

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Pin It on Pinterest

Shares
Share This