Take full control with Editor V4 Alpha

We’re excited to introduce another Editor V4 Alpha update that continues to push boundaries with improved workflows, scalable design systems, and new styling capabilities. From Variables to Filters and more, now Editor V4 Alpha gives you even more control and clarity.

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

Build consistent design systems with color & font Variables

Designing at scale becomes significantly easier with the introduction of Variables. Rather than assigning styles manually element by element, Variables allow you to define once and apply consistently across your site.

Combined with Global Classes, this feature allows for a modular, maintainable workflow that saves time and ensures visual consistency. Variables define the value, while Classes define the scope of where those Variable values, as well as other styles, are applied.

Let’s say you use the same colors and fonts across multiple Global Classes and across different sections of your site. Instead of manually setting the background, text color, and font family each time, you connect those properties to Variables like primary-color, button-font, and accent-text. Now, if your brand palette changes, a single Variable update will cascade throughout every component styled across all those Classes and Elements.

Variables can be fully controlled by Admins: they can create, edit, and manage all Variables, just like Global Classes. Non-admins (Editors, Authors, Contributors, Store Managers) can apply existing Variables to Elements but cannot edit them.

Apply layered visual effects with Filters

Elementor 3.31 brings full support for Filters directly into Editor V4. These filters empower you to enhance your site’s visual aesthetics without writing any code. 

In total there are 9 Filters to choose from and combine:

• Blur
• Brightness
• Contrast
• Hue Rotate
• Saturate
• Grayscale
• Invert
• Sepia
• Drop shadow

These filters are managed through an intuitive repeater interface, enabling you to stack multiple filters, preview changes in real-time, and reorder or remove filters as needed. Each filter adapts to its context with unit-specific controls like percentages or pixels, and integrates seamlessly with Variables, Classes, and States. This gives designers and developers fine-grained control over visual expression without needing custom CSS.

Create advanced effects like glassmorphism with Backdrop Filters

Backdrop Filters allow you to apply styling effects to the background behind an element, not just the element itself. This opens the door to contemporary design techniques like glassmorphism. It’s now easier than ever to create layered, transparent containers that maintain readability and elegance, even over busy backgrounds.

When combined with transparency and layered containers, you can now:

• Blur what’s behind a semi-transparent header
• Create readable panels over videos, images, or busy backgrounds
• Achieve a modern, refined UI aesthetic with zero custom CSS

Just like with Filters, you can choose from 9 different effects like blur, brightness, grayscale, or drop shadow, stack multiple Backdrop Filters and apply them into your V4 classes.Tip: To use Backdrop Filters effectively, the element must have a transparent background.

Manage classes smarter with usage insights and locator tools

The updated Class Manager helps you maintain control over your design system. Now, each Global Class shows a usage count, so you know how often it’s being used across your site. Clicking on this count opens the Locator Panel, where you can view which pages the class appears on and how frequently. This visibility is especially useful for large sites or collaborative projects where hundreds of utility or atomic classes are in play.

You can even search through your class list, helping you identify redundant styles, rename classes thoughtfully, and refactor your system with confidence.

Understand styling at a glance with inherited values

One of the challenges of responsive design and class-based styling is understanding where a given value is coming from. Editor V4 Alpha introduces visual indicators for inherited styles. These muted placeholders appear within the control panels, showing you at a glance whether a style was inherited from a Class, a base style, or a different responsive breakpoint.

The inherited value is still fully editable but the muted state improves the editing experience and helps prevent unintentional overrides, making it easier to keep your styles clean and intentional.

[Pro] Add semantic markup with Attributes

Advanced users can now take full control of their element markup with the Attributes Repeater. This feature allows you to add any number of HTML attributes to elements—such as aria-* for accessibility, data-* for analytics, or role for semantic clarity.

The Attributes panel is available to Elementor Pro users with an Advanced plan or higher and is an essential tool whether you’re optimizing markup for performance and compliance or creating more accessible frameworks.

Add clean visual structure with the new Divider Element

Often overlooked, dividers play a crucial role in layout design. The new Divider Element in Editor V4 is a semantic <hr> that introduces clean separation between sections with no unnecessary markup. It’s responsive, easily stylable via Classes, and ideal for anyone building atomic or utility-based design systems. This seemingly small update contributes greatly to a leaner, more maintainable DOM.

Try Editor V4 today

Whether you’re a designer or a developer, this update provides the tools you need to work faster, maintain consistency, and deliver better user experiences. To activate Editor V4 Alpha, update to the latest Elementor version, then navigate to the WordPress dashboard > Elementor > Settings > Editor V4 tab and click “Activate”.

Now’s the time to explore what Editor V4 can do for your workflow. Dive in, experiment, and help shape the future of Elementor.