I always found anchor links fascinating and useful. Before I learned about them, I just know that what it does is you click a link or a button and it scrolls down to a specific part of the same page. If you’re looking to add this to your WordPress website that’s using the Divi theme, then you’re at the right place!

This tutorial mainly consists of adding CSS IDs to your links, and it’s quite simple. It will take you a few minutes to learn and to implement.

Let’s get to it!

Sample

Click here to be directed to the Additional Tips & Tricks section of this post.

Click the button below to be directed to the same section of this post.

Video Tutorial:

Tutorial

Step 1: Add CSS ID To Target Section, Row or Module

I’m assuming that you already have a page that you have made with sections, rows and modules. So, first, what we have to do is to add a CSS ID to where you want the link to go to or scroll to. We do this via Section, Row or Module Settings (in this example, I’m going with a Section) > Advanced > CSS ID & Class > Add CSS ID (in this example, I’m putting “tutorials” as the CSS ID.

Feel free to change it to your own liking.)

Make sure to put it in the CSS ID and NOT the CSS Class!

Step 2: Add Link To Links or Buttons

Now, we’re going to go back to the link or button that the visitors will click to go to the target content. In this tutorial, that target content will be the section where the “Tutorials” is.

Method 1: Buttons

We add the links by going to the Button Module settings > Link > Button Link URL > Add “#tutorials“. Yes, you will have to put the “#” and then the CSS ID we added to the target section, row or module.

Method 2: Links Within Texts

Let’s add a link to a specific text. First, we go to the Text Module settings > Highlight the text that you want to add the link to > Click Insert/edit Link > Add #tutorials to Url panel

Make sure to Save your changes! And now, you have anchor links on your pages!

Additional Tips & Tricks

1) Add Anchor Links to Menu Items/Links

Let’s say, as based on this tutorial, that you still have the “tutorials” CSS ID to the target section that we put earlier. If you want to be directly sent or linked to that specific section while being on another page through your menu, all you have to do is by add custom links to your menu items/links.

We do this via WordPress dashboard > Appearance > Menus > Custom Links > (For this example) Add “https://tutorials.successwithwp101.com/#tutorials” to URL and “Tutorials” to Link Text > Add to Menu > (Move the new menu to any position of your liking) > Save Menu

Take note:

1) I have added the full URL (including the HTTPS, etc.) so that when I’m on other pages, the links know to go to that specific page first (in this case, the homepage) then straight to the target section/content.

2) I added the # before the CSS ID that we added to the target section

There you go! Now you know how to add anchor links on your website!

You can add links to any text and just make sure that you’ve added CSS IDs to the target section, rows or modules.

If you have any questions or inquiries, please do not hesitate to leave a comment, and I will be happy to help!

If you watched the YouTube video tutorial, and it has helped you, please do Like, Comment & Subscribe! Thank you!