Do you want to improve your site’s navigability? If you do, then you need to use Anchor links. These anchor links let visitors jump to different sites’ sections, including pages and posts.

So, how do you use them on your Divi website? Well, we got you covered.

This tutorial will go through a complete guide on using and customizing anchor links in the Divi theme. Let’s get started.

Anchor Links: Definition and How does it work?

An anchor link connects two content blocks or page/post elements. When created, it generates a unique ID. Also, the source can be a button, text, or image. On the other hand, the destination link can also be another source link or different content altogether.

The most common example of anchor links is the navigation menu on your site. When you click an element in the site’s navigation, it redirects you to the intended target.

In Divi, you can use CSS IDs to configure anchor links. In Divi Builder, you can add a CSS ID to a module or section.

So, if you want to connect an anchor link to a webpage, add a CSS ID such as “abc” to the webpage section. For example, if the page you connect to is www.example.com, the anchor link will take you to that particular section. The target URL for the page section will be “www.example.com/#abc.”

When should you use Anchor links?

There are many places you can use anchor links. In most cases, if your page is long or dense with information, it is a good idea to use anchor links. Of course, you can always create a table of contents for blog posts to help navigate long-form content. 

Two different ways to Create Anchor Links in Divi

To give you a clear picture, we’ll compare two practical examples of using Anchor links in Divi.

Anchor Links in One-Page Navigation Menu

You can use one-page websites if you are a business or freelancer who wants to connect to their respective audience. They provide all the information on one single page, offering easy navigation. 

If you want to add anchor links to a one-page website, then you need to follow the steps below:

Step 1: Assign anchor links to different Divi sections

To proceed, you must decide which sections you’ll have on your one-page site. 

Now, you need to assign anchor links to each of them and then reference them through the menu. 

For this example, we’ll use the Divi NFT Landing Page Layout.

As you can see, it offers a clean one-page design with different sections, including About, Gallery, Roadmap, Work, and Contact. In addition, all these sections are scrollable. So, if you scroll through the page, you’ll find the different sections appear one after another.

example-site

To add an anchor link for the “About” section, you’ll need to select it and then open “Section” settings. Here, you’ll find the Advanced tab. Go to it and add a new CSS ID, “about.” Now click on the “green” tick box to save.

Similarly, you need to go to the rest of the page sections and add respective CSS IDs to each section, including Gallery, Roadmap, Work, and Contact. For example, choose “roadmap” CSS ID for the Roadmap section, and so on.

Once all is set, save and exit the editor.

Step 2: Create a Primary Menu with Divi sections anchor tags

With all anchor tags created, it is now time to make a primary menu. 

First, you need to go to your Divi site’s WordPress dashboard. Here, go to Appearance from the left menu and then choose Menus. Once there, create a “Primary Menu” and add new custom links for each section.

adding-menu

You must add the URL with the Link Text in the Custom Links section. Then, in the URL field, input the CSS ID for the section you want to connect. For example, if you create a menu item for the About section, add “#about” in the URL field. 

Note: We used a “hashtag” # in front of the CSS ID. This needs to be done for all the sections.

Next, enter the Link Text as your section name. For example, the About section on your site needs the Link Text to be “About.”

Once you have added all custom links for the sections, proceed to “Save Menu.” Also, ensure that the menu is set as “Primary Menu.”

Congratulations, you successfully created a one-page navigation menu with anchor links.

Anchor Links in the Table of Content section

Anchor links are also beneficial if you use them in long-form content. Google ranks long-form content above 2000 words more frequently as they are in-depth and provide value to the readers.

To divide long-form content, you need to use headings strategically. For example, in our post, we used H2, H3, and H4 tags to break down content and make it accessible to the readers.

To start adding the table of content, you don’t need any plugins. Let’s see the steps below.

Step 1: Insert ID attribute to header tags

You must create a new post or open an existing one with Divi Builder.

Next, select the text module containing headlines. In the text module, open module settings and go to the Content tab. From there, switch to Text view from the Text section. Now, you should have the content HTML view.

For example, if you’re opening a text module with an H1 tag, the HTML formatting would be as follows:

<h1>The Very First Headings </h1>

To make anchor links work, we need an id to the heading code as below:

<h1 id=”first-heading”> The Very First Headings </h1>

You need to do it for all the headings in your blog post(that you want to include in the table of content).

Step 2: Create a Table of Contents and Assigning Anchor Links

Now, you need to create a table. In most cases, a bullet list is used. However, you’re free to use another structured list if you want. By doing it correctly, you’ll get a nested bullet list.

First, create the list of all the headings for which you added an attribute ID. Next, you need to open the code for the table of content and include the link tag below.

<a href = “#first-heading”> 

The bullet list code should be as follows:

<li><a href=”#first-heading”> First Heading </a> </li>

Similarly, you need to insert the attribute ID to the list items. Once done, click on “Save.”

And that’s it; you now have successfully created the table of content.

Conclusion

Managing your own anchor links is a great way to control your site’s navigation and content flow. It also helps you play with user experience and user interface. 

With clear anchor links and basics, you can use it creatively to get the most out of it. So, how are you planning to use anchor links in your sites? Comment below and let us know.