How to use custom CSS in Elementor free version

How to use custom CSS in Elementor free version

Are you looking for a way to use custom CSS in Elementor free version?

Elementor is one of the popular page builders with so many features and functionalities. Custom CSS feature is one of them. You can use custom CSS anywhere in Elemenrot like in a widget, column, section, and others. Using custom  CSS you can create an interactive design that can make your website unique from others.

The custom CSS feature is only available on Elementor Pro. You won’t be able to use this on your free version of Elementor. But don’t worry here in this article, we will guide you to the easiest way to use custom CSS in Elementor’s free version.

How to use custom CSS in Elementor free version

In our previous article, we discussed how to add a gradient border to the image gallery in Elementor for that article we used CSS snippets in the custom CSS field of Elementor Pro. Now we are going to add the same things without Elementor Pro. We are adding the same CSS using the free version of Elementor.

selector .elementor-gallery-item
{
background-image:
linear-gradient(to left,#FFA500,#c779d0,#FFFF00,#808000);
padding: 5px 5px 5px 5px;
}

Here to use this code you need to follow the following steps –

  1. Additional CSS
  2. Elementor CSS Id

Additional CSS in WordPress Customizer

In the first step you need to add the code in the WordPress customizer additional CSS field, For this navigate to Appearance > Customize > Additional CSS. Now enter the full CSS code on the Additional CSS field.

additional css

As we use this code for gradient border to image gallery you need to remove the selector text from the CSS code and add a unique CSS id. Here we are adding the CSS id as #gradientborder

additional css

When you are done editing, click on the Publish button to save the changes.

Add Elementor CSS id

Now in the second step, you need to add a Class ID to call the CSS code you applied on the WordPress customizer additional CSS field. Open up the page with the Elementor editor and add the gallery widget. Insert your images and style it up as per your requirements.

Now navigate to the Advanced tab and then in the CSS ID field, add the CSS ID you added on the additional CSS field. Enter the gradient border in the CSS ID field as we set it in the additional CSS,  At the time you add the CSS id it will have the features you added.

css id

 

When you are done click on the Publish button to save the changes. If you want to add another image gallery with a different gradient border then you need to do the same process again. Go back to  Customize > Additional CSS and paste the same code but here you can change the color value and make sure to add a different CSS ID.

Then again in Elementor, you can use the CSS ID to call the code you entered in the Additional CSS field.

Wrapping up

Following the process, you will be able to use custom CSS in Elementor free version. You can see our other articles to learn How to display copyright year dynamically in Elementor

How to Open an Elementor Popup in Gutenberg

How to create a custom image shape in Elementor

We hope this article will help you. If you like this article please like our Facebook page to stay connected.