Divi 5 introduces several improvements that enhance user experience and streamline the design process. Whether you're a beginner or a seasoned designer, these changes will help you build websites faster and more efficiently.
One of those major changes is the Options Sidebar.
The options sidebar contains the following options:
Add Layout
- Add a Premade or custom layout saved in Divi Library and/or Divi Cloud.Layers View
- Enable or Disable the Layers View.Style Inspector
- Open the Style Inspector, which displays the styles, content, and preset the selected element has.Variable Manager
- Opens the Global Variable Manager. It allows you to create/change global variables such as Text, Color, Fonts, and more.Presets Manager
- It allows you to manage all the Element and Option Group Presets in one place.Page Manager
- 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.Command Center
- You can quickly execute commands such as adding elements, navigating your website, jumping to specific settings, opening panels, and more. Check out this article for more details about the Command Center.Wireframe View
- Switch to Wireframe mode.Action Icons on Hover
(enabled by default) Enabled - Displays all action icons regardless of which element is hovered. For example, if you hover over a module beside the module's action icon, the Row's and Section's action icons will display.
Disabled - Only the parent element's action icons will be displayed. For example, only the rows' and sections' action icons will be displayed if you hover over a module.
Parent Action Icon on Hover
(enabled by default)Enabled - Displays the action icons of the parent element. For example, if you hover over a module, the Row's and Section's action icons will be displayed.
Disabled - Displays only the action icons of the element that is being hovered. For example, if you hover over a module, only the action icons of that module will be displayed.
X-ray
- Displays an outline of each element in your layout, including modules, columns, rows, and sections, giving you a better understanding of its structure.Builder Settings
- Access the Visual Builder Settings.Workspace
- It allows you to create custom workspaces. A workspace is a saved configuration of the Divi 5 Visual Builder itself - your builder preferences (like Interface Mode and Page Bar Icons) plus the builder's layout (window arrangement, sidebar, which panels are open, current view, and breakpoint).Help
- Access the Divi Builder Helper, which provides YouTube videos and documentation links.Dark/Light mode toggle - Allows you to toggle between Visual Builder's dark and light modes.