One-page site with divi: Enabling single-page navigation is easy and can be done on an individual basis. Whenever you create or edit a page, look for the “Divi Settings” box 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. It also makes it easier to identify the visitor’s location on the page, making it easier to understand and navigate long pages.

Create custom menu links for a One-page site with divi

In addition to side navigation, it is also possible to turn navigation from your main header to one-page navigation. If you’re building a One-page site with divi, 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, let’s say you have a section called “About Us” and you want it to connect to the part of your page that describes your business.

Read more: How to give a unique style to the buttons on Divi

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 on your WordPress dashboard. If you are not familiar with the menu system, check out 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 the text you want to display in your menu (for example, “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 id 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.

 

For website maintenance service contact us.