Some of you probably already know how to create links within the same 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 repeating the same things over and over again (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?
- 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 located on another page?
- 5 - Menu link that points to a section of a specific page
- 6 - Creating a manual table of contents
- 7 - HTML anchor, link within a page, link anchor...
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, this could be a link to my contact page:
In this example, "Contact me " is the link anchor to my contact page.
- A page external to 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 (whatever):
In this example, "Discover Divi" is the link anchor to an external site.
- A specific place within a page: you link to a section or paragraph within the same page:
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 that poses a few problems when starting out and that deserves particular attention, hence the subject of this article.
2 - How to create a simple link: external or internal?
For the absolute 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 a variety of 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:
Divi also offers another possibility to insert a link: the Link tab in the Content tab of each module, line or section:
In this example, I have 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:
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 of inserting 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 choose to open it normally (instead of the current page) or in a new browser tab. In HTML, this is :
This link will open instead of the current page:
3 - How to link to a section on the same page
Now let's see how to create a link that goes not to another page on 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 can only use it once, unlike CSS Classes which can be reused over and over again.
TheCSS ID allows us to name a web element and 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 within 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 leads to a section at the bottom of the page:
After clicking on the link, the page scrolls to the desired section. Now let's see how to do it:
- Edit the parameters of the destination section (the section to which the internal link should refer).
- 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).
- Next, go to the element that you want to host your link: this 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 to a specific section of your page is up and running, 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. All you have to do is place a CSS ID on a block and create the corresponding link:
- Select the destination block to which the link should be directed
- In the sidebar, go to the Advanced > HTML anchor tab and enter an identifier of your choice. For my example, this is my-anchor.
- Elsewhere on your page, you can create anchor text (or use a Button block), by highlighting the element that will become clickable.
- Then click on the Link icon.
- Enter the address: for my example, it is #my-anchor.
As you will have understood, this practice is a great classic of HTML and it is for this reason that all website editing tools allow the creation of internal link anchors in this way.
4 - How do I create a link to a section located on another page?
A small clarification, however, if you need to link internally to a specific section 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:
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.
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 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 that form in the main menu.
The approach is then identical to the previous explanations:
- Place your form at the bottom of your homepage. Go to the Advanced tab and enter a CSS ID. For example : my-contact-form.
- Then go to the Appearance > Menu tab of your WordPress interface and select the "Personalized links.
- 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 homepage will be accessible with a single 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.
You will then need to add a CSS ID to each of your sections or elements 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 regularly need a summary, I would 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 will avoid using a additional.
7 - HTML anchor, link within a page, link anchor...
It's all jargon! This article is a "back to basics" but it's super important to know them...
Because these days, WordPress tools require so little knowledge that you almost forget that they write code for you 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 a way to make a link that points to a section of your page, I hope you've found it here!