A one-page website puts all your key content on a single, scrolling page - perfect for portfolios, small businesses, product launches, or landing pages where you want visitors to find everything quickly without clicking through multiple pages.
This guide walks you through building a one-page website in Divi 5 from scratch. You'll create a page in WordPress, structure it into Divi 5 Sections, add anchor points so menu links jump smoothly to each Section, build a custom WordPress menu, set the page as your homepage, and (optionally) turn on Divi's built-in Dot Navigation.
Before You Begin
Make sure Divi 5 is installed and activated on your site.
Log in to WordPress as an Administrator.
Plan out the major content areas of your page (for example: Case Studies, Services, About Us, Contact Us). Each one will become a Divi 5 Section with its own anchor point.
Step 1: Create a New WordPress Page
From your WordPress Dashboard, go to Pages → Add New Page.
Give your page a title (for example, Homepage). You can use any title you want
Step 2: Enable the Visual Builder
With your new page open, click the Use Divi Builder button.
WordPress reloads the page on the front end with the Divi 5 Visual Builder enabled, and the Page Flow modal opens with three options:
Build From Scratch - start with a blank canvas.
Choose a Premade Layout - load one of Divi's pre-designed layout packs.
Build with AI - let Divi AI generate a layout based on a prompt.
Choose whichever fits how you want to build the page. For this guide, we'll assume you're building from scratch, but the anchor-link steps work the same way for any layout.
💡 Tip: If you choose Choose a Premade Layout, pick a Landing Page layout - they're already designed around the one-page structure you need.
Step 3: Structure Your Content Into Sections
In Divi 5, every page is built out of Sections → Rows → Modules. For a one-page website, each major area of your page should live inside its own Section, because Sections are what your menu will link to.
Using the example from Step 1, you would create four Sections:
A Section for Case Studies
A Section for Services
A Section for About Us
A Section for Contact Us
You can add as many extra Sections as you like (hero, testimonials, footer CTA, etc.), but at a minimum, you need one Section for every menu item.
⚠︎ Note: Only Sections, Rows, and Modules can have a CSS ID. For a clean one-page menu, attach the ID to the Section that wraps each area of content.
Step 4: Add a CSS ID to Each Section (Create the Anchor Points)
An anchor point is the spot on the page that a menu link scrolls to when clicked. In Divi 5, you create an anchor point by giving the Section a unique CSS ID.
For each Section that should be a menu target:
Click the Section's gear icon to open its settings.
Go to Advanced Tab → Attributes.
Click + Add Attribute
Choose ID
Enter the Attribute Value (for example, case-studies).
Repeat for every Section you want to link to in your menu. Using our example, you'd end up with IDs like case-studies, services, about-us, and contact-us.
⚠︎ Note: When choosing CSS IDs, keep these rules in mind:
Use descriptive names - the ID should describe what the Section contains (case-studies is better than section-1).
Stick to one naming convention - kebab-case (case-studies), camelCase (caseStudies), or snake_case (case_studies). Pick one and use it for every ID.
Use only lowercase letters, numbers, and hyphens - avoid spaces and special characters.
Keep IDs unique - the same ID must not be used twice on the same page.
Keep IDs short and simple - descriptive but easy to type.
When you're done, save the page using the purple Save button at the bottom of the Visual Builder, then exit the Visual Builder.
Step 5: Create the WordPress Menu
The next step is building the menu that uses those CSS IDs as anchor links.
Go to WordPress Dashboard → Appearance → Menus.
Edit an existing menu or create a new one by clicking create a new menu, giving it a name, and clicking Create Menu.
In the left panel, click Custom Links to expand it.
For each Section you want in the menu, add a custom link:
In the URL field, type # followed by the Section's CSS ID. For example, #case-studies.
In the Link Text field, type the label you want visitors to see (for example, Case Studies).
Click Add to Menu.
Repeat for each Section (#services, #about-us, #contact-us, etc.).
Once all items are added:
Under Menu Settings → Display location, check Primary Menu (or whichever menu location your theme uses for the main navigation).
Click the Save Menu button.
Step 6: Set the Page as Your Homepage
To make your new one-page layout load as your website's homepage:
Go to WordPress Dashboard → Settings → Reading.
Under Your homepage displays, select A static page.
For the Homepage dropdown, select the page you created in Step 1.
Click Save Changes.
Step 7: Enable Dot Navigation (Optional)
Divi 5 includes a built-in Dot Navigation feature that adds a floating vertical dot menu to the right side of your page - one dot per Section. Clicking a dot jumps to that Section, giving visitors another way to navigate your one-page site.
To turn it on:
Go to WordPress Dashboard → Pages → All Pages.
Edit the page you created in Step 1.
In the right sidebar, find the Divi Page Settings box.
Set Dot Navigation to On.
Click Update.
⚠︎ Note: The number of dots in the Dot Navigation matches the number of Section elements on the page.
Your one-page Divi 5 website is live. Visit your homepage, click each menu item, and watch the page smoothly scroll to the matching Section. If you turned on Dot Navigation, the floating dots will track your progress as you scroll.
From here, you can keep designing inside the Visual Builder - add Rows, drop in Modules, fine-tune Spacing and Typography in each Section's Design tab, and use Global Presets to keep styling consistent across the page.