Some of you certainly already know how create links within the same page (which point to a specific place on your page)... But when we start, it's not obvious... During my training, I see many 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 go through here
- 1 â Small reminder: what is an anchor?
- 2 - How to create a simple link: external or internal?
- 3 â How to link to a section on the same page
- 4 - How do I create a link to a section in another page?
- 5 - Link of the menu that points to a section of a specific page
- 6 - Create a manual table of contents
- 7 - HTML anchor, link in the same page, link anchor...
1 â Small reminder: what is an anchor?
Anchoring or " Link anchor ' or "anchoring text" is the word under which the publisher of a site goes insert link. The link in question is a web address, also called URL.
The link can point to:
- An internal page of your site. For example, for my blog, this could be a link to my contact page:
<a href="https://astucesdivi.com/contact">Me contacter</a>In this example, "Contact me" is the link anchor to my contact page.
- A page outside your site. For example, you link to an external site whose subject is related to the theme of your site or to your Facebook profile (regardless):
<a href="https://www.elegantthemes.com/">DĂ©couvrir Divi</a>In this example, Discover Divi is link anchor to an external site.
- A specific place within a page: you make a link to a section or paragraph within the same page:
<a href="#identifiant-css">Voir le paragraphe 3</a>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 raises some concerns when we begin and which deserves special attention, hence the subject of this article.
2 - How to create a simple link: external or internal?
For great beginners, let's first see how to create a simple link (external or internal) with Divi and WordPress...
With the Divi Visual Builder
Divi allows to place links in various ways. The traditional way is to highlight Link anchor contents in your text and click on the link icon to enter the web address, external or internal:
Divi also offers another possibility to insert a link: Link present in the tab Content of each module, line or section:
In this example, I placed a link on the module Image But I could have placed it on any other type of Divi module since each item in Divi has this tab Link.
Unlike the first example, not only the anchor text is clickable but the entire module.
With WordPress Editor (Gutenberg)
If you wish insert links within a page edited with WordPress (without enabling the Divi Builder), the procedure is identical:
The only difference is that with the Gutenberg editor, you can only insert links on an anchor text (such as the animated image above), on an Image block or on a Button block. The other Gutenberg blocks do not offer the possibility of inserting a link on the entire block. For example, you cannot insert a link on a Tableau block.
Reminder: "Link Target" is the way your link should open. You can decide to open it normally (in place of the current page) or in a new browser tab. In HTML, it gives:
This link will open instead of the current page:
<a href="https://astucesdivi.com/contact">Me contacter</a>This link will open in a new browser tab with the attribute target= »_blank » placed in the tag <a> :
<a href="https://astucesdivi.com/contact" target="_blank">Me contacter</a>3 â How to link to a section on the same page
Now let's see how to create a link that returns, not to another page of the site or to an external site, but to a specific section of your page.
For this, you will need to create a CSS identifier, which is called CSS ID.
This identifier ( CSS ID) must be unique in your page, you can only use it once, unlike CSS Classes that can be reused infinity.
LCSS ID allows us to name a web element and stylize it with CSS for example, but in our case this ID will be used for create an internal link within the same page.
Whether with 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 that refers to a section at the bottom of the page:
After clicking on the link, the page scrolls to the desired section (scroll). Now let's see how to do this:
- Edit the settings of the Section destination (the section to which the internal link must return).
- See you in the tab "Advanced" and use the CSS ID field to enter a unique term (which you invent), for example: Learn-more. Note that this CSS ID must not contain special characters, accents, capitals or space (only tiny ones and dashes).
- Then go to the element that must host your link: it can be a button, a call to action or an anchor text. Enter the anchor URL, for my example, it is #learn-more.
Here, the link that leads to a specific section of your page is created and is functional, it's as simple as that!
Note: CSS ID does not contain # â Internal link URL uses #
Internal links in the same page with Gutenberg
With Gutenberg, it's the same. Simply place a CSS ID on a block and create the corresponding link:
- Select the destination block to which the link should return
- In the sidebar, go to the tab Advanced > HTML anchor and enter an ID of your choice. For my example, it is my anchor.
- Elsewhere in your page, you can create an anchor text (or use a button block), by highlighting the element that will become clickable.
- Then click the Link icon.
- Enter the address: for my example, this is #my anchor.
You will understand, this practice is a great classic of HTML and this is why all the web editing tools allow to create internal link anchors in this way.
4 - How do I create a link to a section in another page?
A small precision, 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 home page:
In this case, you will have to specify full URL address followed by CSSID. For example use https://mydomain.com/#lear-more/ for #learn-more Only, otherwise your link will not work.
5 - Link of the menu 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 on a specific page.
For example, you find it unnecessary to create a contact page because a section of your home page might simply contain your form, but you would still like to indicate a link to this form in the main menu.
The approach is then identical to the previous explanations:
- Place your form at the bottom of your home page. See you in the tab Advanced and enter a CSS ID. For example: my-contact-form.
- Then go to the tab Appearance > Menu of your WordPress interface and select the field "Customized Links".
- Enter the full URL of the page where your form is located (in my example, this is the home page) and add the CSSID 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.
In this way, the form at the bottom of your home page will be accessible with just one click from your main menu and you Save creating a new page.
6 - Create 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.
You will then need to add a CSS ID to each of your sections or items 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 need to add your links manually to each item in the list. For example: #section-4 to return to the section that uses CSSID Section 4.
If you publish a lot of content and you need a summary on a regular basis, I would advise you to use a automatic table of contents that will save you a lot of time. If it is casual, the manual method will suffice and you avoid using a plugin additional.
7 - HTML anchor, link in the same page, link anchor...
It's a whole jargon! This article is a "return to basics" but it is super important to know them precisely...
Because nowadays, WordPress tools require so little knowledge that we would almost forget that they write code for us and if you know some tips of this kind, you understand better how WordPress works, Divi, Gutenberg or even other builders like Elementor and company.
And if you were looking how to make a link that points in a section of your pageI hope you found your happiness here!
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
Super Ivan !
Encore un partage d’astuce qui me fait gagner telllllllement de temps. Merci Lycia !
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
Salut Vicky, si ça ne marche pas, il vaut mieux vérifier si tout a été écris de la bonne maniÚre.
Bonjour, on dirait que avec les mise Ă jour, l’ancre interne ne marche plus, quelqu’un a eu le meme problĂšme ?
Non, tu peux avoir un plugin qui fout le bordel ?
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
Salut Marie, tu as dĂ» intervertir le # ?
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 đ
Salut Julien, je ne pense pas que tu puisses agir sur le scroll
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?
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Ă
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
Salut Olivier, regarde le point numéro 2 du chapitre 3 de cet article et dis nous si ça rÚgle le problÚme : https://astucesdivi.com/options-divi-navigation/
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
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
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.
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.
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
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.
Merci pour l’astuce !
Super !
Bonjour,
J’ai crĂ©Ă© un menu avec un onglet du menu qui mĂšne vers une page et qui comporte des sous-menu avec des ancres pour aller dans des sections diffĂ©rentes de cette mĂȘme page.
Quand je suis sur la page d’accueil (ou sur une autre page), et que je clique sur un sous-menu de cet onglet, les ancres fonctionnent et je suis bien redirigĂ© vers la section de cette page.
Par contre, une fois que je suis sur la page en question, si je clique sur les sous-menu, cela l’affiche bien dans la barre d’adresse, mais ça n’y va pas…
Une idĂ©e de quel pourrait ĂȘtre le problĂšme ?
Merci.
Il faut mettre comme lien lâURL entiĂšre oĂč se trouve lâancre suivie de lâancre (avec le hashtag), si tu mets uniquement le # comme lien dans ton Ă©lĂ©ment de menu, cela ne fonctionne que sur la page en question. JâespĂšre ĂȘtre assez claire.
Bonjour ! Je ne sais pas si je suis au bon endroit mais…
J’ai deux bouton en header qui redirigent vers des ancres sur la mĂȘme page. Cela fonctionne trĂšs bien sur PC.
Les blocs avec les ancres sont clonés pour une version mobile de la page.
En version mobile, les boutons (ancres) ne fonctionnent pas. Comme si ni le bloc normal PC, ni le bloc mobile ne sont pris en compte.
J’espĂšre ĂȘtre clair.
Une idée, merci.
Hello ! Je pense que câest normal, les ID doivent ĂȘtre uniques dans une mĂȘme page. Du coup si tu dupliques tes boutons, ils ne le sont plus, car mĂȘme si on ne les voit pas, ils existent dans le code. Il faudrait que tu ne dupliques pas et utilises le mĂȘme bouton sur ordinateur comme sur mobile.
Bonjour Lycia, merci. J’y avais pensĂ© mais il semble que cela ne marche pas non plus. En te lisant je me dis que peut-ĂȘtre on peut dupliquer mobile, le bouton et le bloc et leur donner un ID diffĂ©rent que celui de la version PC. Je vais regarder avec mon technicien Ă son retour de vacances. Bel Ă©tĂ©.
Oui il faut un ID différent
Bonjour Lycia,
Je dĂ©bute dans la crĂ©ation d’un site avec Divi et je dois dire que ton site m’est d’une aide prĂ©cieuse (intĂ©gration d’une police personnalisĂ©e, dividers… beaucoup de rĂ©ponses Ă des questions restĂ©es sans rĂ©ponse avec d’autres sites).
J’avais essayĂ© de laisser un commentaire la semaine derniĂšre mais il n’a pas Ă©tĂ© publiĂ© alors je tente une nouvelle fois.
En effet, j’ai le mĂȘme souci que Nicolas quelques commentaires au-dessus (en avril 2022).
C’est Ă dire que jâai crĂ©Ă© un menu avec un onglet du menu qui mĂšne vers une page et qui comporte des sous-menu avec des ancres pour aller dans des sections diffĂ©rentes de cette mĂȘme page.
ProblĂšme:
* Quand je suis sur la page dâaccueil (ou sur une autre page), et que je clique sur un sous-menu de cet onglet, les ancres fonctionnent et je suis bien redirigĂ© vers la section de cette page (avec un lĂ©ger temps de dĂ©callage un poil gĂ©nant puisque je suis d’abord ramenĂ©e en haut de page, puis ça scrolle jusqu’Ă la section concernĂ©e);
* Par contre, une fois que je suis sur la page en question, si je clique sur les sous-menu, cela lâaffiche bien dans la barre dâadresse, mais ça nây va pasâŠ
Je prĂ©cise que j’ai bien rentrĂ© le lien URL entier de la page oĂč se trouve l’ancre, suivie de # »nom de l’ancre » (un truc comme https://tribu-consulting.net/notre-histoire/#biographies/.
Aurais-tu une idée pour régler ce problÚme?
Merci!
Ah oui, il faut mettre l’URL entiĂšre, sinon ça ne marche pas… Du coup tu as trouvĂ© une solution ?
Non, ça ne fonctionne toujours pas et pourtant l’URL est bien entiĂšre…
Bonjour Lycia,
Le problĂšme est rĂ©glĂ©, ouf! En fait, il s’avĂšre que ça venait tout bĂȘtement du dernier slash aprĂšs mon nom d’ID CSS. Dans un autre tuto il ne le mettait pas donc j’ai testĂ©, et sans ce slash superflu tout fonctionne bien. Merci encore.
Merci beaucoup pour toutes ces explications. C’est trĂšs clair et trĂšs simple d’utilisation. Merci d’avoir pris le temps pour cela !
Merci Bruno
Bonjour Lycia ,
tout d’abord un grand merci pour le travail que tu mets Ă notre disposition ! je suis Ă©patĂ©e et reconnaissante de ouf pour la qualitĂ© de ce que tu dĂ©livres ici.
D’habitude je trouve toutes les rĂ©ponses ici mais j’ai un problĂšme pour lequel je n’ai rien trouvĂ© (ici ou ailleurs) .
J’ai installĂ© des boutons avec des ancres sur mes pages. (il renvoient Ă un formulaire en bas de page).
Cela fonctionne trĂšs bien sur desktop mais en version mobile il y a 2 couacs.
(1)DĂšs l’ouverture de la page le dĂ©filement se fait AUTOMATIQUEMENT et se (2) BLOQUE sur la section de destination de l’ancre. Impossible de remonter….
( j’ai mis l’adresse de mon site dans le formulaire de commentaires ) . J’ai du merder quelque part …. Aurais tu une piste ?
Un grand merci par avance
Tu m’inspires Lycia ! đ
En t’Ă©crivant j’ai eu un flash et j’ai compris le point 1 (dĂ©filement automatique) que j’ai corrigĂ© (j’avais utilisĂ© « diapo » et mis le lien de l’ancre …. donc voila oups … je l’ai juste retirĂ©) . Par contre mon problĂšme de blocage au niveau de l’ancre avec impossibilitĂ© de remonter, persiste sur la page mobile….
Bon ben je suis dĂ©solĂ©e de t’avoir dĂ©rangĂ©e, j’ai paniquĂ©. J’ai fini par trouver une solution. Merci de m’avoir lu.
belle journée et encore merci pour tout ce que tu partages.
ps : je cherche un free lance pour mon seo qui pourrait jeter un oeil sur mon site et rĂ©gler tous les trucs qui coincent niveau technique . Je ne sais pas si tu proposes ce genre de prestations mais si cela t’intĂ©resse n’hĂ©site pas Ă me contacter.
Belle journée
Myriam
Bonjour Lycia,
Merci beaucoup pour cet article !
Je me permets de revenir sur le problĂšme de Nicolas du 13 avril 2023 car j’ai le mĂȘme.
J’ai bien vĂ©rifiĂ© mes liens dans les Ă©lĂ©ments de menu (URL complet + #ancre).
Pourtant, si je suis dĂ©jĂ sur la page en question, le lien du menu sensĂ© me renvoyer plus bas sur cette page ne le fait pas… Mais l’URL s’affiche bien dans la barre de recherche.
Avez-vous une solution pour ce problĂšme ?
Merci !
Merci pour cette astuce !
Quentin, il faut que tu vĂ©rifies que ton ancre n’est utilisĂ©e qu’une seule fois dans ta page, sinon, ça annule son fonctionnement