Divi's predefined settings greatly speed up your design process by allowing you to take the design of any element and apply it to other modules.

Divi is highly customizable, allowing you to make Divi modules and other elements look as you like.

Example: You can take any featured text module and add a background color, adjust the size, font and color of the title, add animation or assign an image or icon.

Divi's predefined settings improve the design experience by allowing you to take the layout settings of that featured text and apply them to any other featured text on your site by saving those settings as a predefined setting.

When you use Divi predefined settings, you can create a global layout setting for the featured text module or any other Divi module and save those settings for future use throughout your website.

How Divi Presets Work: Brief Summary

Example: if you are building a new site and want to use a Divi design package, you can create predefined adjustments to those elements for use on other pages you think.

Divi predefined settings can be applied to any item, including:

• Modules

• Sections

• Rows

• Columns

For example, if you create a featured section with a background color and an applied pattern, you can save that section as a predefined setting for use in other sections of your website.

Note:The predefined settings are specific to each item type. You cannot use a predefined adjustment of one module type in a different one.

Divi Predefined Settings Interface

• Predefined settings drop-down menu- Displays the active predefined setting of your module. Click to manage your predefined settings library.

• Default predefined adjustment- It is the default setting. Select it to turn on the default appearance of the module.

• Predefined adjustment by default assigned- The star indicates what your default default setting is. All basic modules will use this setting as the default appearance. Click this star within any setting to make it default.

• Selected predefined adjustment- The green mark indicates what adjustment is assigned to the module you are editing. The base styles of the module are controlled by the selected setting.

• Edit a predefined setting- Click the pencil icon to edit the layout of a predefined setting. When you edit it, all modules that use that setting will show the change.

• Manage predefined setting settings- Rename the setting to better organize your library.

• Update fit with current styles- Update the setting to match the current layout of the module you are editing.

• Duplicate predefined adjustment- You can double any of your predefined settings. It is a great way to create variations without starting from scratch.

• Delete predefined setting- Delete an adjustment takes it from your library. All modules using that setting will return to the default setting.

• Create new fit from current styles- Create a new adjustment that matches the layout of the module you're editing. If you want to reuse pre-designed items on your site, you can quickly convert them into predefined settings.

• Add new predefined adjustment- Add a new empty adjustment to customize it with the module design options.

When to create Divi predefined settings

This way, you can set everything from the outset, saving you a lot of time. As you add pages, your predefined settings can be applied to new modules.

You don't have to worry about writing hexadecimal codes, margin and filling configurations, font sizes and families, or other design elements.

Apply a predefined setting and go ahead with the next item you want to build.

Add a new predefined setting

• Add an item

• Click the Add new predefined setting button

• Design your item and save it by clicking on the green box

• Alternatively, design your module and then save the predefined setting:

  • Click on the predefined settings at the top of the item settings

  • Click the drop-down arrow under predefined settings

  • Select Create new fit from current styles

Update default styles with predefined settings

Example: If you create an setting for a button, you can add or change existing buttons on your page and then apply the saved setting.

All your design styles will be updated instantly with the styles of the saved adjustment.

Name your predefined setting

You will be prompted to name your predefined setting once you click on the buttonCreate new fit from current styles. Alternatively, you can click the buttonAdd new adjustmentto save and design your fit.

It is important to put names on your adjustments you recognize. Otherwise, you will find it hard to figure out what adjustment to use when creating new items.

• For titles, use names such asmain titleorsecondary title.

• For body text, usebody textor something similar.

• If you use multiple styles for the same item, everyone must have a commensurate name to understand the settings created for the same module style.

---

Design a predefined fit

When you want to design an adjustment, you will need to create a new one and then design your item.

• Open the module configuration window.

• Click the drop-down arrow next to the predefined settings.
  

• Click the buttonAdd new predefined adjustment.
  

• Name your adjustment.

• Click the green button to save it.
  

• Design the item as you like.

• Click the green button to save the item. A modal window will appear asking if you want to save.

• ClickYes.

• Save your module by clicking the green button.
  

---

Apply predefined settings to new modules

Divi makes it easy to apply predefined adjustments to new modules, especially useful when creating new pages to which you want to apply the same styles.

• Click the predefined settings drop-down arrow.

• Select the setting you want to apply.

• Remember, the settings are specific to each module type. Make sure you apply the adjustment corresponding to the module type. For example, text modules should use text settings, featured modules should use adjustments for highlights, etc.

• Save your module by clicking the green button.
  

Create a new predefined adjustment from a current style

You can create a new adjustment from an already stylized element.

Example: using the Divi pricing module. A stylized element can be saved as a predefined setting.

• Click the predefined settings drop-down menu.

• Select the buttonCreate new fit from current styles.

• Name your new adjustment.

• Save it.

To apply the styles to another pricing module:

• Edit the new pricing module.

• Select the predefined settings drop-down menu.

• Click the name of the setting you want to apply.

• Save the module by clicking the green button.

Your new pricing module will be instantly stylized with the styles saved in the predefined setting.

---

Edit predefined settings styles

Editing existing styles is very easy.

• Click on any item that has a predefined setting applied.

• Click the drop-down arrow next to the settings.

• Hover your cursor over the applied setting.

• Click the pencil icon.

• Make the design changes you want.

• Click the green button to save.

You will see that any module with that adjustment applied will automatically update its design.

The background of the module configuration window will change to gray to indicate that you are editing a predefined setting.

Note:If you edit an adjustment, those changes will be reflected where that setting is used.

---

Overwrite predefined adjustment styles

The design styles of a predefined fit can be overwritten by applying new styles from the module's design tab.

Example:
If a text module has assigned a setting that defines for the Level 1 header.

• Text size: 80px

• Text color: orange

• Spacing between letters: 0.05em

The full background of the modal window will be slate gray, indicating that a predefined setting is being edited.

We can overwrite those styles by applying the same adjustments directly to the module from the design tab.

When we edit the module, the background of the modal window will be purple, indicating that the module is being edited.

---

Import and export designs with and without your predefined settings

You can import and export designs both with and without the predefined settings.

Both options are useful for incorporating your designs into other Divi sites. When you export a design, your predefined settings are automatically saved and included in the export.

---

Export a page layout with predefined settings

When exporting a Divi design, the predefined settings are saved along with the design.

• Activate the visual builder.

• Click the purple three dot icon at the bottom middle of your screen.

• Click the import/export icon.
  

• Name your design, then click the buttonExport Divi Builder design.
  

Your design will be saved as a .json file that can be imported on another page of your site and on another website with Divi.

---

Import a page layout with Divi presets

When importing a Divi page layout, you can choose whether or not you want to include presets. There are several ways to do this.

The first is from the Divi Page Builder's admin panel.

1. Click the Import/Export icon at the top right of the Divi Page Builder settings.
2. Click on the tabImport.
3. Select the .json file containing the page layout to import.
4. Choose whether you want to include the presets by ticking the boxImport presets.
   
5. Click the buttonImport Divi Builder design.

The page will cool down and show that the new design has been imported.

---

Another way to import your design is by using the Visual Builder.

1. You can drag your .json file to a new page, or click the import/export icon in the bottom bar of the Visual Builder.
   
2. Choose whether you want to include the presets by ticking the boxImport presets.
3. Click the buttonImport Divi Builder design.
   

When editing a module or item where an applied preset is applied, you will see all available presets, including those that were imported

Tips and best practices for using Divi presets

When working with presets, there are a few things you should consider. Implementing these tips will help you build a beautiful Divi site faster and improve your knowledge of Divi presets.

---

Create a styles guide for Divi presets

Divi presets allow you to work faster and more efficient when building your website. Creating a preset styles guide is a great way to start your design. Check out our free guide to presets to get started on a good footstep.

---

Use presets for sections and rows

Using presets for sections and rows helps create a consistent design on your site. This is a good alternative to limited theme customizer options.

You can use your new custom presets for sections and rows to speed up and overwrite the design.

---

Continue learning

Now that you understand how Divi presets work, check out some of our free publications and resources to stimulate your creativity:

• Free global presets

• How to create stylized content boxes in Divi for advice, information, warnings and more (FREE download)

• Optimization of your Divi site logo image with global presets

• How to use global presets with Divi design blocks to speed up blog post design