Design News and Tips

Buttons and Anchor Links in Divi

by | Dec 1, 2018 | Design Tips, Web Design | 0 comments

 

In this tutorial, I will show you how to work with button and anchor links within the Divi page builder. I designed my hero section CTA button links to include anchors within the same webpage of my layout in 4 easy steps.

step1

 

1. Open the module where you want to link from, in this case, we are anchoring from the hero image button “learn more” located in the Fullwidth Header Module settings. 

 

Divi Anchor Links

 

2. Look under your Content tab and find “Button #1 Link URL” within the Link settings. Here we will create a custom CSS ID and name it #learn-more. Do not forget the #, this is part of the anchor command. Save and Exit.

 

step3

 

3. I created my page to simply jump down to the module directly underneath the header, but you can connect to any module within your page layout. Find the module you would like your button to link to and open the settings section.

 

step4

 

4. Within that module, go into your “Advanced” tab. Find the CSS ID and name it after the button ID you just created. This section will not need a # within the CSS ID. Enter “learn-more” in the CSS ID field. Save and Exit. 

Your anchor link should be ready to go, so go ahead and test it. For a closer look at how these buttons function, head over to my homepage. I have anchor links in two call-to-action buttons that appear in the hero section of my site. Learn More and Contact Me.

I hope you will find this tutorial on button and anchor links helpful!

x Logo: Shield
This Site Is Protected By
Shield