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?
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:
Activate the plugin after install. You will then see this plugin active in your plugin lists:
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:
Once you open up the Global Settings tab, you will see a space for Global CSS:
Input whatever styles you want following standard CSS markup rules:
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):
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!