How to Add Custom CSS in Elementor Free

In the previous article, I have covered how to find and use a widget selector in Elementor. A widget selector itself is used to target a specific Elementor widget to apply a custom CSS to.

Naturally, you need to use the pro version of Elementor to add custom CSS. Even so, you still be able to add a custom CSS if you use Elementor Free although the process is not as smooth as on Elementor Pro.

To add a custom CSS in Elementor Free, you need to use both class selector and ID selector.

Adding Custom CSS in Elementor Free

First, let's recall again that each Elementor widget has a unique class selector. So logically, you can use the selector to target a widget you want to apply the custom CSS to. About the CSS code placement itself, you can place it to the Additional CSS block on theme customizer (Appearance -> Customize) or the style.css of your theme.

However, if you only use the class selector to target the widget, the CSS code will apply to the entire site.

Let's take an example.

Say you want to add a gradient effect to a Button widget via custom CSS (whereby the selector of the Button widget .elementor-button). If you type the following code to the Additional CSS block on the theme customizer, the code will apply to all the Button widgets on your website -- including the ones already added to a page.

.elementor-button {
background: linear-gradient(to left, #f4e784, #f24389,#a478f1);
}

In addition, the code will also apply to the Button widgets on a pre-made template in case you want to insert one of the premade templates from the template library.

If you want the code above to apply to a specific Button widget, you can add an ID selector. So, the code would be:

#pastel-gradient .elementor-button {
background: linear-gradient(to left, #f4e784, #f24389,#a478f1);
}

#pastel-gradient is the ID selector for the CSS code above.

After updating the code, you need to add the CSS ID to the Button widget you want to apply the CSS code to. Go to the Advanced tab on the settings panel and paste the CSS ID to the CSS ID field.