If you are using the free version of Elementor, you’ll notice that adding custom css to the page isn’t supported. Elementor says that it’s a feature of the pro version.
What can you do? Are you going to upgrade? Well, if you can, I recommend you to do so. It’s worth the price.
However, if you just need to add some CSS and not quite ready to upgrade yet, let me show you a walk around.
Adding custom CSS in Elementor free version
Now, let’s find the HTML element and drag it into your page:
Now, you’ll see the HTML on your page look like this:
It doesn’t look very attractive. However, you don’t need to worry about that. It will not show up on your final page (the page that your visitors see).
Now, let’s hover your cursor over the HTML element, you will see the edit icon appears:
Then, you’ll see the HTML box appears on the left of your screen:
While it says HTML code, there is nothing prevent us to enter CSS code 😉
Let’s enter some CSS code:
<style>
body p {
color: red;
}
</style>And you’ll see, my page has red text:
Now, update your page and see the changes.
Conclusion
Some of you may say that, putting style tag inside the body is not recommended. Well, that’s a thing of the past. HTML5 is finally allow the style tag in the body. If you don’t mind reading length specification page, here you go.
You don’t limit to put just css in the HTML box. You can put HTML (of course) and also javascript code. This enable some very interesting feature that you cannot do with the default elements provided by Elementor.