All Collections
FAQ's and Troubleshooting
How to create a one-page website with Divi
How to create a one-page website with Divi
Andrei N avatar
Written by Andrei N
Updated over a week ago

Step 1. Create a new page

To create a one-page website, you need to create a new page first under Pages > Add New:

Step 2. Create the layout of the new page

Enable the Divi Builder and start adding/building the page's layout or load one of our premade layouts.

Step 3. Set up the website's Homepage

To set the new page as the front page of your website, go to Settings > Readings and set the page as Homepage:

You can use the blank page template if you do not need the primary navigation and footer.

However, if you have a lot of content on the page, add navigation or side navigation to make it easier to navigate through the page.

Step 4. Adding the CSS IDs for all the elements that will be used to scroll to

Best Practice: Set CSS ID to the Sections. A section with a CSS ID set will be used as scroll-to an element.

For each Section in the layout, open the Settings Modal Window, go to Advanced Tab > CSS ID & Classes > CSS ID, and set a unique ID.

Note: CSS ID should not contain any spaces or special characters, and it should be unique.

Step 5. Create the WordPress menu

The Menu can be created in Appearance > Menus.

Using the Custom Links option add one menu item for each element in the layout with a CSS ID set. The Label text is the text that the Menu item will display in the Menu, and the URL is the ID of the element that the menu item should scroll to when clicked.


If in the layout, there are three sections:

  • About us - with the CSS Id about-us

  • Services - with the CSS Id services

  • Contact - with the CSS Id contact

In the Appearance > Menus, there will be three custom links as follows:

  • Custom link 1 - Label: About Us, URL: #about-us

  • Custom link 2 - Label: Services, URL: #services

  • Custom link 3 - Label: Contact, URL: #contact

Important Note: The CSS ID is passed as the URL using the #.

That's it! Once you click on that link in the Menu, it will scroll down to the Section with the CSS ID.

Dot Navigation

For one page website, it is commonly accepted that a Dot Navigation is also displayed on the right-hand side.

The Dot navigation can be enabled in Divi Page Settings:ย 

The number of dots depends on the number of sections added to the page.

Did this answer your question?