Editor V4 Alpha: more power, more control

Editor V4 is more than just an update – it’s a re-engineered, CSS-first editing experience built for professional Web Creators. Designed from the ground up to deliver better performance, smarter workflows, and professional-grade styling systems, Editor V4 is a new era of web creation with Elementor.

Introduced as part of version 3.29, the first Alpha of Editor V4 brought improved performance, reusable Classes, unified controls and more. Now, with version 3.30, Editor V4 Alpha becomes even more powerful – adding clarity, control, and efficiency to many aspects of the workflow.

To enable Editor V4 Alpha: Go to the WordPress Dashboard → Elementor → Settings → Editor V4 and activate.
* Note: V4 Alpha should be used on test and staging environments only.

Define, organize, and target with user-defined Class names

In the first version of Editor V4 Alpha, class names were auto-generated in the code output, making it difficult for you to recognize your intended classes in browser dev tools and possibly breaking compatibility with external tools. Now, class names appear in your code exactly as you define them.

When you assign a class like primary-btn, that’s exactly what will appear in the HTML, so you can:

  • Target it easily in your own CSS or JS
  • Integrate better with external tools
  • Debug complex layouts
  • Create cleaner, predictable code output

Protect your designs and empower collaborators with Class permissions

As websites grow, so do teams. That’s why Editor V4 introduces role-based permissions for Class management, giving WordPress Admins full control over design systems, while still enabling content creators to use Classes. Here’s how it works:

  • Admins can create, edit, and update Global Classes across the site, and make changes in the Class Manager.
  • Editors, Authors, and Store Managers can:
    • Apply existing Global Classes
    • Modify Local Classes
    • Cannot edit or rename Global Classes
    • Cannot access the Class Manager

Even better, the interface adapts based on the user’s role:

  • Disabled fields prevent unauthorized changes
  • Clear tooltips explain why controls are locked
  • The Class Manager is hidden entirely for non-admins

Instantly understand styling with indications and popovers

Understand exactly where each style is coming from with a single click. Whether it’s from a Local Class, Global Class, inherited, or overridden – Editor V4’s visual indicators help you identify and troubleshoot styles faster, especially in complex layouts.

You’ll see colored dots next to any styled control:

  • ✅ Green = Global Class
  • 🩷 Pink = Local Class
  • 🔘 Grey = Inherited styles
  • 🟧 Orange = Conflicts

Clicking a dot opens the Indications Popover, which reveals:

  • The class name applying the style
  • The breakpoint it applies to
  • The interaction state (e.g. hover, active)
  • Whether it’s being overridden by another style

These popovers eliminate guesswork and make it easier to debug, fine-tune, and gain clarity.

You’ll also see group-level indicators on collapsed style groups like Typography or Border, allowing you to scan for class-applied styles without opening every style section.

Pick up exactly where you left off with the Context-Aware Editing Panel

In V3, switching between Elements resets your panel: tabs jump back to General, sections collapse, and in the previous V4 version – class context would revert.

Now, Editor V4 remembers your full editing state per Element, including:

  • Your current tab (General or Style)
  • Which class you were editing
  • Which control group was expanded

So if you’re adjusting an image and jump to a Heading to cross-check something, you’ll come right back to the exact field you were editing. It’s a small UX change that adds up to a huge improvement in your every-day focus and speed.

Speed up every value change with Smart Unit Typing

Now you can type values and units together directly into any property with no dropdowns required. Whether you’re adding 20px, 1.5em, 75%, or using relative units, Editor V4 handles it all.

Even better:

  • Invalid entries like 30abc automatically revert to the last valid value
  • The interaction is smooth, intuitive, and keyboard-first

It’s an impactful upgrade, especially when styling responsively across multiple breakpoints.

Add videos with performance in mind: the new V4 YouTube Element

Editor V4 is expanding Element by Element. Version 3.30 introduces a YouTube Element, purpose-built for the Editor V4 architecture.

The new Youtube Element gives you:

  • Familiar controls: autoplay, loop, mute, aspect ratio, start/end time
  • A cleaner UI with only what you need
  • Faster rendering and better performance with modern JS handlers
  • Proper unmounting of DOM elements to keep your frontend lean

Support for V4 features – Classes, States, the unified Style Tab and fully responsive controls

Your essential Editor tools – now in V4

To get Editor V4 ready for daily use, we’ve added a long list of essential V3 capabilities, re-engineered to fit the new framework:

  • Custom units: Use calc(), clamp(), or any unit you prefer for precision layouts.
  • ID: Assign unique IDs for targeting or accessibility purposes.
  • Display none: Hide elements responsively in just a few clicks.
  • Anchor offset: Fix anchor link scroll behavior under sticky headers.
  • Text columns: Add newspaper-style column layouts to text widgets.
  • Aspect ratio: Maintain image and video proportions across devices.
  • Object fit: Choose how media fills or fits its container.
  • Clear icons: Clear properties with a single click. Ideal for fast prototyping or reverting experiments.

Shaping the future of web creation

Whether you’re building complex, reusable design systems, collaborating across teams, or just looking to move faster and cleaner, Editor V4 Alpha is now stronger for testing and preparing your next-gen workflows.

To enable Editor V4 Alpha: Go to the WordPress Dashboard → Elementor → Settings → Editor V4 and click activate.

*Editor V4 is still in Alpha and under active development. We encourage you to test it on test or staging environments and share your feedback with us in the comments.

Save full website designs to the cloud and reuse them anywhere

Cloud Templates were introduced to Elementor Pro users in version 3.29, allowing you to save sections and pages to your Elementor account and reuse them across any of your sites. In version 3.30, this powerful feature is extended to include complete Website Templates.

Now, you can save and apply entire websites, including multiple pages, styles, site settings, media, and layout configurations – directly from the cloud.

This is a game-changer for agencies that want to standardize client setups, freelancers reusing proven layouts, and teams working across multiple projects.

Your saved Website Templates live in a centralized library and can be applied to any Pro-connected site in just a few clicks, giving you a massive head start without sacrificing control or customization.

Important note – templates that you save to the cloud are connected to your user ID, and not to the website or subscription. Meaning only when logged into your user account, the templates are visible.

Save and apply Website Templates:
Go to your WP Dashboard → Tools → click the Website Templates tab > Export the website , and choose Add to Library. Then, from any site, open My Website Templates library and apply your saved template instantly.

Try Elementor 3.30 today

This release marks a major step forward for Editor V4 and a more scalable, accessible, and professional future for all Elementor users.

Update today and explore the new tools designed to elevate your workflow, optimize performance, and help you build with more clarity and control.