Elementor and Elementor Pro are incredibly powerful visual builders for WordPress.

But what happens when you need custom CSS to extend the design and functionality of a website? Many web developers who use Elementor to create client friendly websites find themselves in this predicament. Elementor comes with some built-in CSS editing capabilities, but if you expect to use it for a complete production site, your workflow will be negatively impacted.

Of course, you can use a combination of dev tools, a custom stylesheet, and a whole bunch of manual CSS coding, but this is time consuming and not efficient.

Luckily, there's a third party plugin that integrates very nicely with Elementor in Elementor Pro , allowing you to quickly edit and manage CSS professionally and efficiently.

This post is going to discuss using this plugin, called CSSHero, with Elementor Pro. In fact, when our agency builds websites with Elementor and needs to add and manage a ton of custom CSS, this is our go to solution (The purpose of this article is to show you why).

What’s CSSHero?

CSSHero is a utility plugin that allows you to easily customize your website using CSS. There are some basic features, but where it gets interesting is the high quality CSS code editor and inspector.

The inspector allows us to add, manage, and edit custom CSS with a live preview of every change made. The code is automatically checked by CSSLint to ensure that it won't break any aspect of the website. there are additional developer oriented tools like device specific CSS, custom media queries, code commenting, and versioning.

All CSS is exported to a single stylesheet, meaning that this is one of the best ways to add custom CSS without negatively impacting the performance and speed of your Elementor website. If you're in agency looking for a good way to manage custom CSS on Elementor, this is the solution for you.

Pricing is fairly reasonable. For $19.00 a year, you can get a single site license . At the high end, you can purchase a lifetime pro plan that allows you to install CSSHero on 999 websites for only $199. This is incredibly valuable if you expect to use this tool in many websites.

Now, we're going to discuss some of the applications that we use CSSHero for.

Using Inspector To Write, Apply and Manage Custom CSS on Elementor

Inspector is the major selling point of this plugin for design agencies. Essentially, it's a full fledged CSS and LESSCSS editor that is incredibly quick and easy to use.

This is our go to solution if we need to deal with a lot of custom CSS on an Elementor website. That's because it makes all aspects of the workflow easy, from writing it to applying it to managing it.

Let's run through each of the main features that come with the inspector tool. First, when it comes to writing the CSS, a big issue with Elementor is the sheer number of classes that help you specify an element. Let's take a look at a few examples of the selectors that are used to style Elementor sections.

Even if you're using dev tools, it's difficult to identify and then copy and paste all of these selectors over to your custom CSS stylesheet. With the CSS hero inspector, all you need to do is point and click on an element, and the selector is automatically populated in the inspector CSS editor.

This saves us a ton of time and ensures that we have the most specific selector available to us.

Setting up project variables is also another time saving thing that CSSHero allows you to do. First, we create a new variable. For this example, we're going to specify “black” as @color1. you can then use this variable anywhere you want the color black to be applied via CSS.

Then, when we're editing the actual CSS we can View changes in real time, and keep track of edits by quickly adding notes and comments to specific lines. We can also export the CSS in its default form, as minified CSS, and even as LESSCSS.

Of course, many Elementor components can be easily styled using the builder, but in some cases CSS is required, making this tool essential to anybody's workflow who uses custom CSS to style and Elementor website.

Making Elementor More Responsive With CSSHero

In our opinion, one of the biggest missing features from Elementor are custom breakpoints. Custom breakpoints apply styling at specific screen widths to make sure everything remains responsive on all device sizes.

The core installation of Elementor comes with three breakpoints, one for desktop, one for tablet, and one for mobile, but due to the hundreds of screen sizes and types out there, this is definitely not enough.

There are some solutions that allow you to add custom breakpoints to Elementor, but the predominant way to do this is by using custom media queries and straight up CSS. This is great because you can specify everything down to the pixel, but at the same time it takes a lot of effort and time too properly set this up.

If you're writing these for individual pages, it can get difficult too organize and keep track of all the individual CSS snippets, especially if you are writing them on a per page basis (or even a per element basis).

CSSHero has a very handy feature called queries, which allow you to easily generate and edit custom media queries from a central location.

As you can see, it's incredibly easy to add a new media query for a specific screen width. Couple this with the universal stylesheet and easy to manage CSS, and you've got yourself a perfect solution for custom responsiveness in Elementor.

Editing Themes

While we typically build Elementor websites with the dedicated Hello Elementor Theme, there are some situations where we need to use custom or third party themes.

Many times these have essential functionality components, but the styling doesn't match the branding of the company. Of course, we could go into the stylesheet for the theme and edit that way, but CSSHero is much quicker and easier to use , especially because it's visual and allows you to click on the element that you want to apply the styling to.

We can quickly edit global styling rules such as fonts and colors. we can also style the login page , and use premade style combinations to make our jobs much easier.

Another thing that's really helpful when it comes to editing Elementor themes with CSSHero is the ability to style as an UNlogged in user. This lets us see exactly what our visitors will see, while still maintaining administrative editing capabilities over the website.

And, it allows us to keep the core styling of the theme intact, as CSSHero generates its own stylesheet. What this means is that we can easily export and import global style sheets from our personal repository, and if the client needs to revert the theme back to the original styling, all we need to do is disable and uninstall CSSHero from the site.

Conclusion

CSSHero and Elementor make a powerful combination if you're looking to add and manage a lot of custom CSS. This helps you ensure that the styling of your website completely matches it's overall branding, even if you're using custom themes.

The core CSS editor in Elementor works in many instances, but if you know that you will be using custom CSS for many components within the website, using CSSHero is a perfect way to speed up your workflow and quickly customize the Elementor plugin.