How To Add Custom CSS In Elementor Free Version

If you don't have elementor pro and if you want to add custom CSS to your Wordpress elementor website but you have not found any way to add custom CSS in your elementor free version, then you have come here to the right place. Here in this blog, you will learn how to add custom CSS in the elementor free version in two easy ways. So, we will learn the full process with a few steps so let’s begin:

• Install the first plugin
• Install the second plugin
• Bottom line

STEP-1 INSTALL THE FIRST PLUGIN

 

In this blog, I will show you how to add custom CSS to your WordPress website so here's the first method of how you can add custom CSS without using the elementor pro version. Here in the first method, you have to install one plugin that is master addons for elementor so here's the plugin you can see above the image. So, you have to install it and activated it then follow the next steps given below.

After installing the plugin you will see this type of interface. Here you can install one more plugin or you can skip this. Here I skipped this process because I don't need the plugin.

Then you will see all options. Now you can keep all these settings or you can click on the red-colored disable all button to disable all the features of this plugin.

 

After disabling all these features you will see the custom CSS feature under the extension tab. Just switch on the custom CSS feature and click on save settings.

 

After switching on the custom CSS you can test whether this plugin working or not. Just for an example, here I'm placing one button and after going to the advanced tab and scrolling down, here you can see the custom CSS feature by master addons by elementor. After writing some CSS code and clicking on the update button and refreshing the page, the code will not go and the button will work fine. So, that's the process of how you can add custom CSS without using the elementor pro version.

STEP-2 INSTALL THE SECOND PLUGIN

 

So, you have learned in the first method of that how you can add custom CSS without using the elementor-free version by installing the master addons plugin. Now here is the second method of another plugin. Here is the plugin called simple custom CSS and js. So, install the plugin and activate it.

 

This plugin interface is so simple and easy to use. Just you have to click on the add CSS code button and put your CSS code here. But the problem is that here you have to create separate files for each other, otherwise it will not work and it will mix up with all of them.

 

Here you can put the CSS code directly or you can inspect elements and then copy the CSS code from inspecting and paste the code on the custom CSS plugin. After putting the CSS don't forget to update the page otherwise it will not work.

BOTTOM LINE

So, here are the two easiest ways to add custom CSS to your Wordpress website without using elementor pro and any extra paid plugins.

Elementor is updating its features day by day so, you have to optimize it and you can make something great by using some tricks and tips. The most important thing is that WE MADE A VIDEO ON HOW TO ADD CUSTOM CSS IN ELEMENTOR FREE VERSION, here’s the link, you can watch this you will better understand: https://youtu.be/Tdoim7oXwck

That’s all there is to it! We hope that you’ve learned something new today and that you’ll be able to apply it to your own website. If you like it then share this post and if you have any questions or feedback on this blog, please leave them in the comments, or you can comment on youtube, we will reply to you shortly!