Enabling single page navigation is easy and can be done on an individual basis. Whenever you create or edit a page, look for the "Settings" box. Divi to the right of your text editor. In this box you will see the option Navigation by points. Select "On" from the drop-down menu, then save the page. You will now notice that a floating navigation bar has been added on the right side of your page.
The dot navigation bar automatically adds a clickable link to every section of your page. When you add a new section, a new link (or point) will automatically be added to your floating side navigation.
Users can click on the dots to navigate to different sections of the page. This also makes it easier to identify the location of the visitor on the page, making it easier to understand and navigate long pages.
Create custom menu links for one-page websites
In addition to side navigation, it's also possible to turn your main header navigation into one-page navigation. If you create a Website of a page, 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 you click on them, they can take you to the corresponding section of the page using a smooth scrolling effect. This can be accomplished using personalized identifiers. Any element of the page built with the generator can be assigned an ID.
You can assign an ID to a section by clicking on the section settings icon and looking for the “CSS ID” setting. Once an identifier has been assigned, you can access it from the navigation menu.
For example, say you have a section called "About Us" and you want it to connect to the part of your page that describes your business.
Pointing a menu link to an identifier
To create a custom menu link, you will need to add a new link to your menu using the “Appearances> Menus” tab of your WordPress dashboard. If you are not familiar with the menu system, see this awesome tutorial. Once you've created a new menu and assigned it to the main navigation location, you can start adding links to your header.
In this case, we'll create a custom link by clicking on the “Link” tab on the left side of the page. Once clicked, you will receive two fields (URL and link text). For "link text", simply enter whatever text you want to display in your menu (eg, "About us").
For the URL, we need to link to the ID that we previously assigned to our section. In this case we have added the username "about us" but you can add any id name you like. Since we used the ID “aproposdenous”, we can link to this identifier by creating a URL pointing to “/ #aboutdenous”.
You can use this same method to create as many custom links as you want. Just enter the URL “/ #” followed by the ID you want to target.
That's all for this tutorial, I hope it will allow you to create a "Single Page" site.
