How To Write CSS in Elementor For Free – Full Guide 2022

If you are using Elementor, then you might know that you can use Custom CSS with it, But to use custom CSS with Elementor, You need the pro version of Elementor. But what if I tell you that you can Write CSS in Elementor For Free. Hence how to use CSS With Elementor for free.

Please note that I’m not talking about the WordPress customizer’s additional CSS, I will show you show a way to write CSS from your Elementor dashboard. I will also show you how to write CSS with Elementor using WP customizer. Here I’m assuming you know HTML and CSS.

Why Use Custom CSS with Elementor?

Although Elementor offers high customizability, certain things can be done by CSS only. CSS will give you an extra edge in Customizability. You can easily add CSS to make your website more elegant and beautiful.

How Much Does Elementor Pro cost, BTW?

How Much Does Elementor Pro Cost?

Well, there are four plans for Elementor Pro to choose from, 1. Essential Plan or Starter Plan – USD 49 / Year, 2. Expert Plan – USD 199 / Year, 3. Studio Plan – USD 499 / Year,4.Agency Plan – USD 999 / Year.

How to Use CSS with Elementor for Free Using a Plugin 

There are quite a few plugins for Custom CSS with Elementor, But here we will use a plugin called “Royal Elementor Addons“, Other than being one of the best addons plugins for Elementor, the free version of Royal Addons plugin comes with many amazing widgets and features, including custom CSS for Elementor

How To Write CSS in Elementor For Free

All you need to do is install the plugin, Configure the plugin if you want to (optional).

How to Use CSS with Elementor for Free

And then open a page with Elementor. Click on an Elementor widget or element. Here I’m using a heading but you can choose any element that you want to customize using custom CSS.

How to Use CSS with Elementor for Free

Now, Go to the Advanced tab for any element (as shown above). Give the element an id or class using CSS ID or CSS Classes. Here I’m using a class called “demo-heading”.

How To Write CSS in Elementor For Free - Full Guide

Scroll down and look for Custom CSS. There will be 2 custom CSS, click the one that says “Custom CSS – Royal Addons”. Now start writing your desired CSS.

How to Use CSS With Elementor Without any Plugin 

I know you might know about this process, Still, let me discuss it anyway. Follow the steps given below –
First, Open / Edit a page with Elementor, then edit/click on any element and go to the advanced tab, Now give it a class or id as shown previously.

Once you have given the class or id to that element, Go to the wp Customizer and to enter the wp customizer, follow the step given below –

Make sure you have added the id or class to that element, now go to your home and make sure you are logged in as an admin.

How to Use CSS With Elementor Without any Plugin

Once you’re on the homepage, look for the customize button on the top of the website or the admin bar. Click on the “customize” on the admin bar.

How to Use CSS With Elementor Without any Plugin

Once the customizer has opened, Scroll down and navigate “Additional CSS“. 

How to Use CSS With Elementor Without any Plugin

Now start writing your desired CSS.

 Conclusion:

Although you can also add CSS to the theme’s main CSS file, it is better to keep your CSS separate from the theme’s CSS. And be careful while adding CSS as overriding themes CSS can issues such as breaking your site or layout issues.

Leave a Comment