How to use anchor links in your Divi website

Anchor links are used to quickly jump from one part of a webpage to another.

Divi anchor links can be used to create a one-page website with anchor links added to a menu or allow users to quickly move to a specific section of information on a long page.

The anchor link guide will cover;

• What is an anchor link?
• How to create a one-page website with a navigation menu using anchor links
• How to create a “Table of Content” section using anchor links
• How to fix Divi anchor links not working

Will will show you two common uses for anchor links in Divi, but first, let’s quickly explain exactly what an anchor link really is.

What is an anchor link and how does it work?

An anchor link is a unique ID that is attached to a content block or specific element on a page or post. If a user clicks on the anchor link URL they will be taken to that particular “anchored” section.

In Divi, you have the option to use CSS IDs as anchor links. You can add a CSS ID to any section or module you have access to using the Divi Builder.

For example, you can set a CSS ID of “myanchorlink” for a specific Divi section, row, or module on a page of your website. If you want to use anchor links to link to the same page then just add a link of “#myanchorlink” to a button or link text and it will take you to that section.

If you want to create a Divi anchor link to another page you can use the URL “www.example.com/examplepage#myanchorlink”, which will load up the webpage and automatically scroll you to the section where the “myanchorlink” CSS ID anchor link has been added.

How to add anchor links to create a one-page menu in Divi

Single-page or one-page websites are excellent for providing users with all the necessary information without having them jump around your website. However, if the one-page website is too long, it can become cumbersome to jump between different sections. As such, here is a step-by-step guide on using anchor links to create a one-page navigation menu.

Step 1: Assign anchor links to Divi sections

First, you can assign anchor links to the different sections of your one-page website. Then you can create links in the menu that allows users to conveniently jump between sections.

Here’s a quick example showcasing how to implement this feature, so you too can do this on your website.

Now for the sake of this tutorial, we will be using one of Divi’s premade layouts – “DJ Landing Page.”

One Page Layout Example

It’s a perfect example of a one-page layout with multiple scrollable sections. Now the question comes, how to add anchor links to the sections and make the page easy to navigate?

Well, the first step is to figure out which sections on the page you want to link to.

The demo page that we are using has the following sections – Welcome, Latest Releases, Book An Event, DJ Services, Previous Tours, About Me, and Contact Us. Skipping the “Welcome” section, we will need to add an anchor link to all the remaining sections to jump to it.

So let’s start with the “Latest Releases” section. Select it, and open the Section settings. Now go to the Advanced tab and add the CSS ID – “latest-releases”. Click the green tick icon to save your configuration.

Add CSS ID to Divi Section 1

Next, scroll down to the next section – “Book An Event”. Same as before, open the Section settings, go to the Advanced tab, and add the CSS ID – “book-an-event,” followed by hitting the green tick icon.

Add CSS ID to Divi Section 2

Similarly, we go ahead and add a CSS ID to all the remaining sections on the page. Here’s a quick look at the different CSS IDs we used:

• dj-services
• previous-tours
• about-me
• contact-us

After setting up the unique CSS ID your work is done in the Divi editor. Click on Save and exit the editor. It’s now time to create the menu anchor links.

Step 2: Create a primary menu with anchor links for the Divi sections

To do this, go to your WordPress dashboard, and from the lefthand sidebar, navigate to Appearance > Menu. Now create a new Primary Menu and add new custom links for each section on the one page.

Create a Primary Menu

In the URL field, you will need to add the CSS ID for the section where you wish to jump to preceded by a hash-tag (#). So if you want to create a menu anchor for the “Latest Releases” section, you need to input #latest-releases in the URL field.

The Link Text field is the name that will show up in the menu. As such, just name it “Latest Releases” to make it contextually relevant.

Now, following this logic, we have created a custom link for each section on the page.

Primary Menu with Custom Links

Once done, click the “Save Menu” button. Also, double-check to make sure that the display location is set to “Primary Menu.”

And that’s it! You have successfully created a one-page navigation menu using anchor links. Now it’s time to go and check if it really works or not.

One Page Navigation Menu

As you can see from the GIF above, clicking on the menu items automatically takes you to that particular section on the page.

How to use anchor links to create a “Table of Content” in Divi

Imagine you are writing a long-form article that is over 2000 words long. You probably have a lot of headings and sub-headings within the article. If that’s the case, wouldn’t it be nice if you could easily jump to the different headings and sub-headings? In fact, you might have already seen this feature on other websites using a table of content.

WordPress generally requires a “table of content” plugin to make this functionality available. But Divi users need not install any unnecessary software. The entire functionality can be managed using anchor links alone. Here’s how you do it!

Step 1: Add ID attribute to header tags

First, open a post or create a new one using the Divi Builder.

Now, select a text module, where you have the article headings, and open the module settings. Now under the Content tab, open the Text section, and switch over to Text view. This will give you an HTML view of the content.

Add CSS ID to Heading

By default, the heading should have HTML formatting like this:

<h1>First Heading</h1>

We want to manually edit the code and add an ID attribute like this:

<h1 id=””first-heading””>First Heading</h1>

As you can see, the ID is similar to what we did before in the previous example.

Now we just set a custom ID for all the other headings in the post. Once done, it’s time to create the “table of content”.

Step 2: Assigning anchor links to the Table of Content

In its most basic form, a table of content is a bullet list. However, to showcase the headings along with their sub-headings you should use a nested bullet list. Now, in case you don’t know how here’s a detailed guide on creating a nested bullet list.

After you have created your table of content, it’s time to attach the anchor links. For this, we will be using our trusty old “href” tag. And for the URL we will use the id attribute preceded by a hash-tag (#) as we did before.

So for the id attribute – “first-heading” the corresponding href URL will be “#first-tag.”

Here’s a look at how our “table of content” looks in HTML view to give you an idea:

Adding Anchor Links to Table of Content

Once you are done configuring the text module, click the “green tick”, and hit Save. Now it’s time to test how this feature actually works.

Table of Content Using Anchor Links

And there you have it – your custom-made Table of Content using anchor links and Divi.

Creating Divi anchor links to another page

If you want to link to another page using and then jump to an anchor link then all you need to do is include the page URL before the anchor link.

Enter the URL of the page where you want to link to, followed by “/#” and then the ID of the anchor point.

For example, if the ID of the anchor link point on the other page is “anchorlink-1”, the URL should be “https://www.example.com/page/#anchorlink-1”.

Fixing a Divi anchor link that is not working

If your Divi anchor links are not working then there are a few common mistakes that people usually make. Check the following to ensure that your anchor links work as they should;

• Use a CSS ID and not a CSS class.
• Make sure the anchor link text or button has a # in front of the text
• Make sure the CSS ID anchor does not have a #
• Make sure that the CSS ID is a unique text for each of your anchor links on the page

The built-in Divi anchor links

Divi has a built-in anchor link system which is the Divi dot Navigation feature. This feature automatically generates built-in anchor links, eliminating the need for you to manually add CSS section IDs.

To enable Dot Navigation for your website, navigate to the Divi Page Settings located at the top right of your screen while editing the page. From there, you can simply turn on the Dot Navigation option. Once enabled, Divi will automatically add a transparent menu on the side of your page. Each dot in the menu corresponds to a section within your page, and when clicked, it will smoothly scroll the page to the relevant section.

Whilst this system is less flexible than traditional anchor links (as it only links to sections) it can be a useful form of anchor link navigation.

Wrapping up

So this was our quick tutorial showcasing how to use anchor links in your Divi theme. We hope you found this guide useful and that it gave you some inspiration on how to use anchor links to better the UI & UX of your Divi website.

That being said, if you are already using anchor links in clever ways, then do share your methods in the comments below. It might even help one of your fellow readers get ideas for using anchor links on their Divi website.