Divi Anchor Links Tutorial

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.

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

Step 1
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.

Create an anchor link in Divi

Step 2
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.

Step 3
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.

Assign ID to Divi section

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.

Button module anchor link

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

Anchor link to another page

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.

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.

Create a menu anchor 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.

8 thoughts on “Divi Anchor Links Tutorial”

  1. Thanks so much! I’ve used this tutorial twice over the past month – it’s incredibly clear and easy to understand.

  2. Dear Mark, your posts have been very useful to me. You explain very well.
    This is what I was looking for, the details on how to pay attention to the Url address and the names so the link can work.
    After watching some videos on YouTube, this post was the answer.
    Thank you very much.

  3. Mark – You are a gifted teacher at heart. Your effort to ensure each pupil “gets it” is evidenced by your clear and concise instructions. It makes you both exceptional and highly effective. Thanks for enriching my Divi user skills.

  4. I feel like I’m missing something — I want to add a ‘go to top’ at the end of a long list (i.e. a bank of names sorted alphabetically). Do I have to create a separate block entirely to get the anchor link to work, or can I just add text like ‘go to top’ for the link within an existing text box and have it link to the top anchor?


Leave a Comment