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

A Divi anchor link is a type of hyperlink used to create a link between one clickable element and another piece of content within the same page,

  1. Create an anchor point: This is the content location where your anchor link will point to
  2. Create a link: This is the trigger to take the user to the anchor points content
  3. Click and jump: When someone clicks the source link, their browser automatically scrolls down the page and lands directly at the anchor point

This is particularly useful for long pages with multiple sections, single-page websites, or quick navigation shortcuts.

The anchor link guide will cover;

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

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.

Benefits of using anchor links:

  • Improved navigation: Makes it easier for users to find specific information on long pages without scrolling extensively.
  • Better user experience: Creates a smoother and more seamless browsing experience.
  • SEO friendly: Search engines can follow anchor links within a page, potentially improving indexing and rankings.
  • Versatility: Can be used in various ways, such as menus, buttons, text links, and image hotspots.

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 allow 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

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 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 must 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

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

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

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

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

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.

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? You might have already seen this feature on other websites using a table of contents.

WordPress generally requires a “table of contents” 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

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 contents”.

Step 2: Assigning anchor links to the Table of Content

In its most basic form, a table of contents 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 contents, it’s time to attach the anchor links. For this, we will be using our trusty old “href” tag. 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 contents” looks in HTML view to give you an idea:

Adding Anchor Links to Table of Content

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

Table of Content Using Anchor Links

And there you have it – your custom-made Table of Contents 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”.

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.

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

4.3 4 votes
Article Rating