Divi Anchor Links Tutorial

by | Feb 18, 2019 | Divi tutorials | 1 comment

How to create Divi anchor links

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
Anchor link to another page
Create a menu anchor link

1 Comment

  1. Kelly

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

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

0 Shares
Share
Tweet
+1
Pin
Buffer