When you create a new page, you can easily enable Divi’s Single Page navigation option, giving your visitors a visual and clickable representation of their progress on the page. You can also use custom anchor links and Section ID’s to create one-page menus for the complete One-Page package.

Divi WordPress Theme

To enable Single Page Navigation you can do it on a per-page basis. When you create a new page, focus on “Divi Settings” box on top right of the page. With this box you can enable “Dot Navigation” which allows users to navigate any section on a page clicking on dots that scrolls user to specific section.

Dot navigation

The sidebar navigation automatically appends a clickable link to each section on your page. When you add a new section, the Dot navigation assigns a new ID for that section which will be used to scroll the page on specific section. Users can click the circles to skip to different sections on the page. It also makes it easier to identify where the visitor is on the page, makes long-format pages easier to understand and navigation.

Dot navigation in action divi

Creating Custom Menu Links for One-Page Website

With Sidebar navigation it’s possible to transform your main header navigation into one-page navigation. If you are creating a one-page website, then you don’t want your menu links to point to separate pages. Instead, these links can point to relevant sections on the same page. When clicked, they can take you to the relevant section on the page using a smooth scrolling effect.

This can be done using custom ID. Any element on that page is built with Divi Builder can be assigned with an ID. Click on “Settings” icon on that section and tap “CSS Settings”

Now type any text for assigning a unique ID and click “Save & Exit”

Assign ID

If you have a section called “About Us” and you want it to link to the part of your page that describes your company. Edit the section that contains your About Us content, and enter “aboutus” into the “CSS ID” field and click “Save.” Now that an ID has been assigned, we can point a link to it.

Pointing A Menu Link To An ID

To create a custo menu link, you will need to add a new link to your menu using the “Appearances > Menus” tab in your WordPress Dashboard. If you are unfamiliar with the Menus system, check out this great tutorial.

Once you created a new menu and assigned it to the Main Navigation location, you can start adding links to your header. So now we will be creating a custom link by clicking the “Link” tab on the left side of the page. Once clicked, you will be given two fields (URL and Link Text).

pointing menu link to section

For the “Link Text,” simply enter the text that you would like to show up in your menu (For example, “About Us”). For the URL, we need to link to the ID that we assigned to our section earlier. In this case, we added the id “aboutus” but you can add any ID name that you like. Since we used the ID “aboutus,” we can link to that ID by creating a URL pointing to “/#aboutus”

Pin It on Pinterest

Share This