Elementor Theme Styles – Great Feature but Keep Your Theme

Introduction

The Elementor team released a new Theme Styles feature. Global styles have been a frequently requested feature for some years now. In the announcement the Elementor team writes that the new feature “replaces theme and code for setting global theme styles” and that you can “make style changes across your site without coding,” and “no need for the theme Customizer. Change theme settings from within Elementor.”

In this post, I test out the new feature to see how “global” it really is. Can we git rid of themes that allow us to set a lot of styling options in the Customizer? There is good news and bad news. Continue reading to see how this works.

Video Version

Test One – Elementor Free

Setting the Global Style Options

My goal is to make some obvious style choices and see if they are applied. On a new install with the Hello Theme and Elementor Free, I go into Elementor and see the Global Style section.

I went into default colors and picked a color palette. Note that if you click on one of the chosen colors you can change it.

I then went into Default Fonts. The default is Roboto. I noticed that font is actually used by the Hello Theme, so I changed the defaults to Open Sans.

I then went into the Theme Style area and got a notice to disable Default Colors and Fonts from the Elementor Settings Page.

So I clicked the link and disabled those.

I went back to the Elementor Editor and refreshed the page and saw that there are sections for Background, Typography, Buttons, Form Fields, and Images.

I went into the Background area and set the background to a light blue color.

I went into the Typography section and set colors for the Body and Headings text. I wasn’t going for beauty, but instead for something that would quickly standout so we could see if it was working: dark red for the body and dark blue for headings.

I then went into the Button area and created a button style. I gave the buttons a text and border color of dark blue and a white background color.

Finally, I went into the Image area and set a 10px light gray border around images.

I added a Header, text editor, image and button to the page and saved it. This is what our global styles look like. We can see that the choices we made have been applied.

But when I checked on the front, the font choice didn’t get picked up. It should have been Open Sans, but Segoe UI was being shown.

If you remember, I made the font choices in the Default Fonts area, so I went into the Theme Style / Typography section and chose Open Sans there.

And now they showed correctly. This makes me think that the Default Fonts area can be passed over in favor of the new typography options.

New Pages in Elementor Free Version

I created a new page in Elementor and added a heading, text widget, button, and image. All of the styles were carried over perfectly, including the background color.

So the Global styles work for content created in Elementor, which is a great time saver and welcome addition.

What About Gutenberg

The marketing for the Theme Styles feature was that we wouldn’t need to go to the theme to set the styles. So I created a page in Gutenberg. This is what it looks like in the Gutenberg editor. As you can see, in the Gutenberg editor, none of the “global” styles are applied.

OK, but what about on the front? The global styles were not applied there either.

Elementor Creates a Default Style Kit!

One thing I noticed is in the Elementor Templates area of the WordPress admin, there was now a template for “Default Kit”.

I went in to edit it and was happy to see the Theme Style settings that I chose earlier were all there. For example, here’s the light blue background.

This means that you can create a Theme Style Kit and export it to use on another site. That’s awesome!

What About Changes to the Style Kit?

At the suggestion of Ian Bowden, I went went into the Style Kit template and made a change. I selected a script font for the body. I then looked at a page that I previously created with Elementor. The change was applied to the page automatically.

What About When Using Elementor Pro?

I wondered what happens when we use Elementor Pro? Do the global styles get applied outside of Elementor? I enabled Pro and created a page in Gutenberg. There was no joy in the editor or on the front. The global styles were not applied on Gutenberg content.

OK, what happens if I create a Theme Template for the Single Page? I went into the Theme Builder and created a single template.

I specified that it was for single pages and gave it a name.

I just dragged in a Heading widget and the Post Content widget. Elementor picked up a page I created in Gutenberg called Test. Note that in the editor the background, title, text and image styles were picked up, but not the button style.

Same on the front. Everything but the button style was carried over. I guess that simplifies styling blocks in Gutenberg, but you will still need to manually set the styles of some of them.

What About Other Themes?

I tried viewing the Gutenberg test page in Astra, Generate Press, and Page Builder Framework themes and they worked the same as the Hello theme. The “global styles” worked for the Elementor Theme Builder template for all of the elements but the button.

Summary and Conclusions

The “global” claim for the new Theme Style feature was limited and didn’t work everywhere. To be fair, in the blog post announcing this new feature it said “The first stage of global styling is here!” So it is clear that the Elementor team knows there is still work to do.

My hope is that Elementor allows the global styles to be loaded in Gutenberg and on content created outside of Elementor. That would truly give us the choice of moving away from themes with tons of Customizer options. Until that happens, it is probably best to keep using a theme that lets you set styles outside of Elementor.

Despite the fact that we are still in the first stages of this feature, even just having global style options within Elementor is a huge time saver and will be appreciated by site builders. Also, being able to export and import Theme Style Kits to other sites is very nice. You can create Elementor Theme Templates and that will carry over some, but not all, of the Elementor global styles. I will be using the new Theme Style features and looking forward to those being expanding in future releases.

Visit the Elementor Website