Color Manager

In this article, we're going to discuss the Color Manager feature and when and how to use the Color Manager in the Pro and X themes.

  1. What is the Color Manager
  2. When to Use the Color Manager
  3. How to Access the Color Manager
  4. How to Create the Global Colors
  5. How to Use Global Colors
  6. Summary

What is the Color Manager

The Color Manager is a feature in the X and Pro themes which allows you to set a color palette for use on your site. Meaning you can switch one of the colors and it'll instantly update sitewide, saving you time on going back and forth editing individual color values.

When to Use the Color Manager

The Color Manager serves as an abstraction layer for easily assigning and updating colors throughout the builders. For example, say you have some pages you've designed and they're using a select grouping of specific colors. Maybe you have dozens or even hundreds of instances of these colors across your site from borders to backgrounds to text to box shadows. Now let's say that down the road you decide that one of those colors used throughout those hundreds of instances needs to be updated. Without the Color Manager, you would need to revisit every element and update that color...one by one...hundreds of times over. With the Color Manager, you can instead label a color however you see fit (e.g. "Primary Brand Color") and assign that labeled color. If you ever have to go back and update that color, you can simply update it once in the Color Manager and it will change all assignments of that color throughout your website.

How to Access the Color Manager

  1. Go to X / Pro in the WordPress admin and launch the app interface by selecting any Builder (Content, Headers, Footers, et cetera). Alternately, launch a Builder using the WordPress admin bar on the frontend of your site.
  2. Click the navigation icon () in the toolbar.
  3. Select Colors in the main Navigation dropdown.

How to Create the Global Colors

Once you have opened the Color Manager, click the + button in the upper-right corner to add your first color:

Color Manager

Clicking on the + button will add a new color to your color palette. By default, these colors are named with an incrementing label (e.g. Color 1, Color 2, et cetera) and will be given a random value:

Color Manager

Clicking on the color will reveal its color picker, where you can update the color's name using the input at the top, duplicate the color, delete the color, and alter the color value to your desired output:

Color Manager

For instance, let's say that we want this color to be used as a sitewide accent color. You could update the color to your desired value and adjust the label accordingly:

Color Manager

Once adjusted, your color palette item will reflect the new color in the manager. Hovering over this item will reveal its label so you can remember what it is:

Color Manager

How to Use Global Colors

Now that you have created some colors in the Color Manager, they will be available throughout different settings and builders of the theme. You can use the added colors whenever there is an color picker in the builders or theme options. The ordering of your available colors will match the order you have set in the Color Manager. Additionally, hovering over your palette items here will also reveal a tooltip showing the label of that color to help you remember what it is intended for:

Color Manager

The beauty of the Color Manager is that as long as you use these global assignments wherever appropriate, if you ever want to go back and make adjustments to your site's colors (such as change a primary brand color, accent, text, et cetera), you can update it in one spot in the Color Manager and it will be automatically reflected across your entire website! This is an incredibly powerful tool that should certainly be taken advantage of for large builds, and even smaller sites alike.

Imagine if you had a long landing page full of Elements. It's easy to imagine that you might be calling up the same colors over and over again across your design...probably hundreds of times. Using the Color Manager ensures that you don't have to remember those colors all the time, you can just select them from your palette, and if you ever need to make a change you can do so easily and save yourself tons of time!

Summary

We've talked about the Color Manager feature in the X and Pro themes and why it is recommended to use the feature for small or big projects. Additionally we've explained how to access the Color Manager and add the global colors. Finally, we've discussed the usage of those colors throughout the builders of the theme.

See something inaccurate? Let us know