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.
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.
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.
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.
3. Go to your Menus (Appearance -> Menus). Create a New Menu.
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.
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.
Hope this helps you. Let me know if you have any questions.