pixel

My most popular post of all time is about anchor links and a one page website navigation structure.  I often coach my blogger clients to revisit older successful content, and when Andrew suggested I should rewrite the post, I figured I should.

As a reminder, when a site visitor clicks on an anchor link they land within the page content (example, you want someone to click on something and it takes them to the middle of the page, or to the middle of another page).  We did this a lot on my recently launched website for Thriller author Ronald S. Barak.

Let’s begin with How to Use an Anchor Link with the Button Module for the Divi Theme.

I used the plugin called Scroll to Anchor which you can find for free in the WordPress repository.

In the button link url add the anchor tag (i.e. /#answers), name it something that makes sense or an hour from now you won’t remember which anchor button is going where.

button module to anchor text

Where you want the anchor to land within your text click on the anchor icon and you will get a pop up box asking you the name of the anchor USE THE SAME name as the button url.

name your anchor links

The result will be a short code within your text.  Note: do yourself a favor and name the module with the anchor text to save yourself from trying to find it on the page.

anchor text plugin

 

If you want to add anchor links to a one page menu, follow these steps:

1.  Design your page with your sections and modules.

2.  In the section where you wish to have the button land add a CSS ID.  You will need to toggle from General Settings into Custom CSS This ID should not have characters or spaces – something like findusonthemap if you wish to connect your Find Us or aboutus if you are linking to your About section.

using anchor links in divi

 

3. Go to your Menus (Appearance -> Menus). Create a New Menu.

create new menu for css id for button anchor link

4. On the left hand side of your screen choose Custom Link. Add the anchor link URL (i.e. http://www.domainname.com/#findusonthemap).

6. Add this to your newly created menu.

custom link menu
Finished Product

anchor link button

Step 6.  Under Link Text in the Menu dashboard give your section a proper title – Find Us, About Us, Contact, Special Offer, etc.

Step 7: Choose Primary Menu under Menu Settings.

Navigation Menu for a one page website

Hope this helps you.  Let me know if you have any questions.

SaveSave

EIleen Lonergan
Eileen Lonergan was an integral part of this company. Unfortunately, Eileen Passed away on the 31st of October 2018 after a short battle with Cancer. She leaves behind the legacy of the Divi Theme Users Group and hundreds of people that she helped through coaching, building outstanding websites and just being - accessible. We miss her every day!
Click to access the login or register cheese

Subscribe To Our Newsletter to get the latest news and product updates

You have Successfully Subscribed!

Pin It on Pinterest

Share This