Hey Divi Nation! Thanks for joining us for the next installment of our weekly Divi Design Initiative where each week, we give away brand new freebies for Divi. Today, we’re sharing a global presets style guide for Divi’s Digital Marketing Layout Pack. Divi’s global presets help you speed up your web design process in no time, and to help you speed it up even faster, we’ll be regularly providing global presets, that are unique to the layout pack, in one single layout. You can choose if you want to upload all global presets at once or select specific ones.
Download The Global Presets Style Guide For The Digital Marketing Layout Pack
To lay your hands on the free global presets style guide, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our newsletter by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.
How to Use The Global Presets Style Guide
Option A: Automatically Uploading All Global Presets at Once
This approach will automatically add all presets to your preset library at once.
Go to Divi Library
Go to your Divi Library in the backend of your WordPress website.
Upload Layout With Presets
There, click on the “Import & Export” button at the top.
Continue by clicking on the import tab and selecting the JSON file which you were able to download at the beginning of this post. To automatically import presets, tick off the “Import Presets” box too. This will automatically add each preset to each module.
Preset Names Inside Preset Library
Below, you have a list of all presets and their names that have been added to your modules. The order is the same as in the print screen below. You can always go back to the style guide for reference.
- DMLP – H1 – 1
- DMLP – H2 – 1
- DMLP – H3 – 1
- DMLP – H4 – 1
- DMLP – Body – 1
- DMLP – List – 1
- DMLP – Text – All – 1
- DMLP – Button 1
- DMLP – Button 2
- DMLP – Button 3
- DMLP – Button 4
- DMLP – Button 5
- DMLP – Blurb 1
- DMLP – Blurb 2
- DMLP – Blurb 3
- DMLP – Blurb 4
- DMLP – Blurb 5
- DMLP – Blurb 6
- DMLP – Blurb 7
- DMLP – Email Optin 1
- DMLP – Email Optin 2
- DMLP – Email Optin 3
- DMLP – Person 1
- DMLP – Toggle 1
- DMLP – Toggle 2
- DMLP – Social Media Follow 1
- DMLP – Testimonial 1
- DMLP – Contact Form 1
Access Preset in New Modules You Add
You can access each one of the uploaded presets by opening or adding a new module, clicking on the preset item at the top and selecting a preset of your choice.
Option B: Selectively Turning Modules in Style Guide into Global Presets
With this approach, you have a bigger say in what appears in your global presets library and what doesn’t. The elements will be provided to you in one place and you can visually pick which one you want to manually turn into a global preset with a name of your choice.
Go to Divi Library
Navigate to your Divi Library in the backend of your WordPress website.
Upload Layout Without Presets
Then, click on the “Import & Export” button.
Go to the import tab and select the JSON file you were able to download at the beginning of this post. If you want to be able to pick which modules you turn into global presets, it’s important to leave the “Import Presets” box unchecked.
Open Layout (Or Create New Page + Upload Layout)
Now, open the layout you’ve just uploaded to your Divi Library by clicking on “Edit”. This will redirect you to the layout editor. Alternatively, you can also choose to create a new page and upload your layout there.
Switch Over to Visual Builder
If you choose the layout editor, switch over to Visual Builder.
Pick a Module You Want to Turn into a Global Preset & Open Module Settings
Now, go through all the elements and decide which ones you want to turn into global presets.
Turn Module into Global Preset in Settings
Say, for instance, you want to turn one of the Button Modules into a global preset. Open the Button Module settings and click on the preset option at the top.
Turn the module settings into a new preset from custom styles.
Name the new preset however you want.
Repeat Steps for Each Module You Want to Include in Presets
Repeat these steps for each preset you want to create.
Exception: Nested Modules (Social Media Follow Module)
For nested modules, such as the Social Media Follow Module, you’ll need to open the item inside the module and save that element as a new preset too.
Create Custom Color Palette with Color Codes Inside Your Divi Theme Builder
Go to Divi Theme Options
The hex codes in the style guide can be used to create a custom color palette which you’ll be able to quickly access while building your pages. To add the color palette, go to your Divi Theme Options.
Customize Color Palette Using Hex Codes in Style Guide
Add the HEX color codes of your choice, which you can find in the style guide, to the default color palette.
Tip: Keep Style Guide in Separate Tab to Copy/Paste Specific Styles (Gradients/Box Shadow/Border/…)
Last but not least, it’s a great idea to always keep the style guide in a separate tab. Using Divi’s built-in and cross-page copy-paste option will help you quickly transfer styles, like gradient backgrounds, from one element to another!
New Global Preset Style Guides Every Week!
We hope you enjoy this week’s global preset style guide. We look forward to hearing your opinions in the comment section below. Make sure you check back next week for more freebies!
I tried to replicate the style guide for an example on a project. When applying the email optin presets the option ‘use background’ is set to ‘no’. After enabling it, on the front end the background will still not show up. When you go into the visual builder again the background is again set to ‘no’.
This is great! Do you recommend using presets for Headings?
With DIVI 4.5 out why not an update to all the layout packs so that we have global preset modules?
Just a thought.
A handy and smart use for Presets! Thank you!
You’re welcome, Ramon! Happy to hear that you’re enjoying this new type of freebie 🙂
Nice! So time-saving! Thank you.
Happy to hear you’re enjoying the first global presets style guide, Karen! 🙂