Elementor V4 and the atomic editor: should you switch?

Elementor V4 has been the default on new installs since Elementor 4.0. I build the V4 components for Element UI, the Elementor component library, on atomic elements, so here’s my take on what V4 actually changes as of Elementor 4.3 (the short version: style once, change everywhere), what’s free and what isn’t, what’s still missing, and when I’d use it on a client site. Checked against Elementor 4.3.4, October 2026.

What actually changed from V3?

Less than you’d think in how a page is built, and a lot in how it’s styled. Elementor calls V4 the atomic editor: a new set of elements (Div Block, Flexbox, Grid, Heading, Paragraph, Button, Image and so on) that all share one Style tab. You still nest layout elements and put content inside them, much as you do with containers. What changes is where the styling lives: in reusable Classes and Variables instead of settings on every widget.

	V3 (containers and widgets)	V4 (atomic editor)
Building blocks	Flexbox and grid containers, then widgets	Div Block, Flexbox and Grid, then atomic elements
Panel tabs	Content, Style, Advanced	General and Style
Styling	Settings on each widget, plus Global Colors and Fonts	Classes and Variables, or local styles on one element
Hover and focus	Hover controls on each widget	States (hover, focus, active) on any class
Responsive	Many controls per device	Every style property per device
Markup	A wrapper div around each widget, and an inner div in boxed containers	No wrapper around elements: a Heading renders as the h1 itself
Reusable layouts	Saved templates	Components, synced everywhere they’re used

If you’d rather see the structure in a real layout first, the Elementor V4 components in Element UI are built entirely from atomic elements, laid out with V4’s Flexbox and Grid.

Why are Classes and Variables the biggest change in Elementor V4?

Because you style something once and it changes everywhere. A Class holds a whole style (padding, corners, border, background, hover state, tablet and mobile values), and a Variable holds a single value such as a brand color or font. Apply them across the site, edit them in one place, and every page updates. Try it in the demo at the top of this post.

V3 could already do part of this. Global Colors and Global Fonts are sitewide, and Site Settings sets default styles for things like buttons and headings. Everything else lived on each widget and container: change the corners on your feature cards and you changed them card by card, page by page. On a 30-page site, that’s a lot of clicking.

In V4 the card’s style is a class. Make a card class once, apply it to every card, and a redesign is one edit. Classes use Variables, so changing the brand color Variable updates every class that uses it. Each class carries its own states (hover, focus, active) and its own values for each device, and since Elementor 3.32 you can turn an element’s local styles into a reusable class the moment you need them again. The Design System panel, added in 4.1, keeps Classes and Variables in one place, and Elementor V4 Classes and Variables walks through setting one up. If you’ve written CSS, it’ll feel familiar. If you haven’t, it’s a new way of thinking.

This is also why my verdict below depends on the client. A class change is sitewide by design: exactly what you want while building, and exactly what you don’t want when a client tweaks “just this one card” and restyles every page.

How did V4 get here?

V4 spent almost a year in alpha and beta before it became the default. Release by release, from Elementor’s changelog:

Version	Released	What it added
3.29	May 2025	The first V4 alpha, opt-in only: Classes, States, the Style tab, Div Block, Flexbox and the first elements
3.31 to 3.34	Aug to Dec 2025	Variables, the Variables Manager, Tabs and Entrance Interactions
3.35	Feb 2026	Beta. Components and inline text editing
4.0	Mar 30, 2026	Stable, and on by default for new installs. Atomic Forms and Interactions (Pro), Classes and Variables synced to V3 Global Styles
4.1	May 26, 2026	The Design System panel; the class limit raised from 100 to 1,000
4.2	Jul 20, 2026	Grid, and the Atomic Loop (Pro)
4.3	Sep 22, 2026	The Elementor MCP, Accordion, Background Video, and Default Styles for HTML tags (what’s new in 4.3)
4.4	Due October 2026	On the roadmap: List, Carousel (Pro), an SVG icon library and Component Variants (Pro)

What’s free in V4, and what needs Elementor Pro?

Most of V4 is in free Elementor. Pro adds the pieces that do more than lay out and style content: creating Components, forms, loops and custom CSS.

Feature	Free Elementor	Elementor Pro
Atomic elements (Div Block, Flexbox, Grid, Heading, Paragraph, Button, Image, SVG, Video, Divider, Tabs, Accordion)	Yes	Yes
Classes, up to 1,000 per site kit	Yes	Yes
Color and font Variables	Yes	Yes
Size Variables	No	Yes
States, Entrance Interactions and Default Styles	Yes	Yes
Interactions on scroll, hover and click	No	Yes
Custom CSS on an element	No	Yes
Creating Components	No	Yes
Atomic Forms and the Atomic Loop	No	Yes

Components catch people out. They arrived in the 3.35 beta for everyone, and since 4.0 creating one needs Pro.

What’s still missing in Elementor V4?

V4 is good at structure and styling and still thin on everything else. As of 4.3:

• No WordPress menu element. This is the one that frustrates me most. There’s no atomic menu yet, so every V4 header still leans on a V3 menu widget, and it isn’t on the roadmap.
• Sticky headers don’t behave as you’d expect. You can set a header to sticky in V4, and it doesn’t actually stick when you scroll. Anyone used to V3’s sticky setting will think it’s broken. CSS sticky only holds an element inside its parent, and in a header template the parent is no taller than the header itself.
• No List or Carousel yet. Both are on the roadmap for 4.4, the Carousel as a Pro element.
• No WooCommerce elements, and none on the roadmap.
• Add-on widgets stay outside the system. Components only accept atomic elements, and Classes and Variables don’t apply to V3 widgets, so a layout built around add-on widgets gets little from V4.
• No converter. Nothing turns V3 containers or sections into atomic elements. Elementor’s own developer docs say legacy content “is not auto-migrated”.

Where V4 has caught up, it’s well ahead. Atomic Forms are the part I was most impressed with: every label, input and button is its own element, so a form can look however the design needs. Tabs and Accordion are the same. In V3, getting those to match a design usually meant custom CSS. In V4 the design limits are much higher before you ever need it. Even icons are simpler once you know where to look: how to change SVG icon color in Elementor V4 covers the SVG element.

Can you mix V3 and V4, or turn it off?

Yes, you can mix them. Elementor’s V4 FAQ says legacy widgets and atomic elements can sit on the same page, which is how you fill V4’s gaps (a V3 menu widget in a V4 header, for example). Updating an existing site to 4.0 doesn’t change it either: the atomic editor stays off until you switch it on in Elementor > Editor > Settings > Atomic Editor.

Turning it off is where people get caught. You can switch the atomic editor off at any time, but Elementor’s developer docs say atomic content stops rendering while it’s off. The data stays in the database and comes back when you switch it on again, but until then, pages built with atomic elements look wiped. Decide on a staging site, never on a live client site, and once a site has atomic content, leave V4 on.

Should you switch to Elementor V4?

For new sites it’s 50/50, and it depends on who runs the site after you. Elementor V4 is the better editor for anyone comfortable with Classes and Variables. For a client who edits pages themselves and isn’t technical, V3 is still easier. For an existing V3 site, stay put unless you’re rebuilding it anyway.

In the right hands, Classes, Variables and the higher design limits make a site faster to build and easier to keep consistent. A non-technical client doesn’t want any of that. In V3 they change a widget’s settings and see the result, with no classes to understand first. I think the two editors serve two groups of people, and will for a long time.

You’re working on	My take
A new site you’ll maintain, or a client comfortable with a design system	Build on V4, with Classes and Variables from day one, and V3 widgets only where V4 has gaps
A new site the client will edit themselves, without much technical confidence	Build on V3 with containers. It’s the friendlier editor for them
An existing V3 site	Leave it on V3. Don’t convert; consider V4 only when the site is due for a rebuild anyway
A site built around add-ons or WooCommerce	Stay on V3 for now. V4 is still too early for it
Trying V4 for the first time	Use a staging site, and see the section above before you switch it off again

If you’re weighing up V4 against the layouts you already know, Elementor sections vs containers vs atomic elements compares all three, and the Elementor flexbox containers guide covers the V3 side properly.

Where Element UI fits

Element UI covers both editors. The V3 components are built with flexbox containers for sites that stay on V3, and the V4 components are built with atomic elements for sites on the atomic editor. The V4 components use local styles only, so pasting one doesn’t add classes or variables to the site: keep the local styles, or connect your own Classes and Variables once the design system is set up. How to use the V4 components covers pasting them in.

They’re lightly styled with placeholder content, ready for your brand’s fonts, colors and images, so they’re a quick way to get a V4 page structured properly without starting from an empty Flexbox. Browse the full Elementor component library for V3 and V4 sections.