The Divi Builder comes in two forms: The standard “Back-end Builder” and the front-end “Visual Builder.”
Both interfaces allow you to build exactly the same types of websites with the same content elements and design settings. The only difference is the interface.
Log in to your WordPress Dashboard.
Go to Pages → Add New to create a new page, or Pages → All Pages and click Edit on an existing one.
Click the Use Divi Builder button.
The page will reload and open the Divi 5 Visual Builder interface.
The Visual Builder interface has three key areas you’ll use all the time: left sidebar, top bar, and right settings panel.
Top Bar – Page tools and responsive controls
This bar controls device previews (desktop, tablet, phone), canvas width, zoom, history, and saving.
Left Sidebar Panel – Builder tools
This is where you access layouts, structure tools, builder settings, and help.
Right Sidebar – Settings panel
When you click any Section, Row, Column, or Module, its settings open here. You’ll see Content, Design, and Advanced tabs for that element.
Visual Builder Canvas
In the center of the screen, you have the canvas, where you actually see and edit your layout.
The top bar controls your view, responsive editing, and page state. Common items you’ll use:
Device icons (breakpoints)
Switch between Desktop, Tablet, and Phone previews.
If you enable extra breakpoints (Phone Wide, Tablet Wide, Widescreen, Ultra Wide), they appear here too.
The triple-dot icon next to the device icons opens the Sitewide Responsive Breakpoints modal, where you can enable, disable, and adjust breakpoint widths across your entire site.
Canvas width and zoom
Control how wide the canvas appears on your screen. This is more powerful than it sounds – you can scale the canvas to preview exactly how your layout will look at any viewport width without resizing your browser window.
Zoom in for detailed work, zoom out to see the whole layout.
History and undo/redo
Undo/redo arrows let you step back and forward through recent actions.
The history icon opens the full History panel, where you can jump to a specific state.
Save / Exit / Preview
Use Save regularly.
Use Preview to see the page in a new tab without the Visual Builder interface.
Use the Exit button when you’re done editing to return to the normal page view or dashboard.
The left sidebar controls how the Visual Builder interface behaves and gives you quick access to key tools.
You’ll see icons for:
Add Layout 
Open premade layouts, your Divi Library, or Divi Cloud layouts.
Useful when you want to start from a premade design instead of a blank page.
Layers View 
Opens the Layers panel, a tree view of your Sections, Rows, Columns, and Modules.
Great for selecting elements in crowded layouts, renaming items, and reorganizing the page structure.
Inspector 
Open the Style Inspector, which displays the styles, content, and preset the selected element has.
Global Variable Manager
Opens the Global Variable Manager. It allows you to create/change global variables such as Text, Color, Fonts, and more.
It allows you to manage all the Element and Option Group Presets in one place.
It allows you to manage all the pages and posts that are using Divi Builder right from inside the Visual Builder without having to jump back to the WordPress dashboard.
You can quickly execute commands such as adding elements, navigating your website, jumping to specific settings, opening panels, and more.
Wireframe View
Switches the canvas to Wireframe mode, where each Section/Row/Module appears as a simple labeled block.
Use this when you want to focus on structure instead of visuals (very handy on long pages).
Action Icons on Hover 
Enabled: shows action icons for the hovered element and its neighbors.
Disabled: shows fewer icons, so the interface looks cleaner.
Parent Action Icon on Hover 
Enabled: also shows icons for parent elements (for example, Section and Row when you hover a Module).
Disabled: shows only the icons for the element you’re hovering.
X-Ray 
Draws outlines around all elements (Sections, Rows, Columns, Modules) on the canvas.
Helps you see the structure and spacing clearly when design elements overlap.
Builder Settings 
Opens a modal with global options for how the Visual Builder interface behaves. We’ll cover this in more detail below.
Help 
Opens the Divi Helper with links to docs and video tutorials if you get stuck.
Light and Dark mode toggle
Divi 5 includes the much-anticipated addition of light and dark modes, allowing users to switch between themes depending on their environment. This feature isn’t just about aesthetics-it’s about improving comfort and usability during long design sessions.
Click any Section, Row, Column, or Module, and its settings open in the right panel. This is where you’ll spend most of your time.
At the top:
Breadcrumbs
Shows where you are in the layout structure (for example: Page → Section → Row → Column → Module).
You can click each part to jump back up the structure.
Inside the panel:
Content tab
Actual content: text, images, icons, links.
Backgrounds and labels (for easier identification in Layers).
Design tab
Styling: fonts, sizes, spacing, colors, borders, shadows, alignment, etc.
Many options support responsive values and hover states directly inside the field.
Advanced tab
Fine control: custom CSS, visibility, transitions, attributes, and more.
Useful once you’re comfortable with the basics and want more control.
Other powerful helpers in this panel:
Responsive / hover toggles
Device icons let you set different values at different breakpoints.
Hover icons let you style “normal” and “hover” states in the same place.
Presets and design variables
Presets let you save styling as reusable presets for elements or option groups (e.g., a button style).
Design Variables let you define global values for colors, fonts, spacing, etc., then reuse them everywhere.
Search and filters
You can search for a setting by name instead of hunting through toggles.
Filters let you see only modified fields, fields with variables, or only color-related settings.
Divi AI integration
Many fields have an AI icon. You can use it to generate text, images, or code directly from inside the builder.
One-click to edit
Click any module on the canvas to open its settings immediately. There are no small icons to hunt for – clicking the element is all it takes.
Right-click for controls
Right-clicking any element on the canvas opens a context menu with the most common actions: duplicate, copy styles, paste styles, delete, and more. For repetitive tasks – like applying a consistent style across multiple sections – right-click is faster than going through the settings panel every time.
See the full Right-Click Contextual Menus reference for all available options.
The Builder Settings modal lets you set how the Visual Builder interface behaves for you.
Builder Default View Mode
Choose which view opens by default: Desktop, Tablet, Phone, or Wireframe.
History State Interval
Choose how often the Visual Builder will create a History Interval
Settings Modal Default Position
Pin the settings panel to the left or right sidebar.
Or keep it floating and remember the last position.
Smaller docked panels stay out of the way so you can always see your layout.
Page Creation Flow
Choose what happens when you open the Visual Builder:
Show a choice (Build from Scratch, Choose a Premade Layout, Build with AI).
Always start from scratch.
Always open the premade layout library.
Always clone an existing page.
Interface Mode and Color Scheme
Switch between light and dark modes.
Choose the interface color scheme (blue, purple, green, red, orange). This affects only the UI, not your design.
Other helpful options
Group settings into closed toggles (keeps the panel tidy).
Show disabled modules at 50% opacity or hide them completely.
Add placeholder content to the new modules.
Enable Admin Bar: This option, if enabled, will display the WordPress admin bar at the top.
