5 Cool Things You Can Do In Divi with Anchor Links

Using Anchor links in Divi (or any website) can improve navigation and help organize your content, especially on a website with long-form content. One of the other main benefits of using anchor links other than navigation is the fact that they are awesome for SEO. While the concept of using anchor links is very simple, it can be hard to know where to start. It’s actually one of the first things I went hunting for when I got started developing WordPress websites.

This article shows you 5 cool things you can do in Divi with anchor links. For these examples, all you need is Divi and a desire to learn.

Let’s go!

You’ll Learn how to:

1. Scroll to and Open a Toggle with an Anchor Link in Divi
2. Create a One Page Navigational Menu
3. Jump to a Page Section from Another Page
4. Use the Divi Dot Navigation
5. Add Anchor Links to Your Headings

5 Cool Things You Can Do In Divi with Anchor Links

Subscribe To Our Youtube Channel

Scroll to and Open a Toggle with an Anchor Link in Divi

Toggles are one of those elements that can enhance user experience.  Call me lazy (I’d use the word efficient) but the easier it is for me to get my information, the better. I’m a big fan of toggles for certain types of content.

One of the best uses I’ve seen for toggles is for FAQ pages. They work great for revealing small bits of information that the user wants to focus on. This will only take a minute and a few lines of JavaScript to complete. You can also use a variation of this method to open tabs or accordions and while this may seem difficult, it’s really not too complex. A simple method may be by using a FAQ plugin, but either way, consider this use of jump links for better site UX.

First, create a new page and deploy the visual builder. Then select the option “Choose a Premade Layout”. In the Load from Library popup, find the Accountant FAQ page layout by typing “faq” in the search bar. Then click on the layout and on the preview that comes up click the Use This Layout button to deploy it to your page.

Now you are ready to add your anchor link functionality. For this example, I’m going to use the button in the top header section as the anchor link so that, when clicked, the page will scroll to a specific toggle which will simultaneously open automatically.

To do this, first, open the button settings and add the following link URL for your button:

Button Link URL: #toggle3

I gave this anchor link the id “toggle3” to help remember that I want to link to the third toggle on the page. This id name will correlate to the toggle CSS ID we will add later so that the button knows to what toggle to scroll.

Next, add a unique CSS Class to the button module:

CSS Class: open-toggle

Then save your settings.

This class name helps remind you of the action of the toggle opening when clicking the button. We will use this class in our custom jqeury to get the desired functionality in a little bit.

Next scroll down the page to the row containing the two columns of toggle modules that are being used for the FAQs. Open the setting of the third toggle module in the first column. This is the module we want to scroll to and open when clicking the Button (or anchor link).

Under the Advance Tab, add the following CSS ID:

CSS ID: toggle3

It is important that this exactly correlates to the button link URL used earlier. The only difference here is that you must leave out the “#”.

The last step involves adding some custom code to the body of our page. To do that, navigate to the Divi Theme Options, and open the Integration Tab then paste the following into the body section as shown in the GIF below.

jQuery(function ($) {
    //open toggle on button click
	$('a.open-toggle').on('click', function(event){
        $('#toggle3.et_pb_toggle_2 .et_pb_toggle_title').click();
	});
});

Don’t forget to wrap the code in the proper script tag.

Now you can test out your page to see if it works.

To understand a little about what this code is doing. Let’s take a closer look. Here is the snippet again:

jQuery(function ($) {
    //open toggle on button click
	$('a.open-toggle').on('click', function(event){
        $('#toggle3.et_pb_toggle_2 .et_pb_toggle_title').click();
	});
});

In the code, the selector “a.open-toggle” refers to the button with our custom class. The selector “#toggle3.et_pb_toggle_2 .et_pb_toggle_title” refers to the the title of the the toggle with the id “toggle3” and the class “et_pb_toggle_2”.

The class “et_pb_toggle_2” is actually the class associated with the third toggle. That is because Divi gives the first toggle the class “et-pb_toggle_0”, the second toggle “et-pb_toggle_1”, and so on.

So if you want to know what the class is for a particular toggle on your page, you can simply count from 0 starting with the first toggle on the page and work your way down. Or you can always just inspect the HTML code to find the class that way.

This is important to know so that you can update your code accordingly. For example, if I wanted my button to open the second toggle on the page, I would replace “#toggle3.et_pb_toggle_2 .et_pb_toggle_title” with “#toggle3.et_pb_toggle_1 .et_pb_toggle_title”.

This code snippet is a variation of the following concept. I tried to keep it as simple as possible.

This cool technique would also work for tabs and accordions. The trick is to identify the right CSS classes for the accordion item or tab so that you can use it in the code.

Create a One Page Navigational Menu

This sort of menu design is popular for one-page sites. It can be useful to create links in the menu to jump from section to section on your page. This is especially helpful if you are building a one-page site or a landing page. You can check out the documentation on how to create one-page websites with Divi for more info on this process.

Here is a quick overview of how to do this.

This will work for any premade layout, but for this example, I’m going to use the Web Freelancer Home Page Layout. Create a new page, deploy the visual builder, select “Choose Premade Layout”, and then deploy the Freelancer Home Page Layout to your page.

Now you need to add CSS IDs to each section that you will want to link (or scroll) to. Find the section titled “My Services”. Open the section settings, click the advanced tab, and add the following CSS ID:

CSS ID: services

Next, find the “featured work” section and give that section a CSS ID as follows:

CSS ID: work

And add the following CSS ID to the “About Us” section as well:

CSS ID: about

With these three sections properly set up with their unique CSS IDs, we can now create our menu anchor links.

From the Dashboard, navigate to Appearance > Menus and create a new Primary Menu. Then Create three custom links with the following URL and Link Text:

Custom Link 1
URL: #services
Link Text: Services

Custom Link 2
URL: #work
Link Text: Work

Custom Link 3
URL: #about
Link Text: About

Don’t forget to select set your display location to Primary Menu. Then save your menu.

Now when you visit your page you can try it out. You may notice that there is smooth scrolling. This is because the Divi theme automatically adds smooth scrolling – this feature was added in Divi version 2.4.

For more inspiration on building killer one-page style websites, check out these posts:

• How to Build a Responsive Fixed Sidebar With Anchor Links
• How to Create Full Screen Sections with Top and Bottom Scroll Links with Divi
• How to Create Active Links on Scroll for One-Page Divi Websites

Jump to a Page Section from Another Page

We can use the example from above to demonstrate this. Since we added a CSS ID to three sections on the page (services, work, about), not only can we jump to those sections using our menu anchor links, but we can also jump to those sections from a completely different page.

All you need to do is use the URL of the anchor link when creating a link on a different page. If you wanted to put a link to the services section with the ID “services”, it would look something like www.yourdomain.com/page/#services.

Here is an example of how the page will load and scroll to the “My Services” section when linking to that section from another page.

This works great for many different calls to action (i.e. learn more, get Divi, vote for me!, etc.) that you may want to jump to from different pages of your site.

Use the Divi Dot Navigation

Technically these are built-in anchor links. You won’t need to add your own CSS section ids. The Dot Navigation feature automatically creates anchor links out of your sections. To turn on dot navigation for your page, simply set the Dot Navigation option to “ON” under the Divi Page Settings at the top right of the screen when editing your page. Once you turn on Dot Navigation, Divi automatically adds a transparent menu on the side your page. Each dot scrolls to the sections throughout your page when clicked.

For more info, there is a great post on how to add labels to your dot navigation.

Add Anchor Links to Your Headings

Adding anchor links to your headings is always a good idea. It is a great way for indexing longer pages with a lot of content, allowing you to easily navigate to each heading within the same page or to create links to these headings from other pages on your website. It also helps search engines crawl your site.

To add a CSS ID to your headers using the Divi Builder, open the module containing your heading text. Make sure you have the text tab open. Find the header tag (h1, h2, h3, etc…) and then enter an id within the brackets of the beginning header tag. Here is an example of an h3 heading with the id “webdesign”:

<h3 id="webdesign">Website Design</h3>

Now I can link to this header from anywhere as long as I use the correct anchor link URL. Which for this example should look something like this:

www.yourdomain.com/page/#webdesign

This will also come in handy for pages or posts that aren’t using the Divi builder. To add Anchor Links to your headings for these pages or posts, open up the Text tab in the WordPress text editor. Simply locate the heading of your choice and add the id inside the heading tag as shown below.

This is exactly what I did for this post. The section links at the top of this post serve as a nice table of contents that links to the different headings on the post. Read more about using the method for creating Table of Contents sections for your pages and posts in WordPress.

Pretty cool stuff.

If you wanted to, you could also use a table of contents plugin to help you add one to your content.

Wrapping Up

Anchor links have a few great practical uses, but don’t go too crazy with them because you must always first consider your audience and your goals. Remember, good design is about usability and function so, in some instances, anchor links can be very helpful. But in others, it just means users zap back and forth over the parallax sections and wind up getting lost. Hopefully, you were able to get some useful tips from this post.

Do you have any tips or questions about anchor links? Let us know about your experiences in the comment section below.