Editor V4: more flexibility and control!

Editor V4 represents a new CSS-first, class-driven architecture that reimagines how design systems work inside Elementor. It’s built to scale—from single websites to global brand systems—and to ensure that styling remains predictable, reusable, and lightweight.

Currently, Editor V4 is for testing on staging environments only. Soon, after the Alpha is stable, a production-ready Beta version will be rolled out, followed by the full release.

To activate Editor V4 Alpha:

  1. Update to the latest version of Elementor.
  2. Go to Elementor → Settings → Editor V4 in your WordPress dashboard.
  3. Click activate.

Manage design systems with the Variables Manager

Editor V4’s new Variables Manager introduces a centralized workspace to view, create, and manage all your design variables from one place. It transforms how you organize and maintain your design system, giving you full control over every color, typography, and size variable across your website.

Instead of managing Variables separately in each widget or control, the Variables Manager gives you an overview of all existing design tokens and lets you update them in real time. You can edit, search or delete Variables directly within the panel, with live feedback and validation. 

Main highlights of the Variables Manager:

  • Centralized management: View and edit all Variables (colors, typography, sizes) in a single structured panel.
  • Seamless creation: Add new Variables directly from the panel to speed up design iteration.
  • Real-time updates: See changes reflected immediately across the canvas.
  • Safe editing: Validation ensures Variable names stay unique and correctly formatted.
  • Search options: Quickly find variables by name or type using the built-in search bar.

For system-driven creators, this is a major leap toward scalable, token-based design inside the Editor, bridging design systems and live websites with full transparency.

Write custom CSS with full control [Pro]

Custom CSS has long been a favorite tool for advanced creators who want to push visuals beyond preset controls. With 3.33, it’s been completely reengineered for V4 and is now available directly on V4 Elements.

That means the CSS you write is automatically contained within the element, with no more style leakage or unintended overrides. Combine that with the power of Classes and States, and you can build micro‑interactions or design flourishes right inside the Style panel.

Main highlights of the V4 Custom CSS control:

  • Lightweight and predictable: Built into V4’s Atomic Elements and new architecture for faster rendering and better performance.
  • Element-level isolation: Custom CSS applies only to the selected Element, with no global overrides or conflicts.
  • Classes support: Add Custom CSS to your Global Classes and apply them throughout multiple Elements or pages. You can also choose to keep your code local to a single Element.
  • State-specific styling: Create Custom CSS for hover, focus, and active states directly in the Style panel.
  • Developer-friendly editor: Features autocomplete, comments, and an expandable/scrollable input field for long code blocks.
  • Full responsive control: Define different CSS rules for Desktop, Tablet, and Mobile.
  • Real-time preview: See code updates reflected instantly in the canvas.

You can even combine Custom CSS with V4’s new Background Clipping feature. For example, set a large background image or gradient on a Heading, use background clipping (clip to text), and animate the background position with a keyframe code. As the background shifts behind the clipped text, it creates lightweight motion that adds an impressive layer of movement and interaction to your page.

Available for Elementor Pro users with an Advanced plan or higher.

Add depth and creative effects with Blend Mode

The new Blend Mode control lets you define how an Element visually interacts with what’s behind it, introducing a new layer of creative flexibility directly in the Editor. By applying native CSS blend modes, you can create subtle overlays, increase contrast, or craft striking layered effects that give your designs more visual depth – no CSS or external tools required. 

Available Blend modes: Normal, Multiply, Screen, Overlay, Darken, Lighten, Color Dodge, Color Burn, Saturation, Color, Difference, Exclusion, Hue, Luminosity, Soft Light, and Hard Light.

Whether you’re enhancing background images, creating standout text effects, or unifying color palettes, Blend Modes let you design with a visual finesse that was previously possible only through code or image editors.

Keep designs intact with media import/export options for Website Templates [Pro]

For agencies or freelancers sharing complete Website Templates, Elementor 3.33 adds new media handling preferences to streamline how images and assets are stored and transferred.

You can now pick between:

  • Link to media: Stores only the media URLs, keeping the export file small. However, linked files will only load while the original site remains online.
  • Save media to the cloud: Packages all images and files together with the template and saves them directly to the cloud. This keeps your design fully intact across imports, even if the origin site/files are unavailable, because the media comes from your cloud.

Whether you’re building reusable layouts, collaborating across teams, or maintaining client projects, you now have complete control over how your media travels with your templates. Available for Elementor Pro users with an Advanced plan or higher.

Navigate faster with the refreshed Top Bar layout

As part of this version, the Top Bar layout has been refreshed to make navigation faster, cleaner, and more intuitive. The main changes are:

  • Global and site-level settings are now grouped as Site Settings inside the Elementor (E) menu.
  • Notes and Help Center moved to the Elementor menu.
  • Page Settings and History are surfaced directly at the left side of the Top Bar.
  • Structure moved to a more central location at the right side of the Top Bar, next to Preview.

It’s a small change that makes a big difference—especially for professionals spending hours in the Editor every day.

Try out Editor V4 today!

Elementor 3.33 is another step toward the next-generation Editor experience. 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.