Introducing Editor V4 Alpha: The Future of Website Building with Elementor

As web design has evolved over the years, so have the demands on Web Creators, with many of you facing similar challenges:

• Consistency issues when styling multiple elements across your site
• Repetitive work updating the same styles in multiple places
• Limited responsiveness forcing you to use custom CSS or hide elements
• Slower performance with complex layouts
• Varied interfaces across different widgets

Editor V4 addresses these pain points with a powerful CSS-first framework that brings you professional-grade capabilities, without requiring you to write a single line of code.

The first alpha of Editor V4 is now available as an opt-in experience, giving you the opportunity to explore the new capabilities at your own pace. You can test the new features, provide feedback, and continue using familiar V3 features, while we continue to extend and improve the V4 experience.

To start using Editor V4 Alpha, update to Elementor 3.29, go to Elementor > Settings > Editor V4 and follow the activation steps. Please note that this is an early alpha version and it should only be used on staging or test sites, not on production.

Set styles once, and apply them anywhere with Classes

Imagine building a website with dozens of buttons that should share the same design. In the past, you’d need to style each one individually or rely on workarounds. With Editor V4’s new Classes system, you can:

• Create reusable style collections that can be applied to multiple elements
• Update styles in one place and see changes reflected everywhere
• Maintain design consistency throughout your entire site

The Classes system introduces two types of classes:

• Local Class Every element automatically receives a unique Local Class (displayed in pink) that has the highest styling priority and cannot be removed. This ensures your element-specific styles won’t be overridden by other classes.
  
• Global Classes Create and name your own classes (displayed in green) that you can apply to any element that should share those styles. When you update a Global Class, the changes apply everywhere the class is used. You can remove Global Classes from elements without deleting the class itself, making it easy to experiment with different designs.

Define interactive styles without coding using States

Bring your site to life with interactive elements using States (Pseudo-Classes). Define exactly how elements look when visitors interact with them by creating hover, focus, and active states for any class. This allows you to design engaging interactive experiences without writing a single line of code. 

To add a State, simply click the three dots next to the Class you want the state to apply to and choose between hover, active or focus. The changes you now define will be applied to the chosen state. Changes to one state won’t affect others, giving you precise control over your interactive elements. Best of all, you can apply consistent interactions across your entire site by using States with Global Classes.

Control and organize your classes with the Class Manager

The Class Manager provides a command center for maintaining consistent styling across your site by allowing you to:

• Delete or rename classes from a central location
• Change class priority and hierarchy by dragging and dropping
• See all your Global Classes in one organized view

Understand how your styles cascade with Class Indicators

When working on Classes and States, color-coded indicators appear to help you understand how styles cascade. Each color has its own function:

• Pink dots: Styles from the Local Class
• Green dots: Styles from Global Classes
• Orange dots: Conflicting styles that need attention
• Gray dots: Inherited styles from other classes

These visual cues provide instant feedback as you work, helping you understand where styles originate and how they interact.

Work consistently and streamline your workflow with the unified Style Tab

Editor V4 introduces a unified Style Tab that is shared for all elements, in comparison to the panel in V3 where each widget has its own styling options and structure.

Top advantages of the new unified Style Tab:

• Content and functionality settings remain in the General Tab
• All visual styling options are available in the Style Tab
• Learn the system once and apply it everywhere
• Access powerful styling features consistently across all elements

The unified Style Tab includes comprehensive sections for complete control:

• Layout: Define display behavior and structure
• Spacing: Set margins and padding with linked controls
• Size: Define precise width and height with constraints
• Position: Choose positioning methods with Z-Index control
• Typography: Access essential text styling options
• Background: Create rich, layered designs with unlimited potential
• Border: Apply consistent or varied border styles

Effects: Add multiple shadow layers and other effects

Improve your site performance with single div wrappers

Editor V4 introduces a significantly cleaner DOM structure that directly impacts your website’s performance. Now, each element uses just a single DIV wrapper, compared to the multiple nested DIVs in previous versions. The simplified structure produces cleaner HTML output, reduces overall page size, and decreases the complexity that browsers need to process when rendering your pages, resulting in:

• Cleaner code and faster rendering
• Improved SEO rankings
• A better experience for your visitors

While the alpha release already shows performance improvements, these benefits will become even more prominent as Editor V4 matures and more of your site uses the new, optimized elements.

Control every style property per device

Editor V4 transforms responsive design with a comprehensive approach that gives you unprecedented control, eliminating the limitation of V3 widgets, where only specific controls have responsive options.

In Editor V4 every single style property can be adjusted per device—with no exceptions. Simply switch between devices in the Top Bar to make targeted adjustments that only affect the specific screen size you’re editing. There are no exceptions. This means you can have completely different styling on mobile than on desktop without writing a single line of CSS.

The implementation is both powerful and intuitive. When you switch between devices using the Top Bar selector, you’re not just previewing how your site looks—you’re entering a device-specific editing context. Any changes you make will only generate CSS for that specific device, keeping your site’s code lean and efficient.

This comprehensive approach to responsive design eliminates countless hours of frustration and custom code, allowing you to create truly optimized experiences for every visitor, regardless of their device.

Create rich, layered designs with Style Repeaters

Editor V4 introduces Style Repeaters, allowing you to create layered structures for backgrounds and effects:

• Add multiple background images, gradients, and colors
• Create complex shadow effects with multiple layers
• Drag layers to reorder their priority
• Duplicate, hide, or delete layers with contextual actions

The enhanced gradient tool offers advanced controls, allowing you to add as many color stops as you need and position them precisely for stunning visual effects.

Style Repeaters are currently available for Backgrounds and Box Shadows, with more styling options added soon.

New Editor V4 Elements

Editor V4 Alpha introduces seven new atomic elements:

• DIV Block
• Flexbox
• Heading
• Paragraph
• Image
• Button
• SVG

Each element demonstrates the V4 philosophy—simpler markup, consistent styling patterns, and improved performance. This modular approach ensures faster and more scalable design updates across your entire site.

Many more elements will be added in future releases as Editor V4 continues to evolve.

Seamless Compatibility with V3

With over 18 million websites powered by Elementor, we’re rolling out Editor V4 in a phased approach. This allows us to gather feedback and continuously improve the experience before it becomes the default Editor.

Throughout this journey, we’ll be adding new features, refining existing ones, and making enhancements based on your feedback to ensure Editor V4 meets your needs.

However, we understand that transitioning to a new system takes time, which is why Editor V4 currently works seamlessly alongside V3:

• Use V3 and V4 Elements side by side on the same page
• Continue using familiar V3 widgets while gradually exploring V4 capabilities
• V3 widgets remain fully functional and can be placed inside V4 layouts (and vice versa)
• No disruption to your existing workflows

While V3 widgets won’t include V4-specific features like Classes and the unified Style Tab, they can still coexist on the same page, giving you time to explore and get used to Editor V4 at your own pace.

Embark on the V4 journey

Ready to explore the future of Elementor? Learn how to get started with Editor V4 Alpha here.

Important Note: The alpha is designed for exploration and testing. We recommend using it on staging or test sites only, not production sites.

This alpha version is just the beginning. Throughout the coming months, we’ll be introducing more features, enhancing existing ones, and incorporating your feedback to make Editor V4 the most powerful and intuitive website builder there is.

In the upcoming releases you can expect – Variables, Custom Attributes, CSS IDs and so much more!

We’d love to hear your thoughts as you explore Editor V4 Alpha. Your feedback will help shape the future of Elementor and ensure we’re building the tools you need to create exceptional websites.