A one-page website can provide a streamlined and engaging user experience, making it easier for visitors to find information quickly without navigating through multiple pages.
In this article, we will guide you through the process of creating a stunning one-page website using Divi.
The process of creating a one-page website requires 3 steps:
Create a WordPress page
Build the layout - each major section of your website will be a Divi Section element
Build the WordPress menu to create the anchor links
Create a new WordPress page
Log in to your WordPress Dashboard
Go to WordPress Dashboard → Pages → Add New Page
Give your page a title, for example, Homepage - you can use any title you want
Click on the Use Divi Builder button
Start adding/building the page's layout, or you can load one of our Premade Layouts.
Publish your page.
Note: Split your page's content/layout into different Sections. Each Section will be used to create the Anchor Scroll Navigation.
Example: Let's assume that the one-page website will have 4 different sections showcasing different aspects of your business:
Case Studies
Services
About Us
Contact Us
Note: Use Divi's Section element for each of those main Sections. You can have as many Sections as you want; however, at least four of them will be used to create the Anchor Points.
Create the Anchor points
Anchor points are the points to which each WordPress menu item will scroll when clicked. In the above example:
Clicking on the Case Studies menu item will scroll to the Section designated for the Case Studies
Clicking on the Services menu item will scroll to the Section designated for the Services
Clicking on the About Us menu item will scroll to the Section designated for the About Us
Clicking on the Contact Us menu item will scroll to the Section designated for the Contact Us
To create each of those Anchor points, edit each Section to which you want the menu items to scroll, and:
Go to Advanced Tab → CSS ID & Classes → CSS ID
Type in the CSS ID (which later will be used to create the Navigation menu items)
Important Notes: When choosing the CSS ID, keep the following things in mind
Use Descriptive Names - Ensure the ID name describes the element’s purpose or content. This makes it easier for anyone reading the code to understand what the element represents.
Follow Naming Conventions - Use a consistent naming convention throughout your project. Common conventions include
Kebab-case (case-studies),
CamelCase (caseStudies),
Snake_case (case_studies)
Avoid Generic Names - Avoid using generic names that do not provide meaningful information about the element.
Use IDs for Unique Elements—IDs should be unique within a page. They are best used for elements that appear only once per page, such as headers, footers, and specific sections.
Keep IDs Short and Simple - While IDs should be descriptive, they should also be concise and easy to type.
Create the WordPress Menu
Go to WordPress Dashboard → Appearance → Menus
Edit an existing WordPress menu or create a new one
Use the Custom Links option to create 4 Menu items
URL - type the # followed by the Sections CSS ID. For example, #case-studies
Link Text - This is the text that will show in the Menu area; in this case, it will be Case Studies - this can be any text you want.
Check the Primary Menu option
Click on the Save Menu button.
Set up the website's Homepage
Go to WordPress Dashboard → Setting → Reading
Enable the A static page option for Your homepage displays
For the Homepage option, select the page you just created.
Click on the Save Changes button
Enable the Dot Navigation (optional)
Go to WordPress Dashboard → Pages → All Pages
Edit the Page you just created
From the right sidebar under the Divi Page Settings box, set the Dot Navigation to On
Note: The number of Dots appearing in the Dot Navigation will equal the number of Section elements you have in your page layout.