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

The color manager is part of the Theme Options in the X and Pro themes. Follow the steps below to access the Color Manager:

  1. Go to X/Pro > Theme Options.
WordPress Theme Options Menu Item
  1. Click the settings icon (Cog Icon) at the bottom left-hand side of the screen.
Settings Icon
  1. Click the Colors tab in the modal.
Color Manager

How to Create the Global Colors

Follow the steps below to create a global color:

  1. Click the Add New grid item while you are in the Color Manager modal.
  2. A new grid item will appear. Click on the color section of the grid to show the color picker.
  3. You can change the name of the color at the top of the picker.
  4. Use the controls available to select a color or alternatively you can directly add the color code at the bottom of the color picker.
  5. You can duplicate or delete a color by hovering over a grid item and clicking the proper icon at the top right hand of the grid item.
  6. Click the Save Colors button at the bottom of the modal to save all the colors.
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 option that you can choose a color in the Cornerstone in X or Content, header and Footer builders in Pro theme. The colors that you added will be available at the bottom of the color pickers with circle dots:

Color Picker Palette

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