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!
Click the button below to be directed to the same section of this post.
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
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
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
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!