Skip to main content

Have questions? I can help!

< All Topics
Print
Table of Contents

Accessing the Variable Manager

You can open the Variable Manager in two ways:

From the left toolbar - Click the Design Variable icon to open the manager with all drawers closed.

Divi 5 - Global Variable Manager

Or, from any supported field - Open the dynamic content menu and click Manage Variables. This opens the manager with the relevant variable type drawer expanded.

Divi 5 - Manage Global Variable

Setting up colours

Managing and Accessing Your Brand Colours

Colours are mange under "Colors".
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

color design variables in Divi 5

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

Under "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

Font sizes are set under "Numbers"

When entering your font size values, you have a few options depending on how you want your text to behave:

  • Pixels (px): This is a fixed, absolute unit (e.g., 16px). While it is easy to understand and gives you exact control, it doesn't scale if a user changes their browser's default text size settings, making it less ideal for modern web accessibility.

  • Rems (rem): This is a relative unit based on the browser's root font size (usually 16px by default). For example, 1rem equals 16px, and 2rem equals 32px. Using rem ensures your typography scales beautifully if a user adjusts their device's text settings for readability.

  • Clamp (clamp()): This is a modern CSS formula that allows for fluid typography. It takes three values: a minimum size, a preferred size, and a maximum size—for example, clamp(1.5rem, 4vw, 3rem). This tells the font to automatically shrink on mobile screens and grow on desktop screens without needing complex media queries.

 

Add Font Sizes to Variable Manager - Step 1

 

Fluid Typography 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.

Learn how Divi can generate font fluid sizing for you. 

 

* 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