Design Variable Manager

Divi Design Variables allow you to manage colors, fonts, and values globally. Instead of editing individual modules, you update a variable once in the Variable Manager to sync changes across your entire site.

• Global Control: One edit updates every instance site-wide.

• Versatile: Apply variables to almost any module setting.

• Efficiency: Streamlines your workflow and ensures design consistency.

New to variables? Start with the official Divi 5 guide before diving into this tutorial.

Look for this icon to set and apply Design Variables

Quick Video Introduction

Accessing the Variable Manager

Let’s go through the types of Design Variables you can add to your website.

Setting up colours

Managing and Accessing Your Brand Colours

These reusable colors, like hex codes and gradients, keep your branding consistent. They can assign primary or secondary colors, heading and body text colors, and more.

You can also:

• Create transparent variants (like Primary Color 80%, Primary Color 60%, etc.)
• Make lighter and darker shades of your main colors
• Change your colors at any time and watch it update across your site in the modules that use those colors

Use Global Colours in your website

Replacing any colours on this variable will change this colour throughout the whole site. You will be able to override this on each module if you need to.

1. Click on the colour tab and replace the colours with your branding colours. You can also add more colours name them to make them easier to recognise
2. Save Variables
3. Apply Changes
4. Close the Design Variable tab, or move to another tab such as Font.

Setting up fonts

Replacing the fonts on this variable will change this font throughout the whole site. You will be able to override this on each module if you need to.

1. Click on the font tab and replace the Heading and Body text with your branding fonts. You can also add more fonts and name them to make them easier to recognise
2. Save Variables
3. Apply Changes
4. Close the Design Variable tab, or move to another tab 

Creating Font Sizes

Once you are comfortable with your font sizes, you can add them as Design Variables. Give each a discernible name and paste the value on the right.

Fluid Typogrphy With Clamp()

Clamp() lets you set a minimum value, a preferred value, and a maximum value. Follow this In post,where Elegant Themes go into depth about clamp() and provide an easy way to figure out those values.

* this tutorial is extracted from https://www.elegantthemes.com/blog/divi-resources/everything-you-need-to-know-design-variables-in-divi-5

https://www.elegantthemes.com/blog/divi-resources/managing-your-brand-with-divi-design-variables