How to Add Custom CSS to Elementor Column/Section or Widget?

Updated onApril 10, 2026By

Key Takeaways

  • The Plus Addons for Elementor allows users to add custom CSS to specific sections, inner sections, containers, and elements within Elementor.
  • Custom CSS is a premium feature that requires the PRO version of The Plus Addons for Elementor to be activated.
  • Users can write global CSS rules or use the 'selector' prefix to target specific content within a section.
Table Of Content

Do you want to customize the look and feel of your Elementor website beyond the options provided by the widgets? This is where custom CSS comes into play, which can help you customize and make specific design changes to your Elementor website.

With the Custom CSS extension from The Plus Addons for Elementor, you can easily add custom CSS to target specific sections, inner sections, containers, inner containers, and elements within those in Elementor.

Required Setup

How to Activate the Custom CSS Extension?

Go to 

  • The Plus Addons → Extensions 
  • Search the Extension name and turn on the toggle.

Tpae custom css activate how to add custom css to elementor column/section or widget? From the plus addons for elementor

Note: If you want to add custom CSS to columns of the old Elementor Sections you need to activate the Column Custom CSS extension.

Key Features

  • Target specific section – You can easily target a specific section or content within it.

How to Add Custom CSS in Elementor?

Select a section, inner section, container, or inner container and follow the steps –   

1. Go to Advanced > Plus Extras: Custom CSS.

2. Then in the Custom CSS section, you can write your custom CSS.

You can write global CSS rules that can affect the entire site or you can use the “selector” prefix to target the section itself or the content within the section only. 

Tpae custom css selector how to add custom css to elementor column/section or widget? From the plus addons for elementor

For example, if you only want to change the background color of H2 in the section you can write the CSS like this

selector h2{
background-color:red;
}

This will only change the background color of H2 in that section. 

Following this process, you can target and customize the style of any widget.

For more in-depth guidance on using CSS in Elementor for free.<- Click here to learn more.

About the Author

Photo of Aditya Sharma CMO of The Plus Addons for Elementor
CMO · The Plus Addons for Elementor · 10 years experience

He has spent years in the WordPress ecosystem building, breaking, and optimizing sites until they actually perform. He works at the intersection of speed, growth, and usability, helping creators ship websites that load fast and convert. An active WordPress community contributor sharing through tools, tutorials, and direct collaboration. Tested practice, not theory.

WordPressElementorn8nAIClaudeAutomationServer
LinkedIn X GitHub YouTube Website
Get Instant Answers to all your questions about The Plus Addons for Elementor, trained on 1000+ Docs and Videos

Related Frequently Asked Questions

What should I do if the Custom CSS extension is not activating?

If the Custom CSS extension isn't activating, first ensure that you have both the Elementor FREE Plugin and The Plus Addons for Elementor installed and activated. This feature requires the PRO version of The Plus Addons for Elementor. Navigate to The Plus Addons u2192 Extensions, search for Custom CSS, and toggle it on. If issues persist, check for plugin conflicts or updates.

What are the best practices for writing custom CSS in Elementor?

When writing custom CSS in Elementor, it's best to use the selector prefix to ensure your styles apply only to specific sections or elements. This prevents unintended global changes. For example, using `selector h2 { background-color: red; }` confines the style to H2 elements in the targeted section. This approach helps maintain control over your design and avoids conflicts with other styles.

Does the Custom CSS feature work with older Elementor sections?

To add custom CSS to columns of older Elementor sections, you need to activate the Column Custom CSS extension specifically. This extension allows you to target and customize styles for older sections, ensuring you can apply your desired CSS even if you're using legacy layouts.

Last reviewed: April 10, 2026

Related Docs