When someone visits your website, you want to make sure they have no problem finding what they’re looking for. And having a clear, easy-to-follow navigation menu is key. But what if you only have a one-page site? Is having a menu still necessary?

Yes! But not the traditional menu that’s on a multi-page site.

You need an anchored menu! This week’s WordPress Wednesday Tip 22: Creating Anchored Menus in Divi is going to show you how.

But first thing’s first.

What is an Anchored Menu Exactly?

An anchored menu is a menu that takes visitors to specific sections of a page, rather than to a different page on the site. Not only are they ideal for providing user-friendly navigation on a one-page site, they can also be used on a page that is particularly long so visitors don’t have to scroll through the page to find what they need.

Onward Ho!

WordPress Wednesday Tip 22: Creating Anchored Menus in Divi

 

1.  Using the Divi Builder, create your web page. (Need help with this step? Click here).

 

2.  For this how-to guide, we’ve created the following sample page. This page is 1 standard section, with 1 column and a text module for each of the 4 rows, but you can use any type of section, row, and modules that you like. We’re going to create menu items from each of the sections (labeled Menu Item 1, Menu Item 2, and so on). From the backend, our page looks like:

 

 

Viewing the page from the front end, it looks like:

 

3.  Click the Settings icon in the module you want as your first menu item.

 

 

4.  Click on Advanced. This takes you to the module’s advanced design settings.

 

 

5.  In the CSS ID box, name the item. Note: the name can only be lowercase letters, numbers, and hyphens. It cannot include spaces, uppercase letters, or special characters.

 

6.  Click Save & Exit.

 

 

7.  Repeat Steps 3-6 for each section you want to include on your anchor menu.

 

8.  When finished naming the CSS IDs, update the page by clicking ‘Update’.

 

 

9.  Next, click on your ‘Dashboard’.

 

10. Hover over ‘Appearance’ and click ‘Menus’. This will direct you to the main menus page.

 

 

11. Click ‘Create a New Menu’.

 

 

12. Name your menu & click ‘Create Menu’

 

 

13. On the left side of the screen, expand ‘Custom Links’. In the URL box, type the name of the first CSS ID you created with a hashtag (#) in front of it. (In our example, it would be #menu-1). Then add what you want the menu item to display as for viewers in the ‘Link Text’ box. (In our example, we are naming this ‘Menu Item 1’). Click ‘Add to Menu’.

 

 

14. Note that this is now part of the menu structure. Repeat Step 13 for each of your menu items. When finished, click ‘Save Menu’.

 

 

15. Next, you need to add this new menu to the page you created. Navigate back to your Dashboard. Hover over ‘Pages’ and click ‘All Pages’.

 

 

16. Hover over the page you created for your anchored menu and click ‘Edit’. (In our example, it’s called ‘Sample Page for Anchored Menu’.)

 

 

17. We are going to add this menu above the text, but not in the Primary Menu. To do this, add a ‘Fullwidth Section’ to your page & choose the ‘Fullwidth Menu’ as the module. 

 

 

 

18. Select the menu you created. Customize your text, background color, size, etc by using the ‘Content’, ‘Advanced’, & ‘Design’ Settings. When satisfied, click ‘Save & Exit’.

 

 

19. Position the section where you want it to be on the page and update your page.

 

 

{Here’s what our page looks like. When you click on Menu Item 1, Menu Item 2, etc, the screen scrolls to that respective section of the page.}

 

 

You did it! You’ve created an anchored menu in your Divi site! Great Job!

 

Know someone who’s working on a WordPress site? Why not share WordPress Wednesday Tip 22: Creating Anchored Menus with them?

And check out some other helpful WordPress Wednesday How-Tos!

 Optimizing Posts for Search Engines with Yoast
Adding Hyperlinks to Posts and Pages
How to Edit Permalinks
Resetting Your Password
Setting Up {or Changing} Form Notifications