Skip to Main Content

How to create a one page site with Divi

Divi: the easiest WordPress theme to use

Divi: The best WordPress theme of all time!

With over 701.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]

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.

dot navigation divi.png

Create custom menu links for one-page websites

In addition to side navigation, it is also possible to turn your main header navigation into a page navigation. If you're building a one-page website, you don't want your menu links to point to separate pages. Instead, these links can point to relevant sections on the same page.

Easily create your website with Elementor

Elementor allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]

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.

Are you looking for the best WordPress themes and plugins?

Download the best plugins and WordPress themes on Envato and easily create your website. Already more than 49.720.000 downloads. [EXCLUSIVE]

about us divi.png

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.

Easily create your Online Store

Download free WooCommerce, the best e-commerce plugins to sell your physical and digital products on WordPress. [Recommended]

about us divi menu.png

That's all for this tutorial, I hope it will allow you to create a "Single Page" site.

This article features 0 comments

Leave a comment

Your email address will not be published. Required fields are marked with *

This site uses Akismet to reduce unwanted. Learn more about how your comments data is used.

Back To Top
22 shares
Share12
tweet3
Save7