How to add Custom CSS in Elementor: 4 Easy Methods

Looking for ways to add Custom CSS in Elementor?

Extending the already amazing Elementor designs by adding custom CSS can give you an unbeatable edge over your competitors.

So, why not use some Elementor custom CSS and stand out in the crowd of this highly competitive digital world, right?

There is no reason why you shouldn’t.

But how to add custom CSS to the drag and drop Elementor page builder?

Well, you can add custom CSS in Elementor in many ways. To know more details on how to add custom CSS in Elementor keep on reading…

What is CSS?

CSS (Cascading Style Sheets) is a rule-based style sheet language that one uses to change the layout and look of web pages built with a markup language such as HTML or XML. Using CSS is an efficient way of web design because it keeps both content and style on a separate file giving you the most flexibility and ease of use.

Why should you add custom CSS in Elementor site?

Well, it’s not mandatory because Elementor itself provides all the customization options you need to create beautiful websites. However, if you are someone who knows how to code and want to use your creativity to enhance the look of the site, then you can add Custom CSS in Elementor.

• Using custom CSS in Elementor you can override the theme’s style to implement a new style. Suppose, you love the whole look of a page that your theme provides but you want to change the layout a tiny bit in one section, then you can take the help of Elementor custom CSS to do that.

• Similarly, you can also override Elementor premade template’s design using the custom CSS code snippets.

• You can also custom design your website to look different on different devices by adding custom CSS code snippets to Elementor.

Where to put your CSS in Elementor

Elementor provides multiple ways to include custom CSS, each with its unique advantages depending on the scope of your styling needs. Here are the primary locations where you can put CSS in Elementor:

• Elementor Widgets: Add CSS using the Elementor HTML widget.
• Sections or Columns: Apply CSS to entire sections or columns in the Advanced → Custom CSS tab.
• Site-Wide CSS: Add global CSS in Elementor → Site Settings → Custom CSS (Pro only).
• WordPress Customizer: Use Appearance → Customize → Additional CSS for basic site-wide styles.
• Theme Files or External CSS: Add code to style.css or use an external .css file for advanced needs.

How to add custom CSS in Elementor: 3 Different Methods

Adding custom CSS is not at all a hard job. In fact, you can add custom CSS in Elementor using various methods. Here I am sharing with you the safest 4 ways to add Elementor custom CSS.

1️⃣ Add CSS using Elementor’s Custom CSS Code Snippets

Elementor provides you an advanced option to add custom CSS to your sections, columns as well as widgets. However, this option is only available with Elementor Pro.

To add custom CSS to any section/inner section of your Elementor website, click on the Six Dots to go to edit mode, then move to the Advanced tab ⇒ Custom CSS. Now expand the Custom CSS tab and add your custom code.

Similarly, you can add custom CSS in Elementor widgets as well. For that, click on the widget to go to edit mode, then move to the Advanced tab ⇒ Custom CSS. Now expand the Custom CSS tab and add your custom code.

2️⃣ Use HTML widget to add Elementor custom CSS

The second option that you can use to add Elementor custom CSS to your WordPress website is by using the HTML widget. For this option, just simply drag and drop the HTML widget and then add your CSS code within a Style tag. 

Note: You can add both inline and standalone CSS using the HTML tag. And don’t worry, only the styles will be reflected on the site, the raw code won’t be visible.

3️⃣ Add custom CSS in Elementor site settings

You can also add custom CSS in Elementor using the site settings option. Click on the hamburger menu on the top left corner then under settings, click on the Site settings option to get access to the global site setting options.

Now scroll down to the Custom CSS option, open the tab and add your custom styles here.

4️⃣ Add custom CSS in Elementor from WordPress customization settings

You don’t have to necessarily use the options given by Elementor to add custom CSS. You can also use the WordPress customization options to add custom CSS.

For this, go to WordPress Dashboard ⇒ Appearance ⇒ Customize. 

Now you will find many settings that you can use to customize your WordPress site. Scroll down and open the Additional CSS tab to add custom CSS to your site.

How to fix Elementor custom CSS not working Issue

Sometimes adding custom CSS in Elementor may not reflect on the site immediately due to some technical issues. Here are the steps you can adopt to solve this issue:

✅Regenerate CSS

Regenerating CSS can solve this issue. To regenerate CSS, navigate to Elementor ⇒ Tools and click on Regenerate CSS & Data and then click on Save changes.

✅ Clear Website Cache & Browser Cache

Clear the website’s cache with any WordPress cache plugins. You can also clear any server-level cache if you have one. After clearing the website cache, clear your browser cache and refresh the site to check if the CSS is working or not.

✅ Theme Incompatibility

Sometimes Elementor theme incompatibility can be the reason for custom CSS not showing up on the front end. You can try to switch to any default theme to check if the CSS is working, if the css shows up on the front end with a default theme then talk to your theme developer about the compatibility issue.

✅ Using another page builder along with Elementor

Using multiple page builders at the same time can cause your custom CSS to not work. The simple reason is that CSS from different page builders can conflict with each other and the other page builder can override the Elementor custom CSS. In such cases, you should use only the Elementor page builder.

Frequently Asked Questions

Have a look at some of the most popular questions related to Elementor custom CSS with answers:

How do I use custom CSS in Elementor?

You can add custom CSS in Elementor in 4 ways. Those ways are using HTML block, Elementor Custom CSS snippet, WordPress customize options, and Elementor Site building settings.

How can I add custom CSS to Elementor for free?

From the WordPress customization options, you can add custom CSS in Elementor website for free.

Wrapping up with Elementor custom CSS

Now you know 4 ways you can use to add custom CSS in Elementor. While you can use all of them, you should keep in the mind the CSS hierarchy of priority. For example, an inline style will always get more priority over CSS written on a page level or a website level.

So, I would recommend only using custom CSS when you know CSS very well. Otherwise, you can do more harm than good and end up spoiling your website’s look and layout.

Having said that, if you’re a CSS pro, then you have nothing to worry about, feel free to use the ways described in this blog to add your custom CSS to successfully change the look of your website.