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.
Table of Contents
The links below are actually anchor links that will bring you right down to the different chapters in this post.
- Create your anchor destination in Divi
- Add an anchor link in a Divi menu
- Add an anchor link in a Divi button
- Add an anchor link in any text element
- Add a back to top anchor link in Divi
- Troubleshooting: Common anchor link mistakes
Off we go!
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.
- Enable the Divi Visual Builder on the page where you want to add the anchor.
- Click the cogwheel to edit the element (a section, row or module) where you want to add the anchor.
- Go to the Advanced tab and open the CSS ID & Classes tab.
- 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.
- 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 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.
- Enable the Divi Visual Builder.
- Insert a Text module.
- Add your text and highlight the text where you want to add the anchor link.
- 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.
- 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.
- Create a link using a button, text, footer menu, blurb or any other way you want.
- Add the URL #et-boc
- 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 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
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.
Thank you for the kinds words, Rob! 🙂
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.
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:
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?
Does the reload happen in frontend or backend? Some third party plugins makes the Divi Builder reload when editing a page.