Editor V4 Alpha – faster, more scalable design

The main features in this version are part of Editor V4, the ongoing re-architecture of Elementor that introduces CSS-first styling, atomic design principles, and a class-driven workflow.

Note: Editor V4 is still in Alpha and should be used on test and staging sites only.

To activate Editor V4 Alpha, update to the latest Elementor version, then in the WordPress dashboard, go to Elementor > Settings > Editor V4 tab and click “Activate”.

Now is your time to give us feedback! Want to shape Editor V4? Join the conversation on GitHub

Design with depth and precision using Transform

Editor V4’s new Transform controls let you visually apply CSS transforms to any element. With Transform, you can:

  • Move, scale, rotate, and skew elements.
  • Stack and assign a different transform type per State.
  • Move and rotate along the Z-axis, with perspective controls for depth effects.
  • Easily organize and reorder transforms.

By combining transforms with States, you can design smooth, consistent micro-interactions that make interfaces feel more dynamic and engaging:

  • On hover, Scale a button slightly larger.
  • On focus, Move an input field upward.
  • On active, Rotate a card to create tactile feedback.

Create professional interactions with Transitions

The Transitions control in V4 Alpha lets you define how elements animate when moving between states (normal, hover, focus, active). Instead of changes happening instantly, Transitions make them smooth and natural.

Without transitions, hover and focus layered effects can feel abrupt and jarring. By controlling duration and properties, you can create polished micro-interactions that improve visitor experience and align with modern design standards.

With Elementor Pro, you can choose which CSS properties transition (e.g., background color, border-radius, transform, opacity). Each transition is managed in a repeater block, so you can seamlessly stack multiple transitions, reorder them, or remove them. Free users can apply a single transition that combines all style properties together.

When combined with Classes, Transform and Transitions become reusable across your site. For example, define a “primary-button” class with Transform and Transitions, then apply it everywhere you use buttons. If you later adjust the effects or duration, all instances update consistently.

[Pro] Keep your designs consistent with Size Variables

Elementor Pro now expands the Variables system with a third type: Size Variables. Alongside Color and Font Variables (introduced in 3.31), you can now store and reuse numeric size values across your site.

Consistency in spacing, typography sizing, and component dimensions is a cornerstone of modern design systems. With Size Variables, you can define values once and reuse them across multiple properties, reducing errors and making global changes effortless.

Instead of typing 12px manually into each of your paragraphs, you create a “text-size” Variable. You then connect that Variable across your text elements and later, if you decide to increase it to 16px, you simply update the Variable once and every connected element updates instantly.

Organize and scale Classes with filters and local conversion

This version introduces two related upgrades that help you manage and reuse styles more effectively: a conversion tool for turning local styles into Global Classes, and new filters inside the Class Manager to keep your library clean.

  • Convert local styles to Global Class: Take styles that were applied locally to a single element and instantly convert them into a reusable Global Class. Click the 3 dots next to the pink Local Class in the classes bar and select “Convert to global class”.
  • Class Manager filters: Accessible via a new icon next to the Class Manager search bar, filters make it easier to manage your classes. You can now identify:
    • Unused classes: Not applied to any element.
    • Empty classes: No properties set in the class.
    • Page-specific classes: Only used on the page you’re currently on.

If you’ve styled a card layout locally but realized you need to use it across multiple pages, you can now convert the styles into a new Global Class with a single click and apply it anywhere. At the same time, filters help you clean up unused or empty classes that have built up during experimentation.

[Pro] Website Templates export/import customization

Exporting and importing Website Templates allows you to reuse full sites, migrate setups between projects, and selectively bring in only what you need. With version 3.32, this tool now gives you even more customization and control options, including:

  • Theme installs: Optionally bring in supported public WordPress themes alongside your website template.
  • Experiment control: During import, you can decide whether to apply active experiments or not.
  • Custom assets: Import custom fonts, custom icons, and custom code along with your kit.
  • Refined settings panel: Global colors, fonts, theme style settings, experiments, and custom files can now be switched on or off with simple toggles.
  • Detailed content selection: Site pages, menus, post types, and taxonomies can each be toggled, with support for selecting individual pages or content groups.
  • Templates split out: Site templates, Theme Builder parts, and Global Widgets are shown separately, giving you better control over what to include.
  • Clearer version visibility: To avoid inconsistencies, you’ll receive a notice if a template was exported/imported to an incompatible Elementor version.

If you run an agency migrating multiple client sites, you can now choose to bring in only global styles alongside the theme and the specific templates you need, instead of importing everything – skipping demo content and unnecessary plugins. This gives you a cleaner, more efficient starting point, while saving valuable setup time and reducing clutter.

The depth of customization available will depend on your subscription tier.

Try out Editor V4 today!

Elementor 3.32 marks another major step forward for Editor V4 Alpha, putting professional motion design and design system consistency right into your workflow. Now is the best time to activate V4, experiment with these features, and help shape what comes next.

Update today, try out the new tools, and share your feedback with us on GitHub and in the Elementor community. The future of web creation is being built right now, together.

Note: Editor V4 is still in Alpha and should be used on test and staging sites only. To activate Editor V4 Alpha, update to the latest Elementor version, then in the WordPress dashboard, go to Elementor > Settings > Editor V4 tab and click “Activate”.