--- title: "How to Add Custom CSS to Elementor Column/Section or Widget?" url: https://theplusaddons.com/docs/custom-css-in-elementor/ date: 2024-01-05 modified: 2026-09-14 lang: en author: "Aditya Sharma" description: "Elementor's own controls cover most styling, but sooner or later you need a rule they do not expose - a gradient on one heading, spacing that only applies inside one..." image: https://theplusaddons.com/wp-content/uploads/2024/01/How-to-Add-Custom-CSS-to-Elementor-Column-or-Section-or-Widget_-1024x536.jpg word_count: 1044 --- # How to Add Custom CSS to Elementor Column/Section or Widget? ## - The Plus Addons for Elementor Pro makes Custom CSS available on a container, inner container, section, inner section, column, or any widget through the Advanced tab. - Custom CSS uses the word selector to target one element, and a rule without selector applies to the whole page. - The Plus Addons for Elementor stores the CSS in wp-content/uploads/elementor/css/post-.css after Elementor’s own rules, while the editor applies it live in the preview. - Custom CSS is Pro only, and it does not appear unless The Plus Addons for Elementor Pro is active and the Custom CSS extension is switched on under The Plus Addons > Extensions. Elementor's own controls cover most styling, but sooner or later you need a rule they do not expose - a gradient on one heading, spacing that only applies inside one card, a hover state on a single button. The Custom CSS extension in The Plus Addons for Elementor gives you a CSS box on every element so you can write that rule where it belongs. You can put CSS on a container, an inner container, a section, an inner section, a column or any widget. Write **selector** in front of a rule and it applies to that element only; leave it out and the rule applies to the whole page. ***Requirement - This extension is a part of The Plus Addons for Elementor Pro, make sure it's installed & activated to enjoy all its powers.*** [LIVE WIDGET LINK](https://theplusaddons.com/elementor-extras/custom-css/?utm_source=tpae&utm_medium=docs&utm_campaign=text) ## Before You Start - **Edition:** the Custom CSS extension is **Pro only**. The dashboard card is tagged **PRO**, and with the free plugin alone the **Custom CSS** section does not appear on any element.- **Extension to enable:** **Custom CSS**, in the **Plus Special** group under **The Plus Addons > Extensions**. It is off until you turn it on.- **Prerequisites:** Elementor (free) and The Plus Addons for Elementor, plus The Plus Addons for Elementor Pro, all installed and activated.- **Where the settings are:** the **Advanced** tab of a container, an inner container, a section, an inner section, a column or any widget. ## How to Add Custom CSS in Elementor - Go to **The Plus Addons > Extensions**, search for **Custom CSS** and turn the toggle on. The card sits in the **Plus Special** group and carries a **PRO** badge. ![The Plus Addons Extensions page with the Custom CSS card switched on in the Plus Special group](https://theplusaddons.com/wp-content/uploads/2026/09/customcss-enable.webp) - Edit the page with Elementor and select the element you want to style - a container, a section, a column or a widget.- Open the **Advanced** tab and expand the **Custom CSS** section. It sits near the top of the tab - under **Layout** on containers and widgets, and under **Advanced** on the older sections and columns. ![Elementor Advanced tab with the Custom CSS section of The Plus Addons expanded on a container](https://theplusaddons.com/wp-content/uploads/2026/09/customcss-panel.webp) - Write your CSS in the **Custom CSS** box. Use the word **selector** wherever you would normally write the element's own class. The canvas updates live, before you save. `selector h2{ background-color:#0F2C5C; color:#FFFFFF; padding:14px 20px; border-radius:6px; }` ![The same CSS in the Custom CSS box, with the canvas heading already showing the dark background and white text](https://theplusaddons.com/wp-content/uploads/2026/09/customcss-code.webp) - Update the page and open it. Only the element you edited changes; an identical element elsewhere on the page is untouched. ![Published page: the heading inside the styled container has a dark blue background and white text, while the same heading in a second container keeps the theme styling](https://theplusaddons.com/wp-content/uploads/2026/09/customcss-result.webp) ## Using It on a Widget The same **Custom CSS** section is on the **Advanced** tab of every widget, Plus Addons widgets included. Selecting a widget and writing `selector .elementor-button{ letter-spacing:1px; }` styles that one button and nothing else. ![The Custom CSS section on the Advanced tab of a Button widget, with a rule that targets the button inside it](https://theplusaddons.com/wp-content/uploads/2026/09/customcss-widget.webp) ## What selector Becomes Before the CSS is saved to the page's stylesheet, every occurrence of the word **selector** is swapped for the element's own CSS selector. | Where | What *selector* is replaced with | | ----- | -------------------------------- | | Published page | `.elementor- .elementor-element.elementor-element-` | | Elementor editor preview | `body.elementor-page- .elementor-element-` | Both point at the same element, so a rule that works in the editor normally works on the page too. The two are not identical though, so always check the published page before you call it done. ## Where Your CSS Ends Up - The CSS is appended to that page's own Elementor stylesheet, `wp-content/uploads/elementor/css/post-.css`, after Elementor's own rules. Nothing is printed inside the page's HTML.- Because it goes in that page's stylesheet, a rule written *without* **selector** applies to everything on **that page** - not to every page on your site.- In the Elementor editor the same CSS is applied straight to the preview, so you see the result while you type, before saving. ## Limitations - **The word *selector* is replaced everywhere it appears**, not only at the start of a rule. A class such as `.my-selector` is rewritten into something meaningless and that rule silently stops working. The same happens inside values and comments. Avoid the string *selector* anywhere else in the box.- **`{{WRAPPER}}` is not supported.** It is written into the stylesheet as-is, and the browser skips the broken part - in testing it then applied the rest of the rule to the whole page. Use **selector** instead.- **A missing closing brace swallows the rules after it.** There is no validation and no warning - the rest of your CSS simply never applies. Check your braces if a later rule stops working.- **Nothing is validated.** Whatever you type is written to the stylesheet. An invalid property is dropped by the browser and the rest of that rule still applies, but there is no error message to tell you.- **It is a Pro feature.** With the free plugin alone the section does not appear, and CSS saved earlier stops being applied. The text stays in the page, so it works again as soon as Pro and the extension are active.- **There is no site-wide box here.** This extension is per element. Site-wide code lives under **The Plus Addons > Extra Options > Custom CSS & JS**, which is a separate feature. ## Troubleshooting ### I see two Custom CSS sections on the Advanced tab Elementor adds its own **Custom CSS** section too. With Elementor free that one only shows a "Meet Our Custom CSS" message about Elementor Pro. The box you want is the **Custom CSS** section near the top of the tab, not the one at the bottom. ### The Custom CSS section is missing Check two things: The Plus Addons for Elementor Pro is active, and the **Custom CSS** extension is switched on under **The Plus Addons > Extensions**. If either is off, the section is not added to any element. ### My CSS shows in the editor but not on the live page Update the page so the stylesheet is written again, then reload the page. If a rule still does not apply, look for a missing closing brace above it and for the word *selector* used inside a class name or a value. ### My rule changed things I did not select A rule written without **selector** applies to the whole page. Put **selector** in front of it to limit it to the element you are editing. ### CSS I wrote earlier stopped working The extension or the Pro plugin was most likely switched off. Turn both back on - the CSS is still stored on the element and starts applying again. ## Related Docs - [Display Conditions Settings Overview](https://theplusaddons.com/docs/display-conditions-settings-overview/)- [Advanced Shadows: Settings Overview](https://theplusaddons.com/docs/advanced-shadows-settings-overview/)- [How to make any Section, Column, Container Clickable in Elementor using Wrapper Link?](https://theplusaddons.com/docs/make-elementor-container-clickable/)- [How to Add Custom CSS Preloader Animations in Elementor?](https://theplusaddons.com/docs/custom-css-preloader-animations-in-elementor/)