Do you want to make your Divi website more user-friendly and easy to navigate? Are you looking for a way to allow users to jump between the various sections on your pages and posts? If yes, then you have come to the right place. Today we will explore how to use anchor links in your Divi theme.
By the end of this tutorial, you will learn how to improve your site navigation and overall user experience. But first, for those of you who don’t know, let’s quickly touch on what an anchor link really is.
What is an anchor link? How does it work?
An anchor link is a unique id that you can attach to a content block or specific element on a page or post. If a user clicks (or searches for) on the page/post URL followed by the anchor link, they will be taken to that particular “anchored” section.
In Divi, you have the option to use CSS IDs as anchor links. You basically get to add a CSS ID to any section or module you have access to using the Divi Builder. For example, let’s set a CSS ID – “iamhere” for a section on a webpage. Also, let’s consider the URL for the webpage is – “www.example.com/demo-post.”
So now, if you search for the URL – “www.example.com/demo-post/#iamhere”, the browser will load up the webpage and automatically scroll you to the section with the anchor link.
Cool ways to use anchor links in your Divi website
By now you should have a good enough understanding of how anchor links work. But how can you use them on your website to spice up your UI & UX? Well, here are a couple of practical examples showing you how to use Anchor Links in your Divi theme.
This should inspire you to get ideas of your own, or you can just straight away implement these tutorials on your Divi website.
Create a one-page navigation menu using anchor links
Single-page or one-page websites are excellent for providing users with all necessary information without having them jumping 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.”
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.
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.
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:
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.
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.
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.
As you can see from the GIF above, clicking on the menu items automatically takes you to that particular section on the page.
Create a “Table of Content” section using anchor links
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.
By default, the heading should have HTML formatting like this:
We want to tweak it 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:
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.
And there you have it – your custom-made Table of Content using anchor links and Divi.
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.