Mastering sections, rows, and modules and their settings will take you far in Divi, but there are more crucial features of the Visual Builder to learn. The Divi settings bar contains some of the most important parts of your webpages and will give you the foundation for the design that you create. You can expand the settings bar by clicking on the purple ( . . . ) button at the bottom of the screen.
The Settings Bar
Once you have expanded the settings bar, take a look at the three sections opened up on the bottom of the screen. The purple, central buttons contain some of the most important and commonly used settings and features for building the page. The gray buttons on the left alter the visual builder display. The buttons on the right allow you to save or publish the page, as well as use Divi support and search for features of the visual Builder.
The Purple Settings Bar
- The first button on the right of the purple settings bar contains the Page Settings. This section determines several of the most foundational aspects of your webpage.
- Use the content tab to give your page a title and description, assign a featured image that will display at the top of your page, assign any categories and tags, set the background color, and enable split testing.
- In the design tab, you can set a color palette for your page, adjust the gutter width, and set text colors.
- The advanced tab allows you to add code to the page or change some other more behind the scenes features.
- The next button to the right opens the Editing History, so you can go back if you've made a mistake.
- The Portability button, the furthest to the right, allows you to export a design file of your page layout or import a layout file to the page.
- The first button to the left, Clear Layout, will erase every section, row, and module on the page, letting you start from scratch.
- Use the Save to Library button to save the design of your page and use it on another.
- If you have saved any sections, rows, or modules from other pages to your Divi Builder library, use the Load from Library button to add them to your page.
The Gray Settings Bar
- The gray settings buttons to the left control the user interface of the Visual Builder.
- The vertical ellipses button opens a panel allowing you to change the builder view settings and customize the toolbar.
- The wireframe button activates the wireframe view, hiding all visual components and showing only the arrangement of sections, rows, and modules.
- Use the zoom button to zoom in or out of the page.
- The next three buttons activate desktop, tablet, and mobile display views, approximating the way your page will display on those devices.
- The final three buttons determine when the section, row, and module borders and settings boxes will display: when hovering over them, clicking on them, or all the time.
The Save and Help Buttons
- Use the save button at the bottom of the screen to save your changes. When creating a draft, use the publish button to make the page go live on your website.
- The help button opens Divi support features and keyboard shortcuts.
- The layers button displays how all of your page sections are arranged.
- The search button lets you easily locate Visual Builder settings or components of your page.