Elementor Theme Styles
|

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.

Elementor Global Styles Menus

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.

Styles Pick Color Palette
Default color palettes
Styles Customize Colors
Changing default colors

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.

Styles Default Fonts

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

Styles Notice

So I clicked the link and disabled those.

Styles Disable Defaults

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.

Theme Styles Menus

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

Styles Background Color Set

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.

Typography Colors Set

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.

Button Styles Created

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

Image Styles Created

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.

Global Styles Example

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.

Font Settings Not Being Applied

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.

Adjusting Typography Font Choice

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.

Font Settings Applied

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.

Another Elementor Page

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.

Page In Gutenberg Editor Styles Not Applied

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

Gutenberg Page On The Front

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”.

Elementor Creates A Default Style 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.

Default Kit In The Editor

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.

Going Into The Theme Builder

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

Creating Single Page Template

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.

Single Page Template In Editor

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.

Single Template Applied On Front

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

0 0 votes
Article Rating

Some of the links in the post above are “affiliate links.” This means if you click on the link and purchase the item, I will receive an affiliate commission. You will still pay the same amount so there is no extra cost to you. I am disclosing this in accordance with the Federal Trade Commission’s 16 CFR, Part 255: “Guides Concerning the Use of Endorsements and Testimonials in Advertising.”

Similar Posts

Subscribe
Notify of
guest
4 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Maeve
Maeve
Guest
March 18, 2020 5:04 am

Sorry, but the most likely you’ve got the things wrong when it comes to Elementor Theme Styles and Gutenberg. With Elementor users are supposed to create templates or template kits. Once you create the template, you should assign it to a particular page (or use globally, of course). Once you do that, all the page content is managed by using Elementor, there’s no real connection to Gutenberg any more so applying Theme Styles to Gutenberg doesn’t make any sense. What does make sense is the fact that you can insert Elementor created content into Gutenberg editor, and by doing so Elementor Theme Styles should be applied to the blocks that belong to the Elementor content.

Tiffany
Tiffany
Guest
December 13, 2020 6:11 pm

Hi:

I wonder what changes you have found with the newer version of styles (aim recent Elementor updates). I have found issues when trying to export out the default kit (for creating template kits to sell online). Exporting it does not carrying over my custom set colors, fonts, etc. Simply checking off all of my templates (yes, making sure to see ALL of them especially the style kit) and exporting/importing them into a new site isn’t working and I have not found anyone online talking about this too much.

Just curious if you have found a different process is needed when you want to do that.

Thanks so much!