Divi Secret Features Tutorial – Using Divi Global Presets to Streamline Your Divi Web Design Process

Divi comes with a standard set of defaults for its modules, rows, and sections. However, as you delve into the design and customization of your website, the necessity to tweak these defaults often arises, particularly when adhering to a uniform design language across your site. While Divi’s extend feature is a handy tool, it has its limitations: its scope is confined to a single page, and any subsequent changes require a rerun through the extend steps.

This is where Divi Presets come into play, offering a more streamlined approach to managing your styling changes. You have the option to create either a Global Preset or a new preset, which can be assigned wherever needed. The advantages of Divi Presets are multifold:

  • Global Presets: These are your go-to for site-wide consistency. Any style adjustments made in a Global Preset are reflected across your entire website built with Divi Builder.
  • New Presets: Crafted for special styling needs, new presets can be created and used anywhere on your site.
  • Easy Edits: No need to navigate away; simply open the settings of any module, row, or section using the preset you wish to amend, and your changes will be applied universally to all Divi elements using that preset.
  • New Defaults: Presets act as your new starting point for customization. Further tweaks made while using a preset will not affect other elements using the same preset.
  • Style Application: Apply additional styles to the active preset effortlessly without having to reopen the preset editor.

Divi comes with a standard set of defaults for its modules, rows, and sections. However, as you delve into the design and customization of your website, the necessity to tweak these defaults often arises, particularly when adhering to a uniform design language across your site. While Divi’s extend feature is a handy tool, it has its limitations: its scope is confined to a single page, and any subsequent changes require a rerun through the extend steps.

This is where Divi Presets come into play, offering a more streamlined approach to managing your styling changes. You have the option to create either a Global Preset or a new preset, which can be assigned wherever needed. The advantages of Divi Presets are multifold:

  • Global Presets: These are your go-to for site-wide consistency. Any style adjustments made in a Global Preset are reflected across your entire website built with Divi Builder.
  • New Presets: Crafted for special styling needs, new presets can be created and used anywhere on your site.
  • Easy Edits: No need to navigate away; simply open the settings of any module, row, or section using the preset you wish to amend, and your changes will be applied universally to all Divi elements using that preset.
  • New Defaults: Presets act as your new starting point for customization. Further tweaks made while using a preset will not affect other elements using the same preset.
  • Style Application: Apply additional styles to the active preset effortlessly without having to reopen the preset editor.

Editing the Default Presets

Tweak the default styles of Divi for a module, row, or section by following these steps:

  1. Open the settings for the Module, Row, or Section and click on the three vertical dots located at the top right corner of the settings window.
  2. Click Edit Preset Style.
    Edit Divi Preset Style
  3. Navigate through the Content, Design, and Advanced tabs to make your desired changes.
    Customize Divi Preset
  4. Hit the Save icon and confirm your changes by clicking Yes.
    Save Divi preset changes

Voila! You’ve successfully updated the default (global) preset. While the modifications will apply to all existing Divi elements of the type you edited, any prior customizations to Divi’s default options remain unaffected. Your changes have essentially set a new default.

Creating a New Preset

Construct a new preset for use when creating similar Divi elements (module, row, or section):

  1. While editing a Divi element, click on the Preset dropdown.
  2. In the ensuing menu, click on ADD NEW PRESET.
  3. Name your preset and save.
    Create a new Divi preset

Once your new preset is created, the steps to edit it are identical to editing the default preset.

Selecting an Existing Preset

Re-utilizing existing presets to maintain a uniform style across your Divi Website is a great way to speed up the development of Divi websites.

  • While editing a module, click on the Preset dropdown to select and apply an existing preset.
    Choosing a Divi preset

Applying Customized Styles to the Active Preset

Got some style customizations already in place? Here’s how to apply them to the active preset:

  1. Click on the three vertical dots at the top right corner of the settings window and select Apply Styles To Active Preset.
  2. Confirm your choice in the subsequent window.
    Apply Divi module styles to active Divi preset

Alternatively, right-click on any option while editing the Divi element and select Apply Styles To Active Preset.

Right-click to Apply Divi module Style To Active Divi Preset

How this boosts your Divi Skills

Embracing Divi presets is a savvy move for budding web designers. It empowers you to establish default styling, design once, and amend anytime. Creating new presets is also a boon for managing special styles that deviate from your defaults but need to be replicated across your site. Before this feature was introduced, defining defaults entailed writing lengthy CSS scripts. Thanks to presets, that’s no longer a necessity, saving you precious time and effort. In a nutshell, it’s a robust tool for every Divi web designer aiming to refine their craft and accelerate their workflow.

CONTRIBUTOR: Pavak P.

Other Installments

 

Check these out
Divi Secret Features Tutorial – Crafting Text Cutout Effects on Backgrounds in Divi
Divi Secret Features Tutorial – Animate Web Pages Using Divi Scroll Effects
Divi Secret Features Tutorial – Using Divi Global Presets to Streamline Your Divi Web Design Process
Divi Secret Features Tutorial – Finding Active Content and Styles in the Divi Builder
Announcing the Divi Secret Features Series – Divi tutorials on some lesser known Divi features

0 Comments

Submit a Comment

Explore more from Divi Engine