How to Create Anchor Links in Divi – Step by Step

It’s really easy to create anchor links in Divi. The anchor link lets your visitors jump to different sections on the same page without leaving it. It’s extra useful in long Divi pages and posts.

HTML.COM defines anchor links in a comprehensive way:

The anchor element is used to create hyperlinks between a source anchor and a destination anchor. The source is the text, image, or button that links to another resource and the destination is the resource that the source anchor links to.

Two Examples of Anchor Links in Divi

As you can see in the video above, anchor links can be used both in navigation menus and in buttons on a page or in a post.

You can also use the Divi Text module or the default WordPress editors (Gutenberg Block Builder and the Classic Editor) to add anchor links in plain text.

When is it Appropriate to Use Anchor Links?

Anchor links are best used in long and dense pages and posts. They are also a good choice for one page websites. A good Table of Contents section is often based on anchor links as well as nifty Back to Top buttons.

Step 1: Create your anchor destination in Divi

The first step is to “drop your anchor” in the location where you want your visitors to arrive. To do this, you need to add a unique ID (identifier) to a section, row or module. In the next step, we will create links that target this ID.

1. Enable the Divi Visual Builder on the page where you want to add the anchor.
2. Click the cogwheel to edit the element (a section, row or module) where you want to add the anchor.
3. Go to the Advanced tab and open the  CSS ID & Classes tab.
4. Add a clear name for your anchor (for example blog or contact-us) in the CSS ID field.
   ⚠️ Don’t use spaces or special characters like # in your CSS ID.
5. Click the green button to save the settings and then save the page.

Step 2: Create your Anchor Links in Divi

Now it’s time to add the links that will send your visitors to your fresh anchor destination. The principle is simple: Just add a link to your CSS ID with a hash (#) in front of it, for example #blog or #contact-us. You can of course link to an anchor on a specific page on your Divi website by adding the slug first, for example /about-us/#contact-us. You can even deep link to an anchor on your website from an external source like an email or social media by adding your full URL followed by the #css-id, for example https://mysite.com/about-us/#contact-us.

Here are the most common use cases.

Add an Anchor Link in a Divi Menu

Adding anchor links to your Divi menu is a great way to refer visitors to a specific area on your web page.

1. Go to your WordPress dashboard and head over to Appearance » Menus
   
2. Select the menu that you want to edit
3. Go to Add menu items and expand Custom Links
4. Add the CSS ID (from step 1) the URL field and insert a hash in front of it, for example #blog or #contact-us
   
5. Click the blue Save Menu button.

Now you can preview your menu anchor link in frontend. You might need to clear your browser cache and website cache first.

Add an Anchor Link in a Divi Button

A call to action button in the hero area can use an anchor link to send the visitor down to a specific section of your web page.

1. Enable the Divi Visual Builder.
2. Insert a Button module.
3. Add your button text and expand the Link tab.
4. Add the CSS ID for your anchor element the Button Link URL field. Make sure to add a hash (#) in front of the ID, for example #blog or #contact-us.
   
5. Click the green button to save your settings and save the page.

Now you can preview your button anchor link in frontend. You might need to clear your browser cache and website cache first.

Add an anchor link in any text element

You can add anchor links as plain text links in Text modules or in posts using the Classic Editor or Gutenberg Block Editor. Just link to the CSS ID with a hash  (#) in front. I’ve used a Divi Text module to create the anchor links in the Table of Contents section in this post.

1. Enable the Divi Visual Builder.
2. Insert a Text module.
3. Add your text and highlight the text where you want to add the anchor link.
4. Add the CSS ID for your anchor element the URL field. Make sure to add a hash (#) in front of the ID, for example #blog or #contact-us.
   
5. Click OK, and then hit the green button to save your settings and save the page.

Now you can preview your text anchor link in frontend. You might need to clear your browser cache and website cache first.

Add a back to top anchor link in Divi

Adding a back to top link in Divi is a nice way to improve the user experience in long pages and posts. Here’s a handy way how to it without adding a custom CSS ID to your header. This works fine both with the old default Divi header and the Theme Builder header.

1. Create a link using a button, text, footer menu, blurb or any other way you want.
2. Add the URL #et-boc
3. Save your settings and exit.

Now you can preview your back to top anchor link in frontend. You might need to clear your browser cache and website cache first.

Troubleshooting: 3 Common Anchor Link Mistakes

Does your anchor link lead to a dead end? Here are a few mistakes to avoid.

Mistake 1: Using the CSS Class instead of the CSS ID

It’s easy to mix up the fields CSS Class and CSS ID. Always use the CSS ID field when you create anchor links – not the CSS Class field (that is used for styling). I did actually made this mistake twice when creating this post – in a tutorial about how to create anchor links!

Mistake 2: Adding the hash (#) in the CSS ID field

Divi will automatically add the leading # when you add a CSS ID to a section, row or module. You should never add your own # when you add a CSS ID (step 1). But make sure to add the leading # when you create your anchor links (step 2).

Mistake 3: Adding identical CSS IDs on the same page

A CSS ID must be unique on a specific page or post. If you add the same CSS ID, for example blog, in two different sections on the same page, the anchor can not refer the visitor to two different locations at the same time. Always use unique CSS IDs.

That’s all for today!

I hope that you enjoyed this post. Subscribe to VictorDuse.com on YouTube and join our Facebook group for more crisp content on WordPress and web design.

👉 Related post: How to Create Custom Sticky Back to Top Designs with Divi (from Elegant Themes)

👉 Free course: Create a website from scratch with Divi