How To Change Elementor Global CSS on WordPress

Share on facebook
Share on twitter
Share on linkedin
Share on email

Tired of building CSS classes per page in Elementor and wish there was an easy way to change Elementor global CSS classes on multiple pages, sections and widgets at once? So were we and that is why we wrote the Elementor Global CSS WordPress plugin.

Sure, we could’ve gone into the child theme style.css and hand-coded the CSS to apply globally across our Elementor site. But we bought into Elementor so we could keep our development work on the front-end interface. And who wants to do a hard refresh each time they make a CSS change just to preview it? That shouldn’t be necessary in 2020. So, manually editing style.css isn’t the approach we wanted to take.

To change our CSS from the front, we either had to apply repeating CSS rules to each Elementor page’s Custom CSS field or develop a plugin to provide this function globally from a single style sheet input field.

Personally, we like to keep our dev work in line with the D.R.Y. principle – Don’t Repeat Yourself. Copying and pasting the same CSS rule across dozens of Elementor pages into a Custom CSS field just seemed needlessly redundant.

So, we built a light weight plugin to provide that functionality now for any WordPress site using Elementor page builder. It’s now incredibly easy to change Elementor global CSS with this plugin! Our team uses this plugin on every Elementor site build we do now.

What’s This Plugin All About?

You can get the plugin from CodeCanyon here: Elementor Global CSS WordPress plugin.

Update CSS classes in one central location and the changes will apply to any matching CSS class on any Elementor page. You can apply the CSS class to any page, section or widget and it will update across your entire site when you make any changes with our global CSS tool. We help you save time and build like a pro

You also get a live “on the fly” preview of CSS changes – just like the native Elementor page-level CSS tool. There’s no need to refresh your pages endlessly to see a CSS change (yeah we hate doing that too).

You can still use the standard page-level CSS rules, but you will now have access to the power of global CSS rules on your Elementor page builder sites too. And who doesn’t want that?

Silent Demo

Built For Elementor

We love building with Elementor and wanted to streamline our process with an intuitive integrated global CSS feature.

We didn’t want it to be buried in a back-end panel and we didn’t want to rely on third-party global CSS plugins that weren’t made with Elementor in mind. We also wanted to create a live CSS preview matching the native feel of Elementors’ design tools.

The end result was an easy to install, easy to use plugin that gives you full control to change Elementor global CSS rules on your website from within the Elementor global settings panel.

Installing This Plugin

Just download the ZIP file from Envato (CodeCanyon) and then add it as a new plugin in WordPress:

Change Elementor Global CSS

Activate the plugin after install. You will then see this plugin active in your plugin lists:

Activate Elementor Global CSS plugin in WordPress

Using The Global CSS Editor

Go to a page on your website and chose to “Edit With Elementor” to activate the Elementor page builder.

You can find your Global CSS input box under Settings → Global Settings:

The Elementor Global CSS input box is under Elementor Settings -> Global Settings

Once you open up the Global Settings tab, you will see a space for Global CSS:

The Elementor Global CSS input box

Input whatever styles you want following standard CSS markup rules:

Add your global CSS rules in Elementor

You will see a live preview of any changes you make to CSS rules here. Upon updating the page via Elementor, your global CSS will be saved and applied across your entire site.

As a quick note, you have to make sure to add the CSS class from your global CSS editor to any element you want it to apply to by using the Elementor section/widget advanced settings tab and putting the CSS class name in the CSS Classes input box for your page element (while removing the . of course):

Add CSS classes to any elements you wish to style

Plugin Compatibility

We’ve tested plugin compatibility up to Elementor v2.8.2 and WordPress 5.3.2

Please notify us if you encounter any issues or cross-compatibility problems our team can help resolve!

Sign up to get our latest articles

Don’t worry. We won’t sell your email. We are also really busy managing our clients, so we won’t be filling your inbox with articles every day. We only write them when we have a compelling reason to do so, and some spare time too!