Divi anchor links can be very handy and are easy to create. In this tutorial, you will be learning how you can create anchor links in 3 different ways.
But first I’ll explain what anchor links are and what the difference is between normal links. A normal link links to the top of another page. An anchor link links to a particular place on that page.
For example, I have created for this tutorial 3 anchor links that you will find right below here. I use them as chapters if you click on one of them you scroll down to that section of this guide. In each section you will find a link “back to top” when clicked on you will scroll back to the top of the page, this is also an anchor link.
- Create an anchor text link in Divi
- Create an anchor link to a particular section on another page
- Create an anchor link in your menu
Create an anchor text link in Divi
Creating an anchor link takes 2 steps. The first step is to create the anchor link and the second step is to assign this anchor to a point on your page (where it needs to go).
Let’s start with a simple text anchor link. You can do this from within the text module. Create the text for you anchor link and then add a hyperlink on it just like you would do when creating a normal link.
Normally with hyperlinks you would now assign it to an URL so it will link to another page. But with anchor links we do it different. Instead of linking it to another page we add an anchor tag that starts with “#” followed by the anchor name. The anchor name can be anything you want it to be but I recommend to name it related to the subject.
Now you need to assign the anchor link to a section of your page so when you clicked on the anchor link it will jump to that part of the page. In Divi we do this by filling in the ID of the anchor to a section, row or module. The ID is the anchor name that you have used in step 2.
Open your section, row or module and go to the advanced tab. In the CSS ID & Classes fil in the anchor ID in the CSS ID field.
Using a button module
You can also use a button module for your anchor link. You place the anchor name in the link field. Place # in front of your anchor name.
Create an anchor link to a particular section on another page
You can also create an anchor link to point out to a particular section on another page. This is very easy to do. You just place # and your anchor name after your target link (see image below).
Make sure that you also place / and then your anchor name with #.
The section where you want to point out needs to have the ID name in the CSS ID & Classes > CSS ID field. In my case the ID would be create-anchor-text-link.
Create an anchor link in your menu
To create an anchor link in you navigation go to Appearance > Menu.
Create a custom link.
In the URL field place the URL of the page and the anchor name with # in front.
In the Link Text field a name for your link.
One page navigation menu
If you are using a one page website than you can create different custom menu items that scroll down to a section of that page. Instead of using the full URL in the custom link field use only #and-your-anchor-name (replace and-your-anchor-name with yours). If you use the full URL than it will jump directly to that part instead of a nice smooth scroll effect.