Creating links within a page with Divi or WordPress

Published on 28/01/2021 | 23 comments

Some of you probably already know how to create links within a page (that point to a specific place on your page)... But when you're a beginner, it's not obvious... During my trainings, I see a lot of learners who still have a little trouble with this practice. And to avoid always repeating the same things (lol), I decided to explain it in this article, it could help other people who would pass by here 😉

1 - A quick reminder: what is an anchor?

The anchor or " link anchor " or "anchor text" is the word under which the editor of a site will insert a link. The link in question is a web address, also called a URL.

The link can point to :

  • An internal page of your site. For example, for my blog, it could be a link to my contact page:
Me contacter

In this example, "Contact me " is the link anchor to my contact page.

  • An external page to your site. For example, you link to an external site whose subject is in correlation with the theme of your site or to your Facebook profile (whatever):
Découvrir Divi

In this example, "Discover Divi" is the link anchor to an external site.

  • A specific location within a page: you link to a section or paragraph within the same page:
Voir le paragraphe 3

In this example, "See paragraph 3" is the link anchor to a specific section of my page.

You can see that the web address to which the anchor refers is not a classic URL, it is an identifier : #identifier-css.

And it is precisely this last point which poses some concerns when one starts and which deserves a particular attention, from where the subject of this article.

2 - How to create a simple link: external or internal?

For the great beginners, let's first see how to create a simple link (external or internal) with Divi and with WordPress...

👉 With the Divi Visual Builder

Divi allows you to place links in various ways. The traditional way is to highlight the link anchor in your text and click on the link icon to enter the web address, external or internal:

Insérer un lien classique avec le Divi Builder

Divi also offers another possibility to insert a link: the Link tab in the Content tab of each module, line or section:

Placer un lien sur un module avec le Divi Builder

In this example, I placed a link on the Image but I could have placed it on any other Divi module type since every Divi element has this tab Link.

Unlike the first example, it is not only the anchor text that is clickable but the entire module.

👉 With the WordPress editor (Gutenberg)

If you want to insert links within a page edited with WordPress (without activating the Divi Builder), the procedure is identical:

Lien Gutengerg 1

The only difference is that with the Gutenberg editor, you can only insert links on an anchor text (like the animated image above), on an Image block or on a Button block. Other Gutenberg blocks do not offer the possibility to insert a link on the whole block. For example, you cannot insert a link on a Table block.

Remember: the "Link Target " is the way your link should open. You can decide to open it normally (instead of the current page) or in a new browser tab. In HTML, this gives :

This link will open instead of the current page:

Me contacter

This link will open in a new browser tab thanks to the target="_blank " attribute placed in the :

Me contacter

3 - How to create a link to a section located in the same page

Now let's see how to create a link that refers, not to another page of the site or to an external site, but to a specific section of your page.

To do this, you will need to create a CSS identifier, which is called a CSS ID.

⚠️ This identifier (CSS ID) must be unique in your page, you will only be able to use it once, unlike CSS Classes which can be reused endlessly.

TheCSS ID allows us to name a web element and to style it with CSS for example, but in our case, this ID will be used to create an internal link within the same page.

Whether it's Divi or Gutenberg, you have all the tools at your disposal to create CSS IDs and use them to make links in the same page.

👉 Internal links in the same page with Divi

Here is an example of a link to be clicked at the top of the page and which refers to a section located at the bottom of the page:

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

After clicking on the link, the page scrolls to the desired section. Now let's see how to do it:

Lien vers une section de la même page avec Divi
Link to a section on the same page with Divi
  1. Edit the parameters of the destination section (the section to which the internal link should refer).
  2. Go to the "Advanced " tab and use the CSS ID field to enter a unique term (that you make up), for example : learn-more. Note that this CSS ID should not contain any special characters, accents, capital letters or spaces (only lower case and dashes).
  3. Next, go to the element that should host your link: it can be a button, a call to action or an anchor text. Enter the URL of the anchor, for my example, it is #learn-more.

That's it, the link that leads to a specific section of your page is created and is functional, it's that simple!

📌 Note: CSS ID does not contain the # - Internal link URL uses the #

👉 Internal links in the same page with Gutenberg

With Gutenberg, it's the same. You just have to place a CSS ID on a block and create the corresponding link:

Lien interne dans une même page avec Gutenberg
Making an internal link in the same page with Gutenberg
  1. Select the destination block to which the link should be directed
  2. In the sidebar, go to the Advanced > HTML anchor tab and enter an identifier of your choice. For my example, it is my-anchor.
  3. Elsewhere on your page, you can create anchor text (or use a Button block), by highlighting the element that will become clickable.
  4. Then click on the Link icon.
  5. Enter the address: for my example, it is #my-anchor.

As you can see, this practice is a great classic of HTML and that is why all website editing tools allow you to create internal link anchors in this way.

4 - How to create a link to a section located in another page?

A small clarification, however, if you need to make an internal link to a specific section located on another page.

For example, you are on the "Contact" page and you want to link to a section at the bottom of your homepage:

Lien Interne Section Autre Page

In this case, you will need to specify the full address of the URL followed by the CSS ID. For example use https://mydomain.com/#lear-more/ instead of #learn-more only, otherwise your link will not work.

Lien interne vers une section d'une autre page
Internal link to a section in another page of your site (with Divi)

5 - Menu link that points to a section of a specific page

This is a fairly common use of internal HTML anchors: an item in the main menu of your site points to a section located on a specific page.

For example, you find it unnecessary to create a contact page because a section of your homepage could simply contain your form, but you would still like to include a link to this form in the main menu.

The approach is then identical to the previous explanations:

Lien du menu principal vers une section de la page
A main menu item points to a section of the page
  1. Place your form at the bottom of your homepage. Go to the Advanced tab and enter a CSS ID. For example : my-contact-form.
  2. Then go to the Appearance > Menu tab of your WordPress interface and select the "Custom Links" menu.
  3. Enter the complete URL of the page where your form is located (in my example, it is the home page) and add the CSS ID at the end of the URL without forgetting the sign #. Example : https://mydomain.com/#my-contact-form/. Add this item to the menu and save your changes.

This way, the form at the bottom of your home page will be accessible with a simple click from your main menu and you save the creation of a new page.

6 - Creating a manual table of contents

Finally, another common use of internal HTML anchors is to create a table of contents within an article or page so that users can access parts (sections) of the publication more quickly.

Table des matières manuelle avec Divi ou Gutenberg
Create a manual table of contents with Divi (top) or Gutenberg (bottom).

You will then have to add a CSS ID to each of your sections or elements contained in your page. For example: section-1, section-2, section-3, etc.

Then, you can use a Text module for Divi or a Numbered List block for Gutenberg and you will have to add your links manually on each item of the list. For example : #section-4 to link to the section that uses the CSS ID section-4.

If you publish a lot of content and you regularly need a summary, I advise you to use a automatic table of contents which will save you a lot of time. If it is occasional, the manual method will suffice and you will avoid using a plugin additional.

7 - HTML anchor, link in the same page, link anchor...

That's a lot of jargon! This article is a "back to basics" but it's super important to know them...

Because nowadays, WordPress tools require so little knowledge that we almost forget that they write code for us, and if you know a few tricks like that, you'll understand better how WordPress, Divi workGutenberg or even other builders like Elementor and others.

And if you were looking for how to make a link that points to a section of your page, I hope you found your happiness here!

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

1,734 words

7

You should like it too:

Comment personnaliser le curseur de la souris sur votre site ?

How to customise the mouse cursor on your site?

Do you want a site that is customised down to the last detail? I have a quick and easy tutorial to help you customise the mouse cursor on your site. This way, when your visitors hover over a link, the cursor is fully customised!

23 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.

  21. Helene

    Merci pour l’astuce !

  22. Lycia Diaz

    Super !

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