QUIK Web Design Blog

How to Do Quick and Easy Page Anchors in Divi

Feb 4, 2023Tutorial Thursday

In this tutorial, I’ll be showing you how to do Quick and Easy Page Anchors in Divi. Page anchors allow you to jump down (or up) on a single web page. Yes, all the “Back to Top” buttons and links you see are anchors!

You can proceed with the step-by-step below (assuming you have a beginning understanding of Divi) and/or you can watch the YouTube video here: https://youtu.be/_2VhIdNbswY.

If you have any questions at the end, use the comments here or on YouTube!

Step 1
I’m working on a page I’ve already built, but you’ll need a button, or a button in a Fullwidth Header, like I’m using in the image below, specifically the “Our Services” button.

How to Change Logo in Menu on Scroll in Divi - Media Library image

Step 2
Next you’ll need a place (target) that you’ll be jumping down to. In my case, I’m using a Section (that holds the Service offerings for this business). So, open the Section settings and then go to Advanced and CSS ID & Classes. In the CSS ID field give it a name you can remember easily. I used “our_services”, without the quotes of course, like in the image below.

How to Change Logo in Menu on Scroll in Divi - Code Integration image

Step 3
Close that up and save it, and then go back up to your button or whatever (Fullwidth Header in my case). Open the Settings and find the proper place to put a link (in my case it’s Content/Link/Button #2 Link URL. In that field put the same name you used in step 2 above. In my case, that’s our_services. Don’t forget to add the # sign in front of the CSS ID, like the image below.

How to Change Logo in Menu on Scroll in Divi - Initial Logo image

Step 4
Close that up and save it, and then exit the Visual Builder or Editor and take a look at your page. When you click your button, it should jump down to the section with the same CSS ID, like mine does!

PS – You can add anchors to your menu items as well to make them jump down the page. In this case you don’t have to use the # sign though. Just add in the CSS ID to the menu item’s CSS Classes field, like the image below. Notice that is the same “Book an Appointment” link that I have on the Fullwidth Header!

How to Change Logo in Menu on Scroll in Divi - Scroll Logo image

That’s how to do Quick and Easy Page Anchors in Divi. You should be able to add anchors easily now. Just remember you can add them to text as well, and you can add anchors to move up the page if you want. If you have any question, just ask. Always happy to help out!

How to Do Quick and Easy Page Anchors in Divi - image

Cart

Archives

0 Comments