How to Install & Use Custom CSS to Elementor Websites

Personalizing your WordPress websites has become so much easy with Page Builders like Elementor which facilitate you with an efficient drag’n’drop interface. You can now take your websites to full-scale using FREE Xpro Elementor Addons that include the best free widgets for Elementor and free Extensions for Elementor.

Suppose you import a page template from Xpro Library but want to tweak & customize a specific section according to your brand. This is where our FREE Custom CSS extension for Elementor comes to the rescue. Xpro Elementor Addons offers the Custom CSS option with the Free version of the plugin, you can download the plugin from here. You don’t have to buy Elementor Pro to apply custom CSS, just download our Free plugin and enjoy the perks of becoming a part of the Xpro family.

You may need some extra flexibility to customize your Elementor design. So that you can present your business/online store more attractively to your targeted audience. Cascading Style Sheet allows you to create a custom layout and present your site as you wish. However, you need coding skills to pull this off.

Moreover, custom CSS adds a unique identification to your brand as per your imagination. Xpro Custom CSS extension for Elementor lets you add CSS to your widgets, sections, and columns as you demand. The extension helps you add incredible customizations for FREE. You can:

• Extend the possibility of customization
• Add unique aesthetics to your website
• Amplify web design & style structure.
• Practice & implement your coding skills

The extension is totally FREE and comes with the Free version of Xpro Elementor Addons. Let’s check out how you can add Custom CSS to your website.

Requirements

You need to install and activate the Free version of Xpro Elementor Addons to use our Custom CSS extension for your WordPress websites. Once the plugin is installed, just make sure Custom CSS is ‘Enabled’ from the Extensions tab of the Xpro Dashboard. This way you will easily find & use the extension in the Elementor editor.

Follow the steps below to enable the extension:

Step 1

Click on the Xpro Addons option available in the WordPress dashboard menu.

Step 2

From the Dashboard, click on the Extensions Tab, find the Custom CSS option, and then toggle the button ‘ON’ to enable it.

How to Add Free Custom CSS in Elementor Websites

Once your free version of Xpro Elementor Addons is installed and activated, you can easily add custom CSS to your widgets, sections, or columns in no time. Remember, you also need to turn the extension on from the Xpro Dashboard, steps are given above in the Requirements section. Let’s see how you can use FREE Xpro Custom CSS Extension for Elementor.

Select the widget, section, or column on which you want to apply custom CSS. Now simply click on the Advanced Tab and find the Custom CSS section with Xpro batch on it. In this example, I’ll be editing a section of the website.

Now click on the Xpro Custom CSS section, and you will see a snippet where you can write your code.

Here, I’m going to change the background color to ‘Ivory’ by applying custom CSS to this section.

The background color has been set to Ivory now. This is how simple it gets using our Free Xpro Custom CSS Extension for Elementor. You can do any type of customization to your website as per your business needs.

Best Free Custom CSS Extension for Elementor

This is how you can add Custom CSS for Free to your Elementro website. Simply download Xpro Elementor Addons and quickly get started with your customizations.

Best Custom CSS Extension for Elementor

Xpro Custom CSS for Elementor gives you the complete creative freedom to customize the sections, widgets, and columns of your website as you want.

You can also add amazing Floating Effects to your website for FREE by simply viewing our detailed guide on how to add floating effects on the Elementor website. You may also like our free Elementor Entrance Animation extension that’s free of cost.

I hope you have a better understanding of using the FREE Xpro Custom CSS extension for Elementor. You can view all of our unique Elementor Features from here and start building amazing websites for free.