Converting an existing Elementor site to using Theme Styles, hard work but good for performance?

Elementor recently introduced a “global theme” function. This means you can set global defaults for e.g. fonts, sizes, images, colours and other things. This is really great news and is something that was sorely missing in Elementor. The first version of this is nice, but unambitious; many things that you’d like to set globally are not available. Hopefully this will improve and develop over time. So, still great news.

They call it “Theme Styles”.

Theme styles, in short, allows you to define styling for the whole site (built on Elementor), a bit like styling a site with a classic theme. You can set styling for e.g. typography, buttons, colours and several other things.

Previously you had to set the styling on each element on posts and pages, unless it was set by your theme. I use the Hello theme by Elementor, that is a very light-weight theme with basically no styling and no styling options.

It seems to me that if you set styling globally for the whole site it would reduce the amount of CSS (and possibly HTML) needed. Instead of setting e.g. font type on each element on a page you can set it once, for the whole site. (In very simplified terms.)

This should potentially reduce the amount of code and make the site faster.

But maybe (?) a more important benefit of it is that it will make it much easier to manage the styling of a site. Much easier to make it look coherent, using the same styling everywhere.

So, two important benefits of “theme styles”:

• Reduced amount of code, and thus a faster site
• Easier management of the sites styling, giving a more coherent and better design

I am very keen on making the site (well, all our sites) run fast (Google says it’s important…) so reducing the amount of code sounds very attractive. If that’s actually what you can achieve with Theme Styles, which I am not 100% sure of.

So I decided to test. The site I am running these tests on was built with Elementor, when styling had to be done on each “element”. Pages can have 10, 15, maybe even 30 or more “elements” where each had been styled for typography individually. The site I did this on is our wine tour and wine travel site BKWine Wine Tours.

The styling I originally had was mainly setting the font to “Montserrat” and in some cases setting the font colour and font size. So, what I needed to do was the following:

1. Remove all this “old” styling in all elements on templates, posts, pages, wherever it was present
2. Set global styling in Theme Styles

I decided to do two more things:

1. Change the font: Use Verdana as a font, a “web safe” font, instead of Montserrat, a Google font
2. Set Autoptimize, a performance plugin, to “Remove Google Fonts”. (I previously had it set to “Combine and preload in head (fonts load late, but are not render-blocking), includes display:swap”)

Just like some other global settings in Elementor, you can only access this function from the Edit Post/Page pages. This seems silly to me. These kinds of global settings should be accessible from the WordPress/Elementor admin panels, not from an edit post/page page. No doubt there are some technical reasons why it is not.

Currently it lets you style globally (for the whole site):

• Background
• Typography
• Buttons
• Form field
• Images
• Custom CSS

So, I’m interested in Typography and Images primarily.

Previously you had to style e.g. typography in the various templates you might have (single post, single page, archives etc) or on each individual post/page. Now you don’t. Now you can do it once and for all, globally, for the whole site.

My guess is that this might simplify the code for the pages served to visitors. Instead of having each individual element styled with e.g. fonts and sizes you can new do it once, globally, is (presumably) some global css. This should mean less code to serve to the visitor. (I don’t know if this is actually true. It depends on how they have implemented it I guess.) A page/post/template can easily have styling set in 20, 30, 40 or more places, in fact, styling on each element containing text. Maybe that was not how it needed to be done, if Elementor had been used optimally. But I was not (and still am not) a wizard at Elementor. I get by.

In any case, “theme styles” will allow me to control e.g. fonts in a single place instead of in many different instances across my various templates.

Presumably this will also remove some issues, for example that the styling of headings are different for headings set with the Elementor Heading element (styling set by the Elementor settings) and headings created inside a Text Element (that styling, if any, is set by the theme, and since I use the Hello theme that means no styling at all, or rather the default WordPress styling, I assume). (After having done all this, this presumption proved to be correct. Those discrepancies disappeared.)

There is a problem:

I now need to set the global “theme styles” but I also need to remove all the corresponding settings in all the various elements I have used in my Elementor Templates. Otherwise, the styling (CSS?) code will be duplicated and maybe inconsistent: it will appear once globally and also for each element in the templates I use.

Basically, I need to:

1. Set the global template Theme Styles (and disable Default Colors and Fonts from the Settings Page)
2. Remove the corresponding settings in all Template elements defined in the Elementor Theme

This proved to be an awful lot of work. It took me a full day to go through all the site and remove all the local styling.

The easiest way to do it was to use two environments: one Live, in production, and one Development. Easily done through my hoster’s WPEngine’s admin and site management tools.

In the Development environment, not outwardly visible, I set global fonts and colours to something really ugly and easy to recognise (e.g. font Aclonica and font colour an ugly green).

I could then easily see which elements on the Dev site did NOT have that styling applied. And then I could remove that styling on the Live site.

On the Live site I decided to use a simple web safe font, Verdana, and not use the Google font Montserrat that I had before. The difference is very small, but it might mean that Google fonts will not need and will not need to be loaded.

This being done I went through and checked:

• Theme Builder Templates, every single one, header, footer, single, archive
• Templates, every single one, page, section and global widgets (*)
• Pages, yes, all published pages that can (indeed did!) have styling on them, e.g. the home page
• I also checked recent posts, done with Elementor, but they did not have independent styling

(*) Since you cannot edit global widgets from the admin panels, only from within a post (which is a silly design), I have created Section Templates that contain my Global Widgets so I can edit the Global Widgets from the Section Templates instead of from a post.

Maybe important to add: before doing all these changes, I noted down what settings I had in “Default Colors” and “Default Fonts”, in case I wanted to make sure I re-used the same settings.

In fact, when using the Theme Styles there were very few settings I needed to do. I set the font (Verdana) and line height (2 em) in Body but all the other elements (headings etc) use the same fonts cascading down (up?) and have appropriate sizes. I also set the colour for links. I will look into other settings later, in particular Image settings.

This was a lot of work. It took me a full day to do.

But it seemed worth it.

It will give me a site that is much, much easier to manage, from a styling point of view, although it seems to me that the Theme Styles need to develop more functions for styling images.

It also seems to have had a positive effect on the speed and performance of the site, a site that loads faster, as you can see in this post, Improving the speed and load time of a WordPress site with performance plugins, if you scroll down towards the bottom to “Update 4: Simplifying CSS and HTML with Elementor Theme Styles”.