Divi Builder¶
The Divi Builder is the visual page building system at the core of Divi. It includes two interfaces: the front-end Visual Builder and the back-end Theme Builder for templates.
Quick Reference
What it covers: Visual Builder interface, layout systems, design tools, editing features, and site management Access: WordPress admin → Pages → Enable Visual Builder (or any page front-end with admin bar) Key concepts: Sections → Rows → Columns → Modules hierarchy, Flexbox/Grid layout, Presets, Design Variables
Sections¶
| Section | Description | Status |
|---|---|---|
| Visual Builder | Front-end drag-and-drop editor | ✅ Done |
| Theme Builder | Template system for headers, footers, post templates | ✅ Done |
| Divi Library | Saving and loading layouts | ✅ Done |
| Presets | Reusable design configurations | ✅ Done |
| Global Elements | Reusable modules and sections that sync across pages | ✅ Done |
| Role Editor | Control Divi feature access per user role | ✅ Done |
| Responsive Preview | Preview designs across device sizes | ✅ Done |
| Multi-Select & Bulk Editing | Select and edit multiple elements at once | ✅ Done |
| Layers View | Navigate page structure in a tree view | ✅ Done |
| Gradient Builder | Create and customize CSS gradients | ✅ Done |
| Condition Options | Conditional display logic for elements | ✅ Done |
| Support Center | Debugging tools and safe mode | ✅ Done |
| Semantic Elements | Assign semantic HTML tags and custom HTML wrappers | ✅ Done |
| Custom Breakpoints | Configure responsive breakpoint widths site-wide | ✅ Done |
| Responsive Editor | Edit per-breakpoint values from a unified modal | ✅ Done |
| Custom Attributes | Add HTML attributes to any element | ✅ Done |
| Settings Search | Search and filter element settings | ✅ Done |
| Page Manager | Create, duplicate, and switch pages in the builder | ✅ Done |
| Speculative Prerendering | Preload pages for instant builder navigation | ✅ Done |
| Divi AI | AI-powered content, image, and layout generation | ✅ Done |
| Nested Modules | Nest modules inside other modules for complex layouts | ✅ Done |
| Nested Rows | Place rows inside columns for sub-grid layouts | ✅ Done |
| Canvases | Off-canvas workspaces for popups, menus, and staging | ✅ Done |
| Command Center | Keyboard-driven command palette for rapid builder actions | ✅ Done |
| Interactions | Event-driven animations and dynamic behaviors | ✅ Done |
| Attribute Management | Copy, paste, and reset element attributes | ✅ Done |
| Extend Attributes | Propagate attributes to multiple elements at once | ✅ Done |
| Dynamic Content | Pull live data from posts, custom fields, and variables | ✅ Done |
| Loop Builder | Display repeating content from database queries | ✅ Done |
| Find and Replace | Bulk search and replace attribute values | ✅ Done |
| Visual Builder Interface | Guided tour of the workspace panels and toolbars | ✅ Done |
| Keyboard Shortcuts | Complete keyboard shortcut reference | ✅ Done |
| Right-Click Menus | Context menu operations on elements | ✅ Done |
| Left Sidebar | Left options sidebar panels and controls | ✅ Done |
| Wireframe View | Structural editing mode for layout work | ✅ Done |
| Responsive Options | Device-first responsive editing workflow | ✅ Done |
| Add, Duplicate & Remove | Building and managing page elements | ✅ Done |
| Copy & Paste Attributes | Granular attribute transfer between elements | ✅ Done |
| Find & Replace Attributes | Bulk value replacement across elements | ✅ Done |
| Element Presets | Per-element-type saved design configurations | ✅ Done |