This article walks you through the Divi 5 Visual Builder interface step by step. You’ll learn how to open the builder, what each part of the Visual Builder interface does, and how to use its main tools to edit your pages. This is aimed at you as a new Divi user, so we’ll keep it simple and focused on the basics you actually need.
Before you start
Make sure you have:
Divi 5 installed, activated, and your license connected.
At least one page or a new blank page published, you can edit.
You don’t have to add any content yet. You’ll do that inside the Visual Builder.
How to open the Visual Builder
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.
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 (devices, zoom, history, and saving)
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.
Responsive breakpoints menu
A triple-dot icon next to the devices opens the Sitewide Responsive Breakpoints modal.
Here you can enable/disable extra breakpoints and adjust their widths for your entire site.
Canvas width and zoom
Control how wide the canvas appears on your screen.
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 options sidebar
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.
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.
The settings panel on the right
Whenever you click a Section, Row, Column, or Module, the right sidebar opens its settings.
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.
Adjusting global Visual Builder preferences
The Builder Settings modal lets you set how the Visual Builder interface behaves for you.
Key options to know:
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.