How To Add Custom CSS/Javascript In Elementor Free Version

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.

custom css in elementor free version
custom css in elementor free 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.

Finally A Browser Without Cache – Web Developer Dream!

If you are reading this post (not by accident), I can safely assume that you share with me the frustration with browser cache. For normal users, browser cache is great since it speeds up website loading, save bandwidth…

But for web developers, it’s something different:

Well, imagine you have changed some CSS to your button, you reload your browser, nothing changed!

Despite the fact that you have:

  • Open developer tools, check clear browser cache
  • Installed the best cache browsing addon/extensions you can find and clicked the clear cache button hundred times

Still, your new style doesn’t show.

Browser cache is to blame.

If you feel the pain, read on.

I understand why browser makers implement caching. But, I wondered if there was a browser that doesn’t  have cache so I don’t have to spend hours working on my code, wonder why it isn’t working only to realize that there is nothing wrong with my code but browser’s cache?

The browser without cache didn’t exist, until now

I tried to find that browser but it didn’t exists (during my search). So, accidentally, I think of selenium. It’s a browser automation tool that let us do a lot of cool things with browsers. (SEO guys are more familiar with this concept). It turned out, selenium is the solution to my problem.

I ended up creating a small javafx app to let me spawn browsers without cache to load my development websites.

And it worked perfectly.

Let me show you how it works.

How does the browser without cache work

This is the application:

Main interface

Settings interface

As you can see that, on the main interface, you can enter your URL, select the browser you want to spawn and click on start browser. You have two choices of browser, Chrome or Firefox.

On the settings panel, you need to set the path to Chrome driver and Firefox driver. What are they? You can download Chrome driver here:

Download Chrome driver

And Gecko driver (Firefox) here:

Download gecko driver

Make sure you select the right version for your OS.

The favorite URL box is where you can enter list of URLs that you want to appear on the box on the left. Later, you can just double click on those URLs to open the browser.

Where to download the app

You can download the app here:

Download no browser cache app

If you want to develop further, feel free to get the source code here:

https://github.com/datmt/NO-FUCKING-CACHE-BROWSER

Questions and suggestions are welcome.