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 that 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.
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 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.
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.
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.
Product Updates
- Display a modal containing a YouTube video list with the latest product updates.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.
The Right Settings Panel
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.
Key Interactions
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.
Workspace
The Workspace
modal lets you set how the Visual Builder interface behaves for you. You can learn more about the workspace by checking the Workspace documentation.
Key options to know:
Active Workspace - Select the workspace you want to use.
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
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.
Page Bar Icons - Allow you to choose which interaction icons will appear in the top bar:
Undo/Redo
History
Export & Import
Clear Layouts
Add to Library
Sidebar Icons - Choose which icons will appear in the left sidebar:
Add Layout
Layers View
Wireframe View
Action Icons on Hover
Parent Action Icons on Hover
X-ray
Help
Product Update
Interface Mode Toggle
Show Disabled Module at 50% Opacity - Choose whether to display / hide in the Visual Builder interface elements that are disabled via the Visibility option group.
Group Settings Into Closed Toggles - Choose to display all options groups in closed collapsible tabs or in open tabs.
Add Placeholder Content to the New Modules - Choose whether adding a new module will be prefilled with placeholder content or not.
Speed up the Builder with Prerendering - Choose to enable/disable the prerendering, speeding up the loading of Visual Builder/Preview.
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.
Show Theme Builder Layout - Choose to see and edit Theme Builder templates such as the Theme Builder Header or Footer directly from the page's Visual Builder.
Enable Admin Bar - Choose to display or hide the WordPress top admin bar.