This article was last updated on the May 17, 2018.
Table of Contents
An exciting new addition to X and Pro is the Color Manager functionality, this 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 site wide, saving you time on going back and forth editing individual color values.
Pro v2.1.0+ and X v6.1.0+
To get started, open up your builder and click on the cog icon in the left bar to open up the Settings Modal. Below is a screenshot of where you will find it in the Content Builder:
And here is a screenshot of where you will find it in the Header and Footer Builders:
Once you've opened the modal, go to the Colors tab to open up the Color Manager. By default you will see the following screen:
Clicking Add New will introduce new colors into your palette, which can be used later throughout your designs:
If you wish to copy, delete, rename, or alter your color, hover over the item you wish to update. When you do, the copy and delete actions will appear in the upper-right corner. Clicking on the color swatch will reveal the color picker, which also contains an input where you can label your colors as desired.
Colors that you've chosen in your palette will be available for use anywhere there is a color picker throughout the builders:
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!
Pro v2.0.4- and X v6.0.4-
To get started either go to WordPress Dashboard > X > Colors or WordPress Dashboard > Pro > Colors:
You will be presented with the Color options like this:
You can add as many colors as you'd like to re-use and clicking on one of the colors in the central area will open the color picker like this:
Once you've set your colors as you want, don't forget to save!
Our header currently looks like this:
We're going to update our header to use the new brand primary color. If we open up the header builder and edit our header with the background color, we'll see our new brand primary color available for selection like this:
Now our header color has been updated with the brand primary color we set earlier and looks like this:
Now that we have our header set to one of our colors from the color templates, we can go back and edit that color and once you save the colors it'll update live on the site without having to edit it in the header builder! For example, if we open up the Colors section again and change the brand primary color to a green like this:
We can now see our header has changed color to the brand primary color without having to open up the header builder.
Utliziling the new Colors functionality, will help you build sites quicker and easier than ever before!
What is the purpose of 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.