So far in this series, we’ve covered the most prominent settings in the Divi Builder. There are lots of settings that help speed up your design process and improve your website. In this article, we’ll look at those “hidden” settings to help you get the most out of the Divi Builder.

Divi Preset

At the top of the Settings window for sections, rows, columns, and modules is an option called Preset. Presets are settings that you can reuse. Clicking this allows you to select a preset, create a preset from your current styles, and add a new preset. For detailed information, see our article Divi Presets Overview.

Modal Settings

The modal is the box that contains the settings that open when you click the gear icon on sections, rows, columns, and modules. Across the top on the right of the modal are three icons.

Expand Modal

The first option is Expand Modal.

Selecting it makes the modal wider. The icon now says Contract Modal, so you can make it smaller.

Snap to Left

The second icon is Snap to Left. Normally, the modal is floating and can be moved anywhere with drag-and-drop. The problem is you can’t see the content behind the modal.

This places the modal to the left side of the screen and pushes the content over so it’s all visible. An arrow is added to the right side of the modal. Grabbing this arrow lets you change the width of the modal. The layout adjusts to match.

Other Settings

The three dots on the far right of the modal is called Other Settings. These settings allow you to save to the library, perform a split test, disable, lock, copy the element, copy the styles, reset the styles, view styles, extend styles, apply the styles to the active preset, edit the preset style, and go to the layer.

You’ll see similar options by right-clicking on the element. We’ll look at a few of the settings in more detail.

Save to Library

Select Save to Library to keep a copy of your element. This allows you to reuse it as many times as you want. If you select Save as Global, any changes you make to the global element will be reflected on every page that uses that global element. This is great for creating banners, messages, ads, etc. since you can change the information once and it’s automatically changed across your website.

Split Test

Selecting Split Test lets you create a second version of an element. Half of your audience will see the first version and the other half will see the second version. Divi keeps track of the statistics so you can choose which design had the best results. This is a great way to improve your website based on real-world testing. We’ll cover split testing in greater detail in a future article.

Disable

Disable allows you to easily choose which screen types you want to disable the element for.

Lock

Lock keeps anyone from seeing the settings and making changes to the element.

Copy

This allows you to paste a duplicate of the element into any Divi layout on your website.

Copy Styles

Copying the styles lets you reflect those styles to similar elements within the layout. This is great if you’ve created a design for a module and you want other modules in your layout to have those settings. Instead of opening each of the modules and manually making the adjustment, simply paste the styles into the specific modules you want.

View Modified Styles

This shows you the settings for that element that have been changed.

Extend Styles

Extend Styles lets you reflect your changes to every element of the same type without having to paste them individually. You can choose to extend the styles to the entire page or just the current section, row, or column.

Apply Styles to Active Preset

This allows you to update the current preset using the styles of the element you’ve selected.

Edit Preset Style

This lets you edit the current present style. The modal will spin around to show you the style’s settings. An arrow icon is added to the right of the modal. Clicking this takes you back to the regular settings.

Go To Layer

Go To Layer opens another modal that shows you the structure of your page in a layer view. It highlights the current element, so you can see it within the hierarchy of the layout.

Within the Layers view, you can perform the same functions as the wireframe and visual views. Layers makes it easier to work with large layouts, making it an excellent tool for saving time. For more information about Layers, see our article A Look at the New Divi Layers View.

Revealed Settings

More options are revealed when you hover over the options in the modals. The options vary based on the type of elements they are, but most include a set of icons that open more options. They include from left to right:

Question mark – shows a short description of what this setting does.

Device – opens tabs where you can view the layout for each device.

Arrow – shows the hover state of the element.

Circled arrow – lets you undo the setting and resets it to default.

Three dots – opens a small menu where you can copy, reset, and find and replace settings.

The menu will vary depending on the setting. This one for borders adds corners and styles.

The Find & Replace option lets you specify where to search for the element or settings and allows you to replace just the specific element or all elements.

Builder Settings

Builder Settings are found under the three dots. For the Classic Builder, this is placed on the right at the top of the builder. For the Visual Builder, this is found on the far left when the settings are opened (open the settings by clicking the large purple icon).

Customize Builder Settings Toolbar

Choose which options show on the toolbar by default. Options include wireframe, zoom, desktop, tablet, phone, hover mode, click mode, and grid mode. The last three choose how the icons for the settings appear. Hover shows the options on hover, click requires you to click on the element first, and grid shows all of them for every element by default. I’ve enabled all three icons and selected grid mode in the example above.

Builder Default View Mode

Choose which view mode shows as the default between wireframe, desktop, tablet, and phone. This example shows the tablet view.

Builder Default Interaction Mode

Choose which interaction mode is the default between hover, click, and grid mode. This example shows the grid mode.

History State Interval

This determines how often Divi saves a version of your page. It’s determined by the number of actions. Choose between every, 10, 20, 30, or 40 actions.

Settings Modal Default Position

This allows you to set the default position of the settings modal. Choose from the last used position, floating minimal size, fullscreen, fixed to the left, fixed to the right, or fixed to the bottom.

In this example, I’ve set the modal to appear at the bottom of the page.

Page Creation Flow

This determines what Divi shows you when you create a new page. It can provide a modal where you can select to choose the type of page you want to create (build from the library, from scratch, or clone a page), or automatically build from scratch, use a premade layout, or clone an existing page.

Builder Interface Animations

Enable or disable the animations that appear when you click on something in the Divi Builder.

Show Disabled Modules at 50% Opacity

This allows you to still see all the elements even if they’re disabled, but they appear less opaque than normal. In this example, I’ve disabled the two images, so they show at 50% opacity.

Group Settings Into Closed Toggles

This one keeps the toggles closed when you open the settings modal. You’ll have to open the settings you want. This makes the modal easier to use.

If this setting is disabled, all the settings are opened by default, as seen in this example.

Add Placeholder Content To New Modules

This adds placeholder content so you can see how the element would look within your layout. This example shows a blurb, which includes a placeholder image and body text.

Divi Menu

The big purple icon can be moved to any side you want by dragging and dropping it to the location on the screen. This setting lets you determine which is its default position. In this example, I’ve dragged the menu to the left sidebar.

Divi Page Settings

Here’s a look at Divi’s page settings.

Divi Page Settings

Divi includes different page settings depending on if you’re using the Divi Builder. Without the Divi Builder, you’ll have the option to place the WordPress sidebar on the right, left, or not include the sidebar.

With the Divi Builder enabled, you have the option to use Dot Navigation for this specific page. Dot navigation is off by default.

When it’s enabled, you’ll see dots on the right of the screen that takes the user to each section when clicked.

Page Template

Page Attributes includes standard WordPress settings. One of those settings includes templates that are added by the theme. Divi lets you choose between two templates. The default template includes the header and footer. The blank template is completely blank, so you can create navigation with the Divi Builder.

Ending Thoughts

That’s our look at the Divi Builder and page settings that are not as prominent as most settings. These settings give you control over how the builder works and provides lots of shortcuts to make working with Divi as easy as possible. The split test is especially a good tool to help make your website the best it can be.

For more information about Divi settings, see our previous article: Getting Started with Divi: Advanced Settings.

We want to hear from you. Have you tried any of these Divi settings? Let us know about your experience in the comments.