Divi Anchor links tutorial

In this tutorial, I’m gonna show you how to use Divi anchor links. Now, what is an anchor link? Well, essentially it’s just a way to link to a certain part of a page without having links that go to separate pages or something else. So I’m gonna show you three ways to utilize this.

1. Create an anchor link in the menu

2. How to create an anchor link as a button link in a page?

3. How to create an anchor link to a certain section of another page?

 

Create an Divi anchor link in the menu

The first way is to put anchor links in your menu. So let’s bounce over to a site that.

I did recently. You’ll notice this site here has a one-page landing page style layout. So instead of these menu links going up two different pages if you click them they’re just going to zip you right to that section of the website. So it’s pretty cool one way to use anchor links. 

How:

Step-1

The way this works is anchor links use an ID. So go to a page and enable the visual builder. We’re gonna start with the menu. But the first thing that we need to do is we need to place where that link needs to go on the page. For example, I’ve created a section here called Portfolio. So go to advance and you’ll notice that DIVI gives us the option to do either a CSS ID or a class. So if you see my previous tutorials (wpideahub.com/divi-tuitorials) you know that I use classes a lot when customizing things.

Now, one important thing you need to know. IDs are called by a hash (#) tag and in classes are called by a dot, that’s how the code knows whether it’s a class or an ID. Now if you haven’t used these already you need to know that you don’t actually put the dot or hash here in these fields. This is just what we call upon and so we’re gonna put the hash (#) tag elsewhere. So for example this section below we want to call this “portfolio”. Now save this and exit visual builder.

Step-2

Then go into appearance > menu and create a custom link. Now, in the URL field put the ID with the hashtag (#portfolio) and save this.  Then go back out to the page and when you click portfolio this will scroll down to this portfolio section.

How to create an anchor link as a button link on a page?

Another way is to put a link in an actual page here’s a page layout that I just recently released to the. It’s a team or staff page layout and instead of these profile links going to another page if you click them you’ll see it’ll scroll down to that bio. So that’s another way we can use anchor links.

Step1

Firstly we have to assign the ID in the section where we want to go.  So go to the row settings > Advanced and put the ID. For example, we put ‘first-anchor’ on the row section called Person 1. Also, you can do this in the text section or anywhere you want. And remember that you don’t use space in the ID. So I always use dashes or underscores. And again we don’t want to use the hashtag here. 

Step 2

Then add a button module and go to the link field. Now in the Button link URL put the ID with the hashtag. For example, We add a button called ‘view profile’ and put the CSS ID ‘first-anchor’. And we need to add a hashtag or pound sign before the ID. Save the changes and exit the visual builder. Now when you click the button called ‘View Profile’ it’ll scroll down to the profile section.

How to create an anchor link to a certain section of another page?

And then a third and final way I’m going to show you how to utilize these is to make a link that goes to a certain section of a different page. 

How:

Firstly you have to create a section and put the ID. Secondly, you need to go to Appearance > Menus and create Custom Link. In the URL field place the hashtag and CSS ID after the page URL link. In this time you remember this you also place ‘ / ’ before the hashtag. Now if you click the menu item it will go to a different page and it’ll automatically scroll down in that certain section.

Leave a Comment