Want updates & exclusive offers?

Hey there!

3 ways to use anchor links in Divi

3 ways to use anchor links in Divi

Anchor links are used to navigate to specific content on a page rather than simply between pages themselves.

There are many uses for anchor links, such as one page sites, and sales and landing pages.

For instance, if you had a long form sales page describing your product you may want to place a ‘Buy’ button in various places on the page, which all link to the bottom of the page where the user can actually purchase your product.

Mastering anchor links in Divi is actually very simple.

Use the anchor links below to navigate to the section you need 😉

 

Primary Menu Anchors  | Button Anchors  | Text Anchors

 

We will start with an anchor link from the primary menu.

In Appearance > Menus, select the menu you want to add the anchor link to and then click on the custom links dropdown on the left. Decide on a unique name for your anchor link (anchors use IDs and unlike classes, IDs must appear only once per page) and then place it in the URL field of the custom link and precede it with a hash (#). Here you can see I have used #myanchor. Add the title you want displayed for your link in the link lext field and then click Add to Menu.

You will then see the new item added to your menu with the URL as the anchor.

3 Ways to use Anchor Links in Divi

 

Next, select the section, row or module you want your anchor link to scroll to when clicked, hit the Advanced tab and in the CSS ID section enter the unique anchor you chose without the preceding hash (#).

3 Ways to use Anchor Links in Divi

Now once you save and refresh your page, your new anchor will link to the section, row or module you have defined.

 

Anchor on a button

Now lets take a look at creating an anchor on a button.

The principle is the same, but we add the anchor to the button URL field with the preceding hash (#). You don’t have to be using a button module, you can add the anchor to a button within any other module too, such as a fullwidth header, or a CTA etc.

3 Ways to use Anchor Links in Divi

Then we add the the anchor to the CSS ID field in the Advanced tab of the section, row or module we want to link to, without the preceding hash (#).

3 Ways to use Anchor Links in Divi

Now once you save and refresh your page, your new button will link to the section, row or module you have defined.

 

Text link anchor

Lastly, we will take a look at a simple text link anchor.

Supposing we want to link from some text within a paragraph, our HTML would look like this, you can see we have replaced the URL with our unique anchor, preceded with a hash (#).

This is the HTML I would use to create my custom <a href="#myanchor">Anchor Link</a> when using within text.

 

Again we can add our anchor to the CSS ID field of any section, row or module, but we could also add it to other text so the anchor serves only to link between sentences or paragraphs. For example, here we link to a heading:

<h2 id="myanchor">This is a heading</h2>

 

Here we link to the beginning of a paragraph:

<p id="myanchor">This is the beginning of my paragraph...</p>

 

And we could even link to a specific word or sentence within a block of text using a span tag like this:

Here is some text, <span id="myanchor">anchor links to here</span> and some more text...

 

These solutions work for linking to content on the same page, but what if you want to link to an anchor on another page?

In that case you need to add the page name before the anchor, so on your button, custom menu item or text link you would add your anchor like this:

/pagename/#myanchor

rather than just

#myanchor

If you have a scenario where you just want to link back to an anchor on the homepage from any other page, for instance if you have a one page site that also has a blog, and on single posts you want to be able to link back to an anchor on the homepage, then you can just use a preceding forward slash like this:

/#myanchor

That’s it, all done!

Michelle x

Pro Pass Membership

Want access to all current and future Divi child themes, theme kits, and Canva kits for one low annual price?

Learn how to create Divi Child Themes that sell

Divi child theme course - Reloaded!
  • Use your existing industry knowledge to define and harness your niche
  • Productise your business with affordable website solutions for clients
  • Add a new revenue stream to your business that pays while you sleep
Find out more
Divi Child Theme Course
Are you

Struggling with Divi?

Struggling with Divi?

Hey! I want to make sure the content I create is helpful to the wider Divi community. If there's something you always find difficult to do when creating Divi sites, or a styling option you wish Divi had, complete the Divi tutorial request form and tell me all about it. I don't guarantee I'll be able to create something that solves the issue, but I'm smarter than your average bear so you never know!

P.S. - This is NOT a support request form and you won't be subcribed to any email lists. If you have an issue with one of our products, you can get help here.



First
Why? I might have questions, and if I create a solution I'll let you know.

Want a website like ours?

More posts

You might like!

How to replace the Divi search button with an icon

How to add titles to the Divi gallery slider

The Divi Gallery module allows you to display image titles and captions when using the grid layout, but not when using the slider. There is a very simple way to grab your titles and display them over your images while still allowing the lightbox feature to function. In this tutorial I’m going to show you how.

You have Successfully Subscribed!