Custom-CSS

Estimated reading: 4 minutes 3 views

Add your own CSS to one element, right inside the Elementor editor. Change colors, spacing, hover effects and more. No theme file and no extra plugin needed.

WORKS ON

Any V4 element

EDITOR

Code box with colors

PLAN

Free

BEFORE YOU START

Requirement

ELEMENTOR

V4 Atomic

ANIMATION ADDONS

Free

Tip: Install and activate Animation Addons for Elementor before you start. Pro is not needed.

STEP 1

Enable the Extension

Turn on the extension from your dashboard. You only need to do this once.

From your WordPress Dashboard, go to Animation Addon > Extensions.
Open the Elementor V4 (Atomic) tab.
Under Utility Extensions, turn on Custom CSS.
Click Save Settings.

STEP 2

Add Your CSS

Now write CSS for an element in the Elementor editor.

Open your page with the Elementor Editor.
Select any V4 element, for example a Heading.
In the General tab, open the Custom CSS section.
Turn on Enable Custom CSS.
Write your CSS in the code box. Start with the word selector.

Note: Look for the Custom CSS section in the General tab. It has the orange Animation Addons icon.

RESULT

Final Result

Note: The CSS only changes this one heading. Other elements on the page stay the same.

HOW IT WORKS

The Word “selector”

Use the word selector to point at your element. Animation Addons changes it into the exact address of your element, so your CSS only affects this element.

selector {
  color: #7c3aed;
  letter-spacing: 2px;
}

You can add hover and other states after the word selector.

selector:hover {
  color: #f05a35;
}

Note: Do not use the word selector anywhere else in your CSS, for example inside a class name. Every selector word is replaced.

Tip: If a style does not change, add !important. Elementor widgets have their own default styles, and they can be stronger than your CSS. Example: color: #7c3aed !important;

SETTINGS

Settings

Enable Custom CSS

Default: OffTurn your CSS on or off for this element. You can set it per screen size.

Custom CSS

The code box where you write your CSS. It colors your code so it is easy to read. You can write different CSS for each screen size.

PER DEVICE

Different CSS Per Screen Size

Enable Custom CSS and your CSS can change per screen size. Use the Desktop, Tablet and Mobile buttons at the top of the editor.

Write a big font size for desktop.
Write a smaller font size for mobile.

TRY THIS

Quick Recipes

Copy these into the Custom CSS box.

Lift on hover

selector {
  transition: transform 0.3s ease;
}
selector:hover {
  transform: translateY(-4px);
}

Gradient text

selector {
  background: linear-gradient(90deg, #f05a35, #7c3aed);
  -webkit-background-clip: text;
  color: transparent !important;
}

NEED HELP?

Troubleshooting

I do not see the Custom CSS section

Check that the extension is on. Go to Animation Addon > Extensions > Elementor V4 (Atomic) and turn on Custom CSS. Then reload the editor. Select a V4 element and open the General tab.

My style does not change

Make sure Enable Custom CSS is on and the page is saved. Start your rule with the word selector. Then add !important to the lines that do not change, like color or font-size.

I see the old style for a moment

Your CSS is added by a small script after the page loads. So you may see the normal style for a very short time before your CSS applies.

You Did It

Your element now has its own custom style. If you face any problem, please contact our support team. We are happy to help.