Follow us

3 Ways to use Anchor Links in Divi - Tutorial for Divi | Divi Soup

Like our free content? Then you'll love our exclusive Club!

Divi Academy Membership gives you exclusive access to over 110 resources, including child themes, layouts, cheatsheets, tutorials, live training and member perks. And new content is added EVERY Monday!

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 wink

 

 Primary Menu Anchors  | Button Anchors  | Text Anchors

 

So let’s get cooking!

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 (#)

Using 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.

Using 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:

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

 

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

 

And that’s it, pretty simple eh? 

If you found this helpful please leave a comment and subscribe to my newsletter for all my latest Divi related content. smile

Michelle X

Michelle Nunan is a multi-award winning marketer & trainer and full time Divi educator as well as a mother of two beautiful girls and two cheeky Black Labradors called Harley & Chaz. Michelle has been building websites since the late nineties, back in the days of GeoCities and Napster, before the web was the wonderful place it is now.

Related Posts

Enter your details below to get notified of the launch and early bird pricing

You have successfully joined the waitlist!

Pin It on Pinterest

Sharing is caring

Share this post with your friends!