BLACK FRIDAY: 50% OFF all Pro plans
Pro from $18 a year or $60 lifetime, no code needed
Ends Cyber Monday, 30 Nov. Lock in the price today
Get 50% Off
Pro extension

Custom CSS for Elementor Pro

Your own CSS for a single widget or container

Overview

What Custom CSS does

Custom CSS gives every widget, container, section and column a code box for CSS that applies to that one element. Write the word selector in place of the element and the rules only reach that element. The CSS becomes part of the stylesheet of the page, and the editor shows the result while you type.

Features

What it can do

  • A CSS code editor in the Advanced tab of every element.

  • The word selector stands for the element, so rules stay with that element.

  • Target inner parts and states, for example selector:hover h2.

  • The result shows in the editor preview while you type.

  • The CSS is added to the stylesheet of the page.

  • Markup, @import rules and script style values are removed before the CSS is used.

  • Only administrators and editors can add or change the CSS.

Use cases

When to use it

One-off tweaks

Add a border, a custom shadow or a transform to one element without touching the theme.

Hover states

Change the color of a heading inside a card when the card is hovered.

Inner parts

Style a part of a widget that has no control of its own in the panel.

Setup

How to set it up

A few steps from adding the extension to a finished result.

  1. Select the element, open the Advanced tab and open the section Bright: Custom CSS.

  2. Type a rule that starts with the word selector, for example selector { border: 2px solid #5b3df5; }

  3. Add more rules for inner parts or states, for example selector:hover h2 { color: #5b3df5; }

  4. Watch the preview update while you type.

  5. Publish or update the page to save the CSS.

FAQ

Questions and answers

What does selector mean?

It stands for the element you are editing. When the page stylesheet is built, the word is replaced with the unique CSS selector of that element.

Why is my CSS not saved?

Custom CSS is only saved for people WordPress trusts with unfiltered HTML, which means administrators and editors. For other users it stays exactly as it was before.

Can I load a font or stylesheet with @import?

No. @import rules are removed, along with any markup and script style values.

Can I use a dynamic tag for the CSS?

No. The code box takes typed CSS only.

Bright Addons Pro

Get Custom CSS with Bright Addons Pro

Bright Addons Pro has 77 Pro widgets plus all 48 free widgets, 10 extensions, a Theme Builder and 32 dynamic tags. From $16 a year, with a 14-day money-back guarantee.