Divi's Single Page Sidebar Navigation Makes It Easy
When you create a new page, you can easily enable Divi's Dot 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 IDs to create one-page menus for the complete One-Page package.
Enabling Single Page Navigation
Enabling Single Page Navigation is easy, and it can be done on a per-page basis.
Whenever you create or edit a page, look for the Divi Settings box to the right of your text editor.
Within this box, you will see the Dot Navigation option. Select On from the dropdown menu, and then save the page.
You will now notice that a floating navigation bar has been added to the right side of your page. The Dot Navigation bar automatically adds a clickable link to each section on your page.
When you add a new section, a new circle link (or dot) will be added automatically to your floating side nav.
Users can click the dots to skip to different sections on the page. It also makes it easier to identify where the visitor is on the page, making it easier to understand and navigate long-format pages.
Create Custom Menu Links For One-Page Websites
In addition to side navigation, it's also possible to transform your main header navigation into one-page navigation.
If you create a one-page website, you want your menu links to be distinct from 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 accomplished using custom ID's. Any element on the page that is built with the builder can be assigned an ID.
You can assign an ID to a section by clicking the section settings icon and looking for the CSS ID setting in the Advanced Tab → CSS ID and Classes.
You can link to an ID from the navigation menu once an ID has been assigned.
Example: For a section called About Us, you want it to link to the part of your page that describes your company.
Edit the section that contains your About Us content, enter about-us into the CSS ID field and click Save.
Now that an ID has been assigned, we can point a link to it.
Note: All CSS Id should be added lowercase, and any spaces should be replaced with -.
Pointing a Menu Link to an element's CSS ID
To create a custom menu link, you must add a new link to your menu using the Appearances → Menus tab in your WordPress Dashboard.
If you are still getting familiar with the Menus system, check out this great tutorial.
Once you have created a new menu and assigned it to the Main Navigation location, you can add links to your header.
In this case, we will create a custom link by clicking the Link tab on the left-hand side of the page.
Once clicked, you will be given two fields (URL and Link Text):
For the Label Text, enter the text you want to show up in your menu (for example, About Us).
For the URL, we need to link to the ID assigned to our section earlier.
In this case, we added the id about-us, but you can add any ID name that you like.
Since we used the ID about-us, we can link to that ID by creating a URL pointing to #about-us.
You can use this same method to create as many custom links as possible. Enter the URL of # followed by the ID that you want to target.
