Create A 1-Page DIVI Website With Anchor Links

Creating a 1-page website with anchor links can be the first step to getting your business online. It keeps you from needing a ton of content, leads your audience to the most important aspects of your business including your shop, contact form, and opt-in. So let’s make your 1-page DIVI website have a fully seemless professional feel, with some anchor links.

 

What are anchor links?

 

Anchor links are essentially a link that directs you to a section of the page, rather than an entirely new page. It’s mostly used when creating a 1-page website. You can still have the menu bar but have all your content on one page. Then when someone clicks on the menu item, i.e. about, services, contact, it scrolls down to that section of the page. It allows your audience to travel throughout your page with ease and get them to the section that’s important for them.

 

How do I add anchor links?

 

It’s actually a lot easier than it may sound and really only requires 2 steps (+ repeat), so you got this!

1. First you’ll go to your menu page on WordPress and instead of adding a new page to your menu, you’re going to add a custom link. You’ll fill out two sections: one being your URL. For the URL you will begin with /#  and then add your section name. For example: /#services. The second section is Link Text and you’ll add your desired name, like Services. Then just press Add To Menu. Sweet. Done with your first step. Repeat this step for all your desired anchor links. 

2. Once you’re done adding your desired custom links to your menu, continue to the frontend DIVI builder and enable visual builder on your desired page. Now you do have a few options on what to choose next based on your needs + wants. Your options are to choose either a Section (the one surrounded in blue) or the Row (the one surrounded in green) that you want your link to go to. Either one requires the same second step so don’t worry about that, just worry about where you want your link to scroll down to. Then, you’ll go into Advanced option and click CSS ID & Classes. Under CSS ID you’ll enter the name of your link, i.e Services. Just press save and you’re done! Repeat this step until you’re done with all your links. 

Way to go! Now go click on your menu items in the navigation and see it scroll down to the desired section. If you’re having problems, make sure you’ve included the /# before the menu item when creating a custom link and that you didn’t include /# when you were just adding your section.

 

I told you it was easier than it sounded. Setting up anchor links on you DIVI website can ease your navigation and simplify your site for your audience. Your links will direct your visitors to the section they want without leaving the page. I love anchor links because they give a 1-page website the feeling that it’s complete because it has a full naviagtion bar.