Divi Presets were introduced in version 4.5 and allow you to bundle a collection of Divi settings into a reusable preset style for sections, rows, columns, and modules.
Divi Presets are a replacement for Divi Global Defaults.
A Preset can then be assigned to multiple Divi elements so that you can update these elements in a single place.
You can also make a Preset into a Default Preset that will then apply to every instance of the element on your website without having to manually assign it.
What is a Divi Preset?
Each Divi section, row, column, and module include a range of settings to customize its appearance.
The Divi Presets system allows you to save those groups of custom settings as a Preset to reuse anywhere on your website.
When you update a Preset it will update all associated elements that have been assigned the Preset on your site.
You can override any of the presets within the settings of each element individually to further customize it.
What is a Default Divi Preset?
The Divi Presets system allows you to set any of your element Presets as a Default Preset. This means that any instance of that Divi element on your site will use the settings in your Default Preset automatically.
When you update a Default Preset it will update all associated elements on your site.
You can override any of the Default Preset within the settings of each element individually to further customize it.
For example, if you create a Default Preset to a button module, every button module on your website will display with those settings unless they are overridden within an individual Button module settings. Any new Button modules you add will automatically display the Default Preset styles.
Why should I use Preset?
Presets save time and allow you to work more efficiently by creating reusable and editable settings for any elements of your Divi website.
You can use Presets to add a new element to your site and apply a Preset design that already has your style and settings included. By using a Default Preset you don’t even need to assign a Preset as it will automatically be used whenever you add an element.
The other big advantage is that you can edit a Preset in a single place and have those changes apply to every instance that is using the Preset. This makes editing multiple-element styles fast and ensures consistency in design across your website.
How do I use Presets?
Your Divi Presets are managed in A new Presets dropdown menu at the top of all sections, row, column, and module settings panels. This dropdown menu will allow you to create, edit, assign and delete Presets.
For Example. to create a new Preset for a Divi Button module you will need to;
- Add a Button module using the Visual Builder and open its settings window
- Click on the Preset dropdown icon and click the “Add New Preset” button and give it a name Button 1
- Customize the Preset using the Button module design settings
- Save the Preset
- The Button 1 Preset is now assigned to the Button module you just created it on
- The Button 1 Preset is also available in the Preset dropdown menu of all other Button modules so you can select it whenever you add a Button module to a page
- If you edit the Button 1 Preset those edits will be reflected on any Button module it has been assigned to
Prefer to watch and learn?
Divi Presets can be tricky to get your head around so for those who prefer to learn by watching rather than reading, this video from Elegant Themes is a great resource.
The video will give you a clear overview of the Preset system along with a detailed walkthrough of how to use each element of the Presets system.
New Divi Presets Vs old Global Defaults
Divi Presets replace the Global Default system within Divi and allow you to now create multiple reusable styles per Divi element rather than just one.
The old Global Defaults system previously allowed you to create one global default for any element in Divi.
The new Global Presets system allows you to create multiple defaults called “presets” that can be applied to any element in Divi.
For example, previously you could create one Global Default for a button and apply it to any buttons on your website.
Now, you can create any number of Global Presets and apply the chosen style to buttons on your website. You are no longer limited to a single global style.
Why does my Default Preset not change my existing styles?
A Default Preset will set the default settings for all instances of a particular element.
When you add a new element the Default Presets will be added.
If you have an element that already has custom design settings added, they take precedent over the Default Preset styles.
If you want to apply only the global preset styles for an element, you will need to clear all styles assigned to an element first. To do this, right-click on the module and choose “Reset Styles.”
For example, You have a button (1) module manually set with a red border.
You add a new button (2) and set a 10px blue border and make this a Default Preset for Button modules.
Button 1 will now display with a 10px border, but as it already has a red border set manually, it will not display the blue color from the global Default Preset.
I broke my styling with Presets
The new Divi Preset system is a powerful tool but can be a little hard to understand at first. If you make a mistake and apply your new Preset to your entire site when you didn’t want to, you can access your changes and rollback in the Editing History settings.
The Global History States tab has been added to the Editing History window and will show you all recent changes that have been made and saved specifically within the Presets system.
To access your Global History States you will need to open your Divi settings bar by clicking the x icon at the bottom of your visual builder and then clicking on the clock icon. Select the Global History States tab and then use the rollback icon to revert your settings.
Final thoughts on Presets
The new Presets system in Divi is a great new tool to save time and ensure consistency across your website. The system does take a little getting used to but your time spent learning how they work will be repaid with a faster workflow. Presets will save you time in the long run and they are definitely something you should play around with so you can see the benefits they can offer.
I would expect there may well be a 3rd party market for sharing and selling Divi presets to offer a quick-start design guide for new builds.
You can also take advantage of the Divi Global Color Pallet to create a color scheme that can be applied to your website sitewide in a few clicks.
Have you used the Prestes system yet? what are your thoughts?
Drop a comment below and let us know what you think.