How To Add Custom CSS to Elementor (5 Methods)

Elementor is a powerful page builder that allows you to design stunning websites without coding. Knwoing How To Add Custom CSS to Elementor Website will make your work more easier and also reduce the numbers of plugins you install to your wordpress website.

However, sometimes you may need to apply custom CSS to Elementor to achieve specific styling beyond Elementor’s built-in options. In this guide, we’ll explore five methods to add custom CSS to Elementor for full design control.

Why Add Custom CSS in Elementor?

Adding custom CSS helps you:

• Fine-tune design elements beyond Elementor’s settings.
• Ensure a consistent design across different sections.
• Improve user experience with animations and effects.
• Override theme styles that interfere with your layout.

Now, let’s dive into the five different ways to add custom CSS in Elementor.

READ ALSO: HOW TO SECURE YOUR WEBSITE FROM HACKERS

Method 1: Using Elementor’s Built-in Custom CSS Feature (Pro Only)

If you’re using Elementor Pro, the easiest way to add custom CSS is directly within Elementor’s interface.

Steps:

1. Open the page in Elementor Editor.
2. Select the Widget, Section, or Column where you want to apply CSS.
3. Go to the Advanced tab.
4. Scroll down to the Custom CSS section.
5. Enter your CSS code, like:
   

   selector {
       background-color: #ff6600;
       border-radius: 10px;
   }
   

   
   
6. Click Update to save changes.

✅ Pros:

• Simple and direct.
• You can target specific elements using selector.

❌ Cons:

• Available only in Elementor Pro.

Method 2: Using the WordPress Customizer (Works for Free Version)

For users of Elementor Free, you can add global custom CSS via the WordPress Customizer.

Steps:

1. In your WordPress Dashboard, go to Appearance > Customize.
2. Select Additional CSS.
3. Add your CSS code, such as:
   

   .elementor-button {
       background: #32de84 !important;
       font-size: 18px;
   }
   

   
   
4. Click Publish to apply the changes.

✅ Pros:

• Works in both Elementor Free & Pro.
• Global application across the entire website.

❌ Cons:

• Not specific to a single Elementor section.

Method 3: Adding Custom CSS to a WordPress Child Theme

If you want to apply custom CSS globally and maintain changes after theme updates, adding CSS to a child theme is a great option.

Steps:

1. In WordPress Dashboard, go to Appearance > Theme Editor.
2. Select style.css (Make sure you’re editing the child theme).
3. Add your CSS code at the end of the file:
   

   .elementor-widget-heading h2 {
       color: #ff4500;
       text-transform: uppercase;
   }
   

   
   
4. Click Update File.

✅ Pros:

• Ideal for global customizations.
• Preserves changes during theme updates.

❌ Cons:

• Requires access to the theme editor.

Method 4: Using the Simple Custom CSS Plugin

If you don’t want to edit theme files, you can use a Custom CSS plugin.

Recommended Plugin: Simple Custom CSS

Steps:

1. Install and activate the Simple Custom CSS Plugin.
2. Go to Appearance > Custom CSS.
3. Add your CSS code and click Save.

✅ Pros:

• Easy to manage custom CSS without modifying theme files.

❌ Cons:

• Can slightly impact site performance if excessive CSS is added.

Method 5: Adding Inline CSS in Elementor Widgets

If you want to style a specific widget, you can add inline CSS inside HTML widgets.

Steps:

1. Drag and drop the HTML Widget into your page.
2. Enter the following CSS inside <style> tags:
   

   <style>
       .my-custom-class {
           color: #4fffb0;
           font-weight: bold;
       }
   </style>
   

   
   
3. Add the class name my-custom-class to the widget’s Advanced > CSS Classes field.
4. Click Update.

✅ Pros:

• Allows quick, widget-specific styling.

❌ Cons:

• Not ideal for global styling.

Final Thoughts

Adding custom CSS in Elementor gives you full control over your website design. Here’s a quick recap of the best method for your needs:

Method	Best For	Elementor Free or Pro?
Elementor Custom CSS	Specific sections	Pro Only
WordPress Customizer	Global styles	Free & Pro
Child Theme CSS	Permanent site-wide changes	Free & Pro
CSS Plugin	Beginners who don’t want coding	Free & Pro
Inline CSS	Single widgets	Free & Pro

Choose the method that suits your project and enhance your Elementor site with custom styles!

FAQs

1. Can I add CSS in Elementor Free?

Yes, you can use the WordPress Customizer, child themes, CSS plugins, or inline styles.

2. Where is the Elementor Custom CSS section?

In Elementor Pro, go to Advanced > Custom CSS on any section or widget.

3. What if my CSS is not working in Elementor?

Try adding !important to your CSS rules, clear cache, and check for plugin conflicts.

Got questions? Let us know in the comments below! 🚀