Getting Started with Divi: Hidden Divi Builder Settings

by Randy A. Brown | Jan 30, 2024 | Tutorials | 0 comments

Affiliate Disclosure: Some of the links in this post are affiliate links, which means we may earn a commission if you click through and make a purchase. For more details, please read our Affiliate Disclosure Policy.

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

Expand a modal in Divi by adjusting its dimensions through the Divi Builder or module settings for a customized and visually optimized user experience.

Title: Expand Modal

The first option is Expand Modal.

Expand the modal in Divi by adjusting its size or dimensions for a larger display.

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

Snap an element to the left in Divi for precise left-side alignment using positioning and alignment options.

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.

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

Explore various modal settings in Divi, including customization options for animation, styling, close button behavior, overlay settings, and more to tailor the modal's appearance and functionality.

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.

Explore other settings for modals in Divi to customize their appearance, behavior, and functionality further.

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.

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.

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

Effortlessly replicate module styles in Divi by copying and applying them elsewhere, ensuring consistency and efficiency in design across your website.

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

Broaden your design scope in Divi by extending styles, allowing for versatile and comprehensive customization across various elements on your website.

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

Effortlessly apply styles to the active preset in Divi, ensuring seamless integration and consistency in design across your website elements.

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

Efficiently modify the style of a preset in Divi, allowing for precise customization and seamless adjustments to maintain a cohesive design throughout your website.

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.

Go To Layer

Navigate directly to a specific layer within the Divi Builder for streamlined editing and management of complex layouts and designs.

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.

Effortlessly locate and replace specific content or design elements throughout your Divi website using the Find & Replace feature, streamlining the editing process and ensuring consistency.

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.

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

Customize the toolbar of builder settings in Divi to suit your workflow and preferences, ensuring efficient access to commonly used tools and options during website creation.

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

Set the default view mode for the Divi Builder to customize your preferred starting perspective, streamlining the website creation process according to your workflow and design preferences.

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

Define your preferred default interaction mode in Divi Builder for a tailored and efficient website editing experience.

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

Specify the default position of the settings modal in Divi for a customized interface layout, enhancing your workflow and ensuring an optimal editing experience.

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

Customize Divi's new page creation interface to choose between modal options for building from scratch, using a premade layout, or cloning an existing page.

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

Configure Divi to display disabled modules with 50% opacity, enhancing visibility and providing a visual cue for elements that are not active in your website design.

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.

Group Settings Into Closed Toggles

Organize settings in Divi by grouping them into closed toggles, ensuring a streamlined and visually tidy interface for efficient navigation and management during the design process.

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.

Facilitate module creation in Divi by automatically including placeholder content, expediting the design process and providing a visual reference for the appearance of various modules.

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.

Customize dot navigation settings in Divi Page Settings for seamless and visually intuitive navigation within a specific page.

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.

Dot Navigation is a visual navigation aid in web design, often represented by dots that correspond to different sections or elements on a webpage, enhancing user experience and ease of navigation.

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.

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.