Undo/Redo and History let you step backward through changes or open the History panel for a chronological list of every edit in your session.

Portability and Library let you export your layout as a JSON file (including all Global Canvases) or import one, clear every module with the Clear Layout trash icon, or use Add To Library to name and save a layout, section, row, or module, including to Divi Cloud.

Preview and Exit let you open Preview Mode to see your page as a visitor would, use the Exit menu to leave to the Pages area or Dashboard, and use Save to publish or set the page to draft, pending, or private.

Add Layout / Divi Library inserts premade layouts, saved Divi Library items, or a layout built with Divi AI.

Layers View is a searchable, hierarchical tree of every element. Expand, collapse, rename, or jump to any section or module with a single click.

The Inspector gives a high-level overview of an element's attributes, grouping colors and fonts in one place so you can bulk-edit styles across many elements at once. (More on the Style Inspector below.)

The Variable Manager is your design system hub for Design Variables covering colors, fonts, numbers, text, images, and links. You can create Relative Colors using HSL, or store values like clamp() in number variables. Update a variable once, and every module using it updates instantly across the site.

The Preset Manager is the centralized home for global style management. It houses both Element Presets, which control an entire module, and Option Group Presets, which save just one group of settings such as Box Shadow or Typography. Edit a preset here, and every module using it updates. (Covered in depth in Preset Manager and Preset Preview Systems in Divi 5.)

The Page Manager turns the Visual Builder into a site-wide control center. Search all your pages, posts, and projects and open any in the Builder. As you browse, Speculative Prerendering predicts your next click and preloads it for near-instant switching.

The Command Center lets you type what you need instead of clicking through menus. Click into the Canvas, type a module name, and press Enter to add it. You can even chain commands, for example, typing row > column > blurb > button and using Cmd + Return between each to build a full layout.

Wireframe View hides all styling so you can focus on hierarchy, giving you the familiar Divi 4 back-end look inside the front end.

Action Icons On Hover and Parent Action Icons On Hover control whether editing buttons appear on mouseover, letting you reduce visual noise.

X-Ray Mode keeps your content visible but outlines every element, making it easy to spot which container is causing a spacing conflict.

Workspaces it allows you to create personalized workspace and customize the interface, including Builder Default View Mode, History State Interval, Settings Modal Default Position, Page Creation Flow, Page Bar Icons, Show Disabled Modules At 50% Opacity, Group Settings Into Closed Toggles, Add Placeholder Content To New Modules, prerendering, Interface Mode, Color Scheme, Show Theme Builder Layouts, and Enable Admin Bar.

Help opens video tutorials and a full list of keyboard shortcuts.

Light/Dark Mode toggles the interface theme without affecting your site design.

Extend Attributes propagate styles, content, and presets across your layout. Choose exactly what to push, from an entire option group down to Modified Fields only, and set the scope from a single module group up to the whole page. You can even extend attributes across different module types, such as pushing a Contact Form's button styling to every standalone Button.

Copy and Paste Attributes lets you copy specific parts of an element, then choose which attributes to paste onto another, including all attributes, just styles, just content, or an applied preset.

Bulk editing with the Style Inspector shows every color, font, spacing value, content item, and preset in the selected area. Change a color once, and it updates everywhere that color is used.
​Usage: click into a module, column, row, or section, and click the Inspector icon. You’ll have instant access to all styles, content, and presets used in that area of the Canvas. If you need to change a specific color across an entire section, you can do so once in the Inspector. It will instantly find every element using that color and update them all simultaneously.

Multi-selecting modules handles structure: hold Shift and click multiple modules, then drag them to a new location as a group.

One-click editing opens a module's full settings in the Sidebar the moment you click it, no settings icon required.

Breadcrumbs at the top of the Sidebar let you jump from a module up to its parent Column, Row, or Section.

Element Presets sit next to the module name. Click the icon to apply a saved preset, create a new preset from current styles, or add a new one. (See also Stacked and Nested Presets.)

The Responsive State Picker sets which breakpoint, hover state, or sticky state you are styling. Each panel also has a search bar and filters for modified fields and variables in use.

Elements unlock Nested Modules, letting you place modules inside other modules, such as a Button inside a Blurb.

Loop introduces the Loop Builder, which turns any element, including a Column, Row, Group, or Link module, into a repeating loop of dynamic content.

At the Row level, Apply Structure Template lets you redefine your column arrangement for a specific breakpoint.

At the Column level, the Order menu changes a column's display order on smaller screens so stacked layouts do not look messy.

Composable Settings make design features interchangeable. Hover next to a group like Title Text and click the composable settings icon to add Background, Sizing, Spacing, Border, and more to a sub-element that previously had none.

Advanced Units turn every spacing, sizing, and typography field into a mini code editor. Type clamp(), calc(), min(), or max() directly, or insert a Design Variable to link the value globally.

Flexbox in the Layout menu controls alignment: set Layout Direction, choose whether items Wrap, use Justify Content and Align Items to position elements, and control spacing with Gap.

CSS Grid handles two-dimensional layouts. Define rows and columns, and redefine the grid for mobile to move or remove elements per breakpoint.

Custom Attributes let you add HTML attributes like data attributes or aria-labels to any element.

Semantic Elements and Custom HTML Wrappers let you swap standard div wrappers for tags like article, aside, or nav, and inject HTML before and after an element. Place any related CSS at the page level in the Custom CSS field.

Interactions create animations such as translate, scale, rotate, or tilt that trigger on mouse movement and can trigger popups, slide-ins, and mega menus when combined with Canvases.