Three Elementor Themes Win the Color Palette Trifecta

There are lots of page builder friendly themes and a ton of themes that say they are compatible with Elementor. However, when it comes to color there are only three that win the trifecta. There are only a few main places where colors can be set: in the theme Customizer, in the Gutenberg editor, and in Elementor. Having the same colors to pick from site-wide is a win for designers and content creators because it is a great convenience and it helps to ensure brand and style consistency. Themes that allow you to manage the color palette centrally, that then shows those colors in all three areas, win the trifecta. In this post we’ll take a quick look at this feature so you see what it is and how it works with the different themes.

Video Version

The Old Way

I used to recommend and use the Central Color Palette plugin. I created tutorials showing how to use it. This plugin used to let you define a set of colors in the WordPress admin that would show everywhere. However, when Elementor released its Global Color options Elementor didn’t provide a public Application Programmer Interface for developers to get and set colors in Elementor. As a result, the Central Color Palette plugin is no longer compatible with Elementor and its author hasn’t kept it updated or provided support.

Tested But Didn’t Make the Cut

I tested a number of free Elementor themes. These were tested did not make the cut because they either didn’t have a global color palette, Customizer colors were not shown in Gutenberg, or Customizer colors were not shown in Elementor.

The Three Winners

Elementor 3 was released the end of August 2020. In November the Kadence Theme was the first to provide integration with Elementor global colors. In December the Neve Theme also added color support with the Elementor editor. Then in April Blocksy was the third theme to do so. As far as I know, these are the only themes with this feature.

Kadence Theme

On a test site I have the free Kadence theme and Elementor Core installed and activated.

In the Customizer, under General, Colors is the Kadence Global Color palette. I’ve made the colors dark blue and purple so they are easy to see.

Here is a post in the Gutenberg editor. The same colors as in the Customizer show in the Gutenberg editor.

Here is a page open in the Elementor editor. The same colors from the Customizer show in the global color list.

In Elementor, when you are editing the site settings, you can change the global colors. Note how when the color is changed from purple to red that the place where the purple color was used updates also. There is a live link between the palette and where it is used.

If in the Elementor settings you change the colors from the Kadence Customizer, they not only change in Elementor, they change in the Customizer also, and that is linked to the Gutenberg colors.

Neve Theme

Here is the Neve theme in the Customizer.

Here are the Global Colors. I set this reddish brown to make it easy to see.

Opening a post in the Gutenberg editor and we see the same set of colors.

In the Elementor editor there are the same colors also, with the theme’s Customizer colors being added below the Elementor global colors.

However, the theme’s global colors don’t show up in the site settings panel like they do for Kadence.

Blocksy

Here is the Blocksy Theme in the Customizer.

Here are the global colors in the Blocksy Customizer. I changed the font to green and the headings to blue to make them easy to see.

Here is a post in the Gutenberg editor and the global colors show here.

The Blocksy global colors show in the Elementor editor also, again, they are added after the default Elementor global colors.

As with Neve, in the Elementor site settings panel the Blocksy global colors don’t show.

Discussion and Conclusions

Definitions

Elementor has a feature called “Global Colors,” but those colors are only available in the Elementor editor, so they are not really global. All three of these themes add true site-wide global colors that can be set in the Customizer and carry through to Gutenberg and Elementor.

All three themes also have “linked” colors. If you change a global color in the Customizer then the places it was used change also.

Only Kadence had a two way sync between the Customizer settings and the global colors in the Elementor Site Settings panel.

Discussion

Some people just use Elementor Pro to create the header, footer and all of the content. Obviously in that kind of case having a global color palette doesn’t matter. However, if you are using the theme for your site styles, and you are using Gutenberg to create site content, and you are also using Elementor for landing pages, for instance, then having the same color palette available in each place is a very nice convenience. You don’t have to copy and paste hex codes. Also, if you change something in the Customizer then you don’t have to go change it manually in the other two places. This keeps your branding and styles consistent.

What’s the big deal? Don’t all themes do this? Actually no. In fact, few themes even copy their Customizer color palette over to Gutenberg and as far as I know, these are the only three that also integrate with Elementor’s global color list. So, these are standouts. Clearly the developer of these themes are going the extra distance to make WordPress work as it should, even while things are in a state of change — Elementor’s new global color settings and the quickly evolving Gutenberg editor. It is also worth noting that my tests were with the free version of the themes. These were not features requiring a premium version.

It is worth noting that Kadence went an extra step to also setup a two way sync between the Elementor global color site settings and the Customizer. That extra step, the extra refinements, are not uncommon in the Kadence products. With Neve and Blocksy, you still have a site-wide global palette and linked colors, but you need to remember to set them in the Customizer.

That’s my look at Kadence, Neve, and Blocksy with their global color palettes and integration with Gutenberg and Elementor. I hope you found it useful. Please let me know in the comments if I missing something or if you have questions.