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.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 Row's and Section's 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 Setting
- Access the Visual Builder Settings.Help
- Access the Divi Builder Helper, which provides YouTube videos and documentation links.
Builder Settings
The Builder Settings modal window allows you to customize how the entire Visual Builder works. You can choose the default view that is going to be used each time the Visual Builder is opened, how often the history is saved, if the design options should be grouped into closed toggles, show disabled modules, and more:
Builder Default View Mode - Chose the Visual Builder's default view when opened:
Desktop View (default) - Open the Visual Builder in desktop mode.
Tablet View - Open the Visual Builder in tablet mode.
Phone View - Open the Visual Builder in phone mode.
Wireframe View - Open the Visual Builder in wireframe mode.
History State Interval - Choose how often the changes are saved in the History State panel.
Settings Modal Default Position - Choose the settings modal's default position:
Fixed Right Sidebar (default) - The Modal Settings will always be docked to the right-hand side.
Fixed Left Sidebar - The Modal Settings will always be docked to the left-hand side.
Last Used Position - If the Modal Settings is undocked, its last used position will be used.
Floating Minimum Size - The Modal Settings Window is undocked and will have a minimum size.
Page Creation Flow - Choose what you see when the Visual Builder is loaded:
Give me a Choice - A three options modal will appear each time the Visual Builder is loaded:
Build from Scratch - Start building immediately without any other distractions.
Choose A Premade Layout - The Premade Selection modal will appear when the Visual Builder is loaded.
Build with AI - Use Divi AI to build the layout.
Build from Scratch - The three-option modal will not appear and you can start building immediately.
Load Premade Layout - The selection of premade layout will open each time the Visual Builder is loaded.
Clone Existing Page - The Clone Existing Page modal will open each time the Visual Builder is loaded.
Show Disabled Module At 50% Opacity (enabled by default) - Choose how disabled elements are displayed in the Visual Builder. If this option is disabled, any disabled elements will not show.
Group Settings Into Closed Toggles (enabled by default) - Choose whether the content, design, and advanced settings will be grouped into closed toggles.
Add Placeholder Content To New Modules (enabled by default): You can choose whether the modules will use placeholder content.
Interface Mode - Choose between dark and light mode.
Color Scheme - Choose the color scheme. This only applies to various interface elements, and it does not affect your design:
Blue (default option)
Purple
Green
Red
Orange
Enable Admin Bar (disabled by default) - Show or hide the WordPress admin bar.