The Divi Builder is a state-of-the-art, no-code visual website building tool exclusively crafted for WordPress users. With the Divi Builder, individuals can effortlessly construct visually stunning websites from scratch, all without the need to delve into intricate lines of code—unless they opt to do so. This advanced tool harnesses the power of web development and introduces the Divi Visual Builder, enabling users to design bespoke websites with ease, while witnessing real-time changes during the creative process.

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

Title: 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

Title: Expand Modal

The first option is Expand Modal.

Title: Expanding the Modal

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

Snap to Left

Title: 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.

Read More: How to Boost Visibility for Travel Agencies 

Title: Snap to Left

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

Title: Other Settings of Modal

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.

Title: Other Settings of Modal

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

Read More: 7 Best Accordion Layouts for Divi to Enhance Your Website’s Visual Appeal in 2024

Save to Library

Title: 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

Title: 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.

Read More: 8 Best Divi Child Themes and Landing Pages for Social Media Agencies 

Disable

Title: Disable Elements

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

Lock

Title: Lock Element

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

Copy

Title: Copy Module

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

Copy Styles

Title: Copy Module 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

Title: View Modified Styles

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

Extend Styles

Title: 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

Title: 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

Title: 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.

Read More: How to Make Your Custom Footer in Divi: Step-by-Step Guide

Go To Layer

Title: 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.

Title: Go To Layer

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

Title: 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.

Title: Adding Rounded Corner

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

Title: Find & Replace

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.

Read More: 8 Best Divi Child Themes & Layouts for SEO Agencies in 2024

Builder Settings

Title: 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

Title: 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

Title: 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

Title: Builder Default Interaction Mode

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

Read More: Divi WordPress Theme Review

History State Interval

Title: 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

Title: 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.

Title: Settings Modal Default Position

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

Page Creation Flow

Title: 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

Title: 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

Title: Show Disabled Modules 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.

Read More: 23 WordPress Plugins for Divi Website in 2024

Group Settings Into Closed Toggles

Title: 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.

Title: Settings

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

Add Placeholder Content To New Modules

Title: Placeholder Content

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

Title: 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.

Title: 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.

Title: Page Settings Dot Navigation

With the Divi Builder enabled, you have the option to use Dot Navigation for this specific page. Dot navigation is off by default. When enabled, dot navigation typically appears as a series of dots, each representing a specific section or part of the page. Users can click on these dots to quickly scroll to the corresponding section, enhancing the overall user experience by providing a convenient and intuitive way to navigate through the content.

Title: Dot Navigation

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

Read More: 8 Best Divi WooCommerce Themes for E-commerce Sites

Page Template

Title: 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.