Print

Setting up a Global Preset Style Guide

Table of Contents

A Global Preset Style Guide is an overview of the most important elements that you’ll be styling for use inside your Divi website.  You will be able to control your entire website’s scheme from a single location, including global fonts, colours and all the modules we use for the template design.

You can override these modules individually if you have to.

Open your Global Preset Style Guide

Once your layouts have been uploaded (see Importing layout packs & add them to the new pages), locate the Global Preset Styleguide layout inside Divi Library and click Edit.

 

 Switch Over to Visual Builder 

If you choose the layout editor, switch over to Visual Builder.

Now you will see all the presets we use for this layout packs.

Set up Color Palette on Global Colour Setting.

Once inside the style guide framework, you can set up the colour palette of your choice and replace the website colours with your branding colours.

To visually display the colours inside our style guide, we’re using the background settings of a Text Module. Open that Text Module, go to its background settings and click on Global.

 

 

 

Change the global colour into your branding colours.

 

By changing the global colour will change the colours  throughout the whole site. You will be able to override this on each module if you need to

 

Now you can move to the Text setting and set the Headings and Body text with your fonts, sizes and colours.

To change this, click on the text module that shows all the headings, and go to the Design tab to make all the changes (don’t forget to also set the tablet and mobile version).

Once you finish, turn the module into Global Preset in Settings 

Click on the preset option at the top.

 

The Preset Settings Dropdown Menu

Global Presets exist within the settings modal of any Divi element. To access the global presets for a specific Divi element, open the settings and click the preset dropdown menu at the top of the modal under the heading.

You can choose to make your primary module the default one too. Once you’ve created the global preset, make sure that that specific preset is selected for the module, this will help you import and export global presets using the style guide layout.

divi global presets

Within the dropdown, you will have the option to create a new preset or update the current default preset

divi global presets

You can update the existing preset (Default) by choosing the. “Create New Preset from Current style” and turn on “Assign Preset to Default” 

Another way to do it is to right click the three dots on the right, and choose “Apply Styles to Active Preset”

 

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.

 

digital marketing global presets style guide

 

digital marketing global presets style guide

 

Learn more about Divi Presets here.

Pin It on Pinterest