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.
Example:
If in the layout, there are three sections:
About us - with the CSS Id
about-usServices - with the CSS Id
servicesContact - 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-usCustom link 2 - Label: Services, URL:
#servicesCustom 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.