← All guides

Elementor custom CSS without Elementor Pro

In Elementor, the Custom CSS field — on a widget, a container or the whole page — is part of Elementor Pro. On the free version you can still style one element or one page exactly the way you want: you write the CSS somewhere else and point it at the right element. It takes three steps — give the element a class, scope the rule to its page, and keep the CSS in a place where it does not get lost.

1. Give the element a class

Every widget and container in free Elementor has an Advanced tab with two fields that matter here: CSS ID and CSS Classes. Type a name into CSS Classes — promo-card, without the leading dot — and the element's wrapper carries that class on the page.

A class you chose beats the ones Elementor generates. Each element also gets a class like elementor-element-3f2a1b7, but that code changes when the element is copied or rebuilt, and a rule written against it quietly stops matching.

2. Scope the rule to one page

The same class can turn up on more than one page. To keep a rule to one, prefix it with something only that page has. Elementor wraps a page's content in an element with the class elementor-123, where 123 is the page's ID — the number after post= in the address bar while you edit the page. WordPress also adds page-id-123 to the page's <body> (and postid-123 on a post).

/* Only on page 123 */
.elementor-123 .promo-card {
	border-radius: 16px;
	box-shadow: 0 12px 32px rgb(0 0 0 / 12%);
	transition: transform 0.2s ease;
}

.elementor-123 .promo-card:hover {
	transform: translateY(-4px);
}

/* Elementor's default mobile breakpoint is 767px */
@media (max-width: 767px) {
	.elementor-123 .promo-card {
		border-radius: 12px;
	}
}

One difference from Elementor Pro's field: its selector keyword only works inside that field. Everywhere else you write the full selector, as above.

3. Put the CSS somewhere it stays

Three places work with free Elementor, and they are not equal.

An HTML widget with a <style> block on the page. It works and needs nothing else. But the CSS then lives inside the page's content: it is deleted with the widget, copied with the section, printed in the middle of the page, and anyone rearranging the layout can break it without noticing.

Appearance → Customize → Additional CSS. WordPress' own box. Fine for a few rules, but the Customizer shows no history you can go back to, and WordPress saves it per theme — switch themes and it stays behind.

A code plugin. StyleScript, which is free, keeps your CSS apart from the theme and from Elementor's data, prints it at the end of the page head, previews your unsaved CSS on the real site (only you see it), and keeps a history of your saves. With page-scoped selectors like the ones above, one site-wide CSS box styles any number of single pages, each rule only where it belongs. Its Insert a media query for a breakpoint button offers Elementor's own breakpoints, read from your site's settings, so your media queries match the devices in Elementor's editor.

When your rule still loses

Elementor writes the styles you set in its panel with long selectors that include the element's generated class, such as .elementor-123 .elementor-element.elementor-element-3f2a1b7 .elementor-heading-title. A shorter selector loses to that, even when it comes later.

Two habits avoid the fight:

• Change in the panel what the panel can change. Colours, spacing and typography belong there, and your CSS will not have to compete with them.
• Use CSS for what the panel cannot do: hover and focus states, ::before and ::after, clip-path, grid tweaks, animations. Rules like these rarely collide with Elementor's, and your class plus the page prefix is enough.

If a rule really has to override a panel setting, add specificity first — repeat the page class, or add the widget's own class such as .elementor-widget-heading — before you reach for !important.

CSS per page, without the prefixes

Prefixes work, but on a site with many landing pages the site-wide box slowly fills with rules for single pages. StyleScript Pro adds a StyleScript — code for this page box to every page, post and WooCommerce product, in WordPress' editor with the other boxes below the content: CSS, JavaScript and header/footer code for that page only, printed there and nowhere else, after the site-wide code. It can also leave the site-wide CSS out of that page, and Preview this page shows the result before you save. For a page built with Elementor, open it with Edit rather than Edit with Elementor to reach the box.