This article shows you how to create and build a page with Divi 5 from scratch. You’ll learn how to add a new page in WordPress, enable the Divi 5 Visual Builder, understand sections, rows, columns, and modules, and build a simple layout you can customize and publish.
You create and build a page with Divi 5 from scratch by adding a new WordPress page, clicking Use Divi Builder, choosing Build From Scratch, and then building the page's layout using sections, rows, columns, and modules in the Visual Builder.
Divi 5 uses a faster, modern builder interface, but the core ideas are the same as Divi 4: you build on the front end and see changes in real time.
Before you start
Make sure:
Divi 5 is installed and active on your site.
You’re logged in to WordPress as an Administrator.
You know where your basic design settings live (Theme Options and the Theme Customizer), even if they’re still on defaults.
⚠︎ Note: This article assumes you’re building a new page (like a Home, About, or Services page), not editing an existing Divi 4 layout.
Step 1: Create a new page in WordPress
In your WordPress dashboard, go to Pages → Add New.
Enter a title for your page (for example, “Home” or “About”).
⚠︎ Note: For static site pages, always use Pages, not Posts. Posts are better for blog articles and news.
Optional but useful:
In the Page settings sidebar (right side), you can choose a template if needed (for example, a blank template that removes the header and footer, depending on your setup). Divi supports blank-page layouts if you want a totally custom design.
Step 2: Enable the Divi 5 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.
You’ll see a full-screen editor with Divi’s interface around your page, and the Page Flow modal opens up with three options:
Build From Scratch – start with a blank canvas.
Choose a Premade Layout – load a pre-designed layout pack.
Build with AI – let Divi AI generate a layout based on a prompt.
For the time being, we are going to focus on the Build from Scratch option.
Click the Build From Scratch option.
Divi adds a blank Section to your page and asks you to insert a Row.
Step 3: Understand Divi’s building blocks
Every page you create and build with Divi 5 from scratch uses the same structure:
Hierarchy:
Sections contain Rows
Rows contain Columns or Nested Rows
Columns contain Modules or Nested Modules
If you’re ever lost, remember: big to small = Section → Row → Column → Module.
Step 4: Build your first simple page layout
Let’s create a basic 3-part layout:
Hero section (big title, text, button).
Two-column content section (text + image).
Simple call-to-action section.
5.1 Add the first row and hero content
After you click Build From Scratch:
Click on the Add Row button
Choose a one-column row (single column).
From the Add Module List (which opens automatically), search for and add the Heading module by clicking on it.
In the Content tab, add a heading (H1) like "Welcome to Our Website".
Use the Design tab to adjust font size, alignment, and spacing if needed.
Add a Text module
Hover the Heading module and click the + icon to add a new module
Search for and add the Text module.
Add a short informative paragraph.
Add a button:
Hover the Text module and click on the + icon to add a new module.
Search for and add a Button module.
Set the button text (for example, “Get Started”) and link.
Use the Design tab to align the button and tweak colors, matching your design system.
You now have a simple hero section.
5.2 Add a two-column content section
Next, create a section with text on one side and an image on the other.
Hover the current section and near the bottom of the page, and click the blue Add New Section icon
.
Insert a Row with two columns.
In Column 1:
Add a Text module.
Use an H2 heading like "What We Do" and a few short paragraphs.
In Column 2:
Add an Image module.
Upload or select an image from your media library.
Use the Design tabs in each module, row, or section to adjust spacing and alignment until it looks balanced.
5.3 Add a simple call-to-action section
Add one more section for a clear call to action:
Hover the current section and near the bottom of the page, and click the blue Add New Section icon
.Insert a one-column row.
Add a Text module for a short headline ("Ready to work with us?").
Add a Button module under it, linking to a contact or booking page.
In the section’s Design settings, you can:
Change the background color to your primary accent color.
Center-align the text and button.
You now have a complete basic page made with Divi 5 from scratch.
Step 6: Edit content and design with the settings panels
Every element you add (section, row, column, module) has a settings window with three tabs:
Content – text, images, links, and basic options.
Design – fonts, colors, spacing, borders, shadows, etc.
Advanced – custom CSS, conditions, visibility, scroll effects, and more.
To open settings:
Click the element itself or hover the element you want to edit and click on the Gear icon to open its settings.
Use the search bar inside the panel if you can’t find an option.
Divi 5 keeps this structure but gives you a cleaner, faster interface and better responsive controls.
Step 7: Navigate the Divi 5 builder while you work
While you create and build a page with Divi 5 from scratch, a few UI tools help you stay in control:
Layers / structure view – open the Layers panel to see sections, rows, columns, and modules in a tidy list and select them quickly.
Top toolbar – use the icons to:
Switch between Desktop / Tablet / Mobile previews and/or make changes to those specific breakpoints.
Zoom in/out.
Toggle Wireframe view for a simplified structural view.
Undo / Redo / History – quickly undo mistakes or jump back to a previous state using the history panel and the undo/redo buttons.
Step 8: Save, publish, and view your page
When you’re happy with your page:
Click the Publish button in the Divi top bar. This saves the layout to the page.
Click Exit Visual Builder (top admin bar) to view the page as a visitor.
Back in the WordPress editor (if needed), click Publish (for a new page) or Update (for edits).
Optional: add the page to your menu in Appearance → Menus so visitors can reach it from your site navigation.
Tips for your first Divi 5 pages
When you first create and build pages with Divi 5 from scratch:
Start with a simple structure (hero, content, call to action).
Keep typography and colors aligned with your basic design system so pages look consistent.
Use Build From Scratch to learn the basics, then explore premade layouts, presets, and Design Variables to speed up future pages.
Don’t worry about being perfect. With undo, redo, and auto-save, you can experiment safely.
Once you’re comfortable creating and building a page with Divi 5 from scratch, you can move on to more advanced features like Design Variables, presets, Nested Rows, Module Groups, and the Theme Builder to handle complex layouts and full-site templates.