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.

Join +2 640 subscribers!

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.
Add a CSS ID anchor in Divi
Now you have dropped your anchor and created the destination for your anchor links.

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.

That’s all for today!

I hope that you enjoyed this post. Subscribe to DiviMundo 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

Related posts

6 Comments

  1. Hello Victor, once agin a very helpful, clear and well written tutorial on the essential basics of Divi and WordPress. Thanks for the troubleshooting section at the end, and the common mistakes we make when setting up anchor links. Your input is greatly appreciated, and bookmarked. Much appreciated.

    Reply
  2. Thank you for the kinds words, Rob! 🙂

    Reply
  3. Hey there!! Do you know how to adjust the position of where the anchor link jumps to? I need it to jump down about 300 px for my static menus.

    Reply
    • There’s no string to add extra pixels to an anchor link (well maybe with some advanced JS, but that’s above my paygrade :-)). But you can try add an invisible divider with a top margin of 300 px and CSS ID. Or you can add an inline CSS ID to a text in a text module (or any other element that can process HTML) and add a CSS ID to a word, a letter or the whole text, like this:

      You can add some text here.

      Or you can add an “invisible space” with a CSS ID:

       

      Reply
  4. When I use anchor links, I find that Divi reloads my page again after everything has loaded. It’s a terrible user experience. Is there any workaround for that?

    Reply
    • Does the reload happen in frontend or backend? Some third party plugins makes the Divi Builder reload when editing a page.

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Affiliate Disclaimer

All content on DiviMundo is funded by you – our beloved readers. Some of the links are affiliate links. This means that if you click on the link and purchase something, I will receive an affiliate commission. But it will never cost more for you. Thanks for your support!

Victor Duse, founder of DiviMundo