✅ 🔥 Elementor v3.30 Beta Release 🔥

[avivu]

===========

Beta Version Updates - Please Read Below!

===========

Hey Beta testers, 👋

We're excited to announce that Elementor 3.30 Beta is now live! Expanding the foundation of Editor V4 Alpha, introduced in the previous version (v3.29), this release takes V4 to the next level with important new features, including familiar and essential features from V3.

As part of this version, we're broadening Cloud Templates with full Website Templates (kits), and delivering targeted accessibility improvements across the Editor.

Make an impact by testing Elementor 3.30 beta and sharing your impressions on these additions:

• Expanding Editor V4 capabilities - Class names in the code, indication popovers, a new YouTube Element, custom units and so much more!
• [Pro] Full Website Templates in the Cloud - Reuse full website designs across any website
• Accessibility enhancements - Inclusive improvements across elements
• & more!

Looking forward to your thoughts and feedback on this exciting update!

 

Editor V4 Alpha: building the future of web creation

Elementor 3.30 continues the V4 journey that began in the previous version. Editor V4 Alpha represents a complete reimagining of Elementor's core architecture, delivering CSS-first styling and atomic design principles that put you in complete control.

This release represents a significant step forward in Editor V4's evolution - adding advanced styling capabilities, contextual editing, and adding professional-grade features you rely on.

How to activate Editor V4 Alpha

Editor V4 Alpha remains an opt-in experience that works alongside V3. To activate V4 features:

1. Update to version 3.30
2. Go to WordPress > Elementor > Settings > Editor V4
3. Click "Activate"
4. You can return to the same place to deactivate V4 if necessary

Important: Editor V4 Alpha is designed for exploration and feedback in controlled test environments, not yet for production. Container, Nested Elements, and Top Bar will automatically activate along with V4. For optimal results, V4 works best with the Hello Theme.

 

What's new in Editor V4 Alpha: enhanced control and accelerated workflows

Building on 3.29's foundation of Classes, States, and Atomic Elements, version 3.30 introduces multiple enhancements that address key workflow friction points and expand Editor V4's capabilities.

 

Gain control with user-defined class names

In the first Editor V4 Alpha release, 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. Meaning if you create a new “primary-btn” class, you will see the exact same name in the code as well. Whether you're targeting elements with custom CSS, integrating with external tools, or debugging complex layouts, your class naming intentions are preserved throughout the entire development process.

How to Test It:

1. Go to the Style tab of any element and locate the Classes field.
2. Type a custom class name exactly as you want it to appear in the HTML.
3. Press Enter to apply to the class.
4. Open the browser’s Developer Tools and inspect the element.
5. Confirm that the class appears exactly as typed, without a dynamic hash or prefix.
6. Add a second class to test multiple classes and confirm both appear in the DOM.
7. Use the three-dot menu next to the tag to rename the class, and verify the changes in the code output.

 

Collaborate confidently with role-based class permissions

Editor V4's styling system now includes role-based permissions that protect global design systems, while maintaining creative flexibility for content creators.

Admins get complete control over styling settings: full access to the Class Manager, creating and managing global classes, and maintaining design system integrity across the site.

Content creators (Editors, Authors, Contributors, Store Managers) receive focused styling capabilities: full Style tab access, applying existing classes to elements, and editing Local Classes and States. They cannot access the Class Manager or modify any Global Classes, ensuring design consistency remains protected.

The interface adapts intelligently to user permissions. Non-admins see disabled states for Global Class properties and appropriate fallback messaging, while the Class Manager is hidden. This creates transparency without compromising security.

How to Test It:

1. Log in with a non-admin role (e.g., Editor, Author, Contributor, Store Manager).
2. Go to the Style tab of any element to use existing Global or Local Classes.
3. Apply classes from the dropdown - Local and Global Classes are available for use.
4. Create and edit Local Classes directly from the Style tab.
5. Try accessing the Class Manager - you'll see it's not available for your role.
6. Edit styling properties under each section; Global Class fields will be disabled if you're not allowed to change them.
7. Hover over disabled controls to view fallback messages that explain permission limitations.
8. If you need full access to create, rename, or manage Global Classes, make sure you're logged in as an admin.

 

Understand your styles better with popovers and group-level indicators

Indications popover

Editor V4's advanced styling system now comes with instant clarity. The new Indications Popover reveals exactly where each style property originates, transforming complex inheritance chains into clear, visual information.

Working with Global Classes, Local Classes, and base styles can create powerful design systems, but understanding how they interact shouldn't require guesswork. When you click the style inheritance indicator next to any control, a contextual popover shows you the complete picture: which class is providing the value, what breakpoint it's applied to, and which interaction state it affects.

Color coded indicators make the information immediately scannable: pink for Local Classes, green for Global Classes, grey for inherited values, and orange for conflicts. This visibility accelerates debugging and gives you the confidence to build sophisticated design systems without losing track of how they work.

Group-level style indicators

When working with collapsed sections, style indicators now appear at the group level to give you immediate visibility into which sections contain class-based styling. Typography, Border, and other collapsible groups display colored dots when they contain style values from your active classes.

The indicator colors match your current class context: pink dots appear when you're on the Local Class, green dots for Global Classes and orange dots for conflicts. This lets you quickly identify which sections need attention without expanding every group, streamlining your workflow when working with complex class hierarchies.

How to Test It:

1. Open the Style tab of any element that has class-based styling applied.
2. Look for the style origin dot indicator next to a control (e.g., color, padding).
3. Click the indicator dot to open the Indications Popover.
4. Confirm that the popover displays the class name, breakpoint, and interaction state associated with the value.
5. Note the color codes:
   • Pink for Local Class
   • Green for Global Class
   • Grey for inherited styles
   • Orange for style conflicts
6. Collapse a control group (like Typography or Border) and verify that a colored dot appears on the group label when it contains styles.
7. Confirm that the dot’s color reflects the active class context correctly.
8. Repeat with multiple classes and breakpoints to validate consistent visual feedback in both the Editor and frontend.

 

Edit seamlessly with the context-aware panel

The editing panel now saves your working context for each element, which tab you were using, which sections you had expanded, and which class you were editing.

Previously, switching between elements meant constant renavigation, panels reset to General tabs, style sections collapsed, and class selections reverted to Local every time. This broke the natural rhythm of design work, especially when fine-tuning styles across multiple elements or working with Global Classes.

Now, every element saves its context and brings you back to the property you were working on when you switch back and forth between elements. Whether you're comparing typography settings across headings or applying consistent spacing to multiple containers, the interface adapts to your working style instead of forcing you to adapt to it.

How to Test It:

1. Select an element and go to either the General or Style tab.
2. Expand a specific section (e.g., Typography or Border) and make a visible change.
3. If using Classes, switch to a Local or Global Class.
4. Select a second element and make changes in a different section or tab.
5. Switch back to the first element.
6. Confirm that the panel:
   • Remembers the last active tab (General or Style)
   • Keeps the previously expanded section open
   • Preserves the class context you were editing (Local/Global)
7. Repeat the process across 3-4 different elements to ensure the memory persists per element.
8. Verify this behavior remains consistent after previewing and returning to edit mode.

 

Accelerate styling with Smart Unit Typing

A small detail that makes a big difference in your daily workflow. Smart Unit Typing lets you type in size values and units together. Instead of typing "12" then selecting "px" from a dropdown, simply type "12px" and move on. The system will recognize your input and automatically apply it, keeping your hands on the keyboard and your focus on the design. For responsive work or rapid prototyping, these seconds add up to significant time savings.

When you type invalid units, the system maintains stability by preserving your last valid value. It's the kind of behavior that feels natural from the first use, making size adjustments feel as fluid as your creative process.

How to Test It:

1. Select an element and go to any numeric control (e.g., Padding, Font Size).
2. Type a value with a unit directly (e.g., 16px, 2em, 10%).
3. Confirm the value is applied instantly as you type.
4. Type an invalid unit (e.g., 20abc) and verify the field reverts to the last valid value.
5. Repeat across different controls to ensure consistent behavior.

 

Add YouTube videos with full V4 consistency

Video content drives modern web experiences, and now Editor V4 includes a dedicated YouTube element built from the ground up with full V4 capabilities, allowing you to add engaging videos to your new V4 pages.

The new YouTube element demonstrates V4's evolution beyond styling capabilities. It introduces a new JS Handlers system that cleanly mounts and unmounts elements, removing all DOM references when not needed for better performance, and passes frontend settings directly to JavaScript for more responsive controls.

This continues Editor V4's journey toward a complete professional toolkit, and as it expands element by element, each addition brings the architecture closer to supporting any design vision.

 

Essential Editor tools: core features continuously added

Alongside new capabilities, Elementor 3.30 starts to bring essential V3 functionality into the V4 environment. These aren't just feature additions, they're the professional tools that will complete V4's readiness for real-world projects.

Custom unit

Choose any unit you want, mix numeric units, and run CSS function calculations within them. For example, you could use the clamp() CSS function to adjust to different devices, or the calc() CSS function to calculate and set a value that mixes units, achieving greater design accuracy and responsive support.

ID support

Assign unique identifiers to elements from the General tab > Settings, for custom targeting and accessibility improvements. Works exactly as you would expect from V3, ensuring compatibility with existing development practices.

Reset option

One-click value clearing with a reset icon (now with a fresh look), streamlining the experimentation process by quickly reverting properties to their inherited or default states. The new reset icon will appear on the relevant property once you set a value.

Display none

Set elements to display: none on specific breakpoints from the Style tab > Layout, giving you precise per-device visibility management and responsive flexibility.

Anchor offset control

Solves the issue with anchor links scrolling behind sticky headers. Using native CSS scroll behavior, this feature ensures anchor navigation lands exactly where intended while improving performance. Accessed from the Style tab > Position.

Text columns control

Enabling multiple newspaper-style column layouts with adjustable spacing, essential for editorial designs and content-heavy layouts. Accessed from the Style tab > Typography > Show more.

Aspect ratio controls

Provide native ratio settings for images and videos from the Style tab > Size > Show more, ensuring consistent visual presentation across all screen sizes without any workarounds.

Object fit control

Precise control over how images and videos behave within their containers, offering the full range of CSS object-fit options through intuitive visual controls. Accessed from the Style tab > Size > Show more.

 

[Pro] Access a centralized location with complete Website Templates in the Cloud!

Introduced in version 3.29, Cloud Templates transform how you work across multiple sites by allowing you to save sections, containers, and full pages to your cloud library, accessible from any site connected to your Pro account. This eliminates the site-specific limitations of local templates and helps you create a personal design library that follows you anywhere.

Now, Cloud Templates evolve beyond individual design elements to complete website designs. Website Templates in Cloud extend your creative assets to include complete site structures: templates, styles, settings, media, and configurations of the specific site - all packaged for consistent deployment across projects. For agencies and multi-site creators, this transforms how you approach new projects.

Save proven site architectures as reusable templates, customize what gets included in each Website Template, and deploy complete experiences with the WYSIWYG Editor. Whether you're standardizing client workflows or scaling successful designs, Website Templates provide the infrastructure for systematic growth. Access this new feature from the Website Templates Library (previously named “Kit Library”) under My Website Templates.

How to Test It:

How to save and apply a Website Template to the Cloud

1. Go to the WordPress Dashboard → Tools → Import / Export Website Template.
2. Under "Export a Website Template", click Export.
3. In the export setup screen, give your Website Template a name and configure the content, templates, and settings you want to include.
4. Proceed to the final step of the export process.
5. Click Add Website Template to Cloud to save it directly to your cloud library.
6. After the export is complete, click Open library to access your saved Website Templates.
7. In the Website Templates Library, navigate to the My Website Templates tab to view your saved Website Template.
8. From the three-dot menu on any Website Template card, you can delete your Website Template.

To import and apply a Cloud Website Template to your site, simply:

1. Go to the Website Templates Library.
2. Select the My Website Templates tab.
3. Click Apply on the Website Templates you want to use.

 

Build for everyone with accessibility enhancements

Elementor 3.30 introduces accessibility improvements that make your websites more inclusive and aligned with modern web standards. These enhancements ensure better semantic structure, improved keyboard navigation, and enhanced screen reader support across key elements.

• Enhanced visual feedback - Icon Box and Image Box elements now provide proper hover and focus color controls, improving accessibility while maintaining design flexibility.
• Semantic improvements - Video Playlist elements use proper semantic markup, Portfolio and Posts elements implement list structures for screen readers, and Post Navigation includes appropriate role attributes.
• Form accessibility - Both Form and Login elements now include descriptive aria-labels, making them more discoverable and usable with assistive technologies.

These updates reinforce Elementor's commitment to inclusive design, empowering Web Creators to build websites that work for everyone while meeting legal compliance requirements.

Additional updates

Elementor 3.30 rounds out this release with targeted upgrades that boost performance, enhance flexibility, and maintain consistency across the platform:

• Video Playlist Performance Fix: - Removed hardcoded admin fonts to improve front-end load times and follow best practices
• New Mask Shapes - Expanded the default mask collection from 6 to 20 shapes for richer visual design options - no SVG upload required
• Image Box Enhancements - Added height, object-fit, object-position, and box-shadow controls to match the Image element's flexibility
• Post Excerpt Styling - Unified styling controls with Text Editor for better consistency and cleaner design workflows

 

Experiments status

• Top Bar - Merged into the core version and enabled by default for all sites, providing a unified editing experience
• Load Google Fonts locally - Merged into the core version and enabled by default for all sites, improving site performance and privacy compliance
• Optimized Markup - Now active for new sites by default, providing cleaner HTML output and improved performance from the start
• Menu widget - Now active for new sites, offering enhanced navigation and styling options

 

---

More Improvements

Free version

• New: Added support for setting custom units in size controls - Editor V4 (✅ Missing Custom Units (Migrated from #30166) #31287)
• New: Added reset control visibility via the floating action bar - Editor V4 (✅ Missing deselection facility from selectboxes in Style Tab #31356)
• New: Added JS handler infrastructure for the new elements system - Editor V4
• New: Introduced modular YouTube element built with new structure and JS handlers – Editor V4
• New: Panel now remembers editing context across elements including active tab expanded sections and selected class - Editor V4
• New: Enabled Smart Unit Typing - allows typing values with units directly - Editor V4
• New: Added ID control to Settings section under General tab - Editor V4
• New: Added anchor offset control to Position section under Style tab - Editor V4
• New: Added Display None control to Layout section under Style tab - Editor V4
• New: Added Object Fit control to Size section under Style tab - Editor V4
• New: Added Columns control to Typography section under Style tab - Editor V4
• New: Added Aspect Ratio control to Size section under Style tab - Editor V4
• New: Added group-level style indicators to show where class-based styles are applied – Editor V4
• New: Added Indications Popover for visualizing class-based style origins – Editor V4
• New: Introduced class permissions for non-admin users - Editor V4
• Tweak: Added title hover and focus color options to Icon Box and Image Box widgets (Icon Box Title Hover Settings #29948)
• Tweak: User-defined class names now appear as-is in the final code output in Class Management - Editor V4 (✅ Use real class names in CSS instead of identifiers #31055)
• Tweak: Added Settings section inside the General tab - Editor V4
• Tweak: Merged "Editor Top Bar" feature into the core version
• Tweak: Merged "Load Google Fonts locally" feature into the core version
• Tweak: Activated "Optimized Markup" feature for new sites
• Tweak: Promoted "Element Caching" feature to Stable status
• Tweak: Added new mask shapes
• Tweak: Replaced select control with a visual choice control in Mask
• Tweak: Add image height, object-fit, object-position, box-shadow in Image Box widget
• Tweak: Standardized naming convention for items in the editor app-bar
• Tweak: Consolidated control visibility and layout into a single Style tab in Progress Bar widget
• Tweak: Updated minimum required WordPress version to 6.6
• Fix: Global CSS transition with higher specificity prevents Container transitions from being applied (✅ 🐞 Global transition CSS property for Optimized Markup in Elements prevents changing Container transitions #30460)
• Fix: Global CSS classes are lost when publishing from multiple tabs - Editor V4
• Fix: Redundant spacing appears below the image in the Image Box widget
• Fix: Scrolling to anchors no longer works inside the Editor

Pro version

• New: Introduced Full Website Templates in the Cloud - export, manage, and reuse full site kits across all your websites from one place
• Tweak: Activated "Optimized Markup" feature on new sites
• Tweak: Activated "Menu" feature on new sites
• Tweak: Improved error handling for Theme Builder display conditions
• Tweak: Added styling controls to Post Excerpt widget
• Tweak: Improved accessibility with role and aria-label attributes Post Navigation widget
• Tweak: Added aria-label in Form widget
• Tweak: Added aria-label in Login widget
• Tweak: Arranged content as lists in Portfolio and Posts widgets
• Tweak: Added Box Shadow and Text Shadow controls in Countdown widget
• Tweak: Moved image resolution control to content tab in Price List widget
• Tweak: Renamed and reorganized style sections in Price List widget
• Tweak: Added conditional logic to controls in Price Table widget
• Tweak: Grouped layout controls under list section in Price List widget
• Tweak: Updated minimum required WordPress version to 6.6
• Fix: Inline font icons support doesn’t work in Post Navigation widget (✅ 🐞 The Post Navigation widget does not show arrows if the inline font icons Experiment is enabled. #24367, ✅ 🐞 Bug report: Post Navigation Icon Isn't Inlined if "Inline Font Icons" experiment is active #18343)
• Fix: Page Title condition doesn’t work on child pages in Widget Display Conditions
• Fix: Editor users with "Access to edit content only" are able to delete elements
• Fix: Links are not crawlable in Video Playlist widget
• Fix: Uses hardcoded admin fonts in Video Playlist widget
• Fix: Editor freezes when added with a high PHP upload size in Form widget
• Fix: Errors occur when Debug mode is enabled in Slides widget
• Fix: Plugin dependency not enforced in Elementor Pro
• Fix: Console shows deprecation warning in Global Widgets

---

How to Install the Beta Version

If you still haven't enabled beta testing in Elementor, please follow these steps:

1. Go to Elementor > Tools > Versions
2. Enable the beta tester feature
3. Go to Dashboard > Updates and update to the latest beta version.
4. This will get you set up to test the new Elementor 3.30 Beta.

Notes

As we make changes to our GitHub in an effort to keep it organized, improve the way we deliver information to you, and our ability to review your feedback, please follow the instructions below when reporting bugs, or making feature requests:

• To report a bug related to V3 features - open a new 🐞 Bug Report
• To report a bug related to V4 features - open a new 🐛 Editor V4 Bug Report
• For feature requests - open a new 🚀 Feature Request
• For other comments specifically about this beta version - comment here

Designated time for release: July 1st, 2025 (Estimated)

Many thanks for your support and help!

Cheers,
Elementor Team

[louiswol94]

This is amazing! 🔥

[nicholaszein]

It is isn't it? 😊

[toineenzo]

Very nice!

[nicholaszein]

Can't wait to learn about your feedback @toineenzo! 😃

[Peravel-com]

Elementor is Excellent, as always!

[nicholaszein]

Thank you for the kind word @Peravel-com! 🫶

[Topicimes]

What a joy to read these few lines! Experience an official version 4, ready to use in production.

Good work, Elementor!

[nicholaszein]

Haha nice try @Topicimes! 😅

We are not there yet, but we will be there! 💪

For now, please don't use it on production websites ok? There could be breaking changes, and we don't want you having to rebuild everything because of that. Not to mention compatibility with other plugins and addons.

Nonetheless, we are eager to learn from your feedback about this version! 🤩

[Topicimes]

Obviously, using a translation tool, it wasn't clear to us.

I can't wait to use it on production sites! :)

[suasgn]

Thank you for considering our feedback regarding the use of the actual class name in the output (DOM). It is now easier to use Tailwind 4 for designing websites built with Elementor.

[nicholaszein]

Awesome @suasgn! 🎉

You're very welcome! Keep it coming! 💪 😊

[tobisalami]

Thank you for honoring this!

[nicholaszein]

Hey @tobisalami!

Thank YOU for sharing your feedback! 💪 😊

[vcpaige]

Love the update to classes! And we can use custom units. It's nice we can tap "c" in an input field to set it to custom units.

Would love the ability to lock/unlock classes so admins don't mistakenly edit one of our core framework classes.

I noticed a unique issue specifically with padding in a global class. If you use a variable (whose value is defined in your child theme), the styling from that variable doesn't show up in the editor. It shows on the frontend, just not in the editor.

[vcpaige]

@nicholaszein
Awesome!

Yeah it's interesting, while in the Elementor editor, it doesn't apply the padding from the variables but when viewing the page on the frontend, it does show the correct padding. Here's a quick Loom to demo the issue.

[nicholaszein]

Interesting @vcpaige... 🤔

Thank you for the clarification, and especially for the video demo! 🙏

We are going to take a deeper look at it and check if we need to make some tweaks for global classes and variables!

[doronwolf]

Hi @vcpaige can you test again with Elementor v3.30.0-beta2 ?
We did some changes in the way flexbox is rendered inside the editor, I'm not fully certain it will fix the issue you demonstrated, but curious if it does

[vcpaige]

@doronwolf - Nice! It's fixed in the new version.

[doronwolf]

Happy to hear that 🥳

[nicholaszein]

Hey Beta Testers! Welcome to this discussion! 🤗

We want to take this opportunity to thank the following beta testers for their feedback. Your contribution helped us improve on Editor V4 features, and offer a better user experience! 🙏

Some of the reported pain points regarding the last release such as the lack of Real Class Names, Responsive Display: None, Element ID, and Custom Units are already available in this version, and we are also working on bringing parity or integration with existing V3 features that we think you will really like in upcoming releases! 😉

Thank you to:

• @m1ga
• @KHcreative
• @loucasl
• @GerardPerret
• @Adnans2005
• @RonR-WebDesign
• @lllopo
• @Vossha
• @mbaierl
• @mofo-is-guilty
• @azkalex
• @toltechinternet
• @blackdog303
• @bddevfarid
• @tesuh
• @antoine-piarou
• @MichalisDBA
• @suasgn
• @tobisalami
• @caleb-bright
• @mauro500designs (and team)
• @nesoor
• @meksone
• @wpmate
• @urs-faerber
• @mecpcanada
• @NoiZzz3R
• @emuplugins
• @Stephane-Peyroutet
• @digatopia
• @brouskifi
• @pathusutariya
• @Daveden2

We would love to learn about your experience with the improvements we've made, as well as the new features, such as the new YouTube atomic element, and the powerful Website Templates in Cloud, which is incredibility useful for streamlining workflow between staging and production websites!

We hope to see your comments and feedback here too! 💪

Happy testing! 🤓

[toltechinternet]

Hi,

Thank you for the release of v3.30 beta. I am thoroughly enjoying this one!

I have an issue using Mozilla Firefox (Apple Mac - Firefox Version 139.0.1 (64-bit)) with the smart units.

I've recorded a Loom video, which you can view here:
https://www.loom.com/share/67c47bfd2b6641a5846fd2a70db63bf6?sid=e3611466-c7ad-41f7-8bc7-22ec95c742c9

When editing the typography, whenever I append PX, %, REM or EM it doesn't seem to save within the fields when I navigate away to another widget. I also tried the border radius, and this had the same issue, so I think this may be a global issue for all the smart units inputs. However, when I use Google Chrome, this works as intended using the same dev environment.

[nicholaszein]

Hi @toltechinternet!

That's a head scratcher. 🤔

We will need to take a look at this one too.

Thank you for sharing this! 🙏

[doronwolf]

Hi @toltechinternet - can you upgrade your Firefox to Version 139.0.4 and then test again?
I tried to reproduce the issue but failed
also, which theme were you testing with? Can you test with 'Hello'?

[toltechinternet]

Hi @doronwolf ,

I updated Firefox to version 139.0.4 (64-bit), but the issue still persists. I was initially using a Hello Child Theme, but I switched to the default Hello Theme, and the problem continues to occur.

I also tried using Incognito mode to rule out any browser widgets that could be interfering, but the issue remains.

It's important to mention that during my testing, I had the "Classic Editor" and "LiteSpeed Cache" plugins enabled. However, after deactivating those plugins to ensure that only Elementor and Elementor Pro were active, the same issue still occurred.

I’m running macOS Sequoia version 15.5 on my computer.

I've attached my development environment system information for your reference.

system-info-www.toltechdigitalmarketing.com-12-06-2025.txt

[doronwolf]

Thank you @toltechinternet 🙏 we will keep investigating

[avivu]

Hi all,

We just released Elementor Free v3.30 Beta 2.

As part of this Beta, we’ve renamed the term “Kit” to Website Template across the editor interface.

The versions include the following:

Free version

• Tweak: Added support for registering custom mask shapes (✅ 🚀 Feature Request: Filters to modify widget masks  #19396)
• Tweak: Renamed “Kits” to “Website Template” across the interface
• Fix: Global class styles not appearing in the editor for Div and Flex elements - Editor V4

Pro version

No changes.

–

Thank you!

[Daveden2]

Testing of the new features is going nicely so far. However, I've encountered a minor visual bug. The custom unit does not respect the linked icon in the inputs. However, it is applied properly to the preview/frontend.

[Daveden2]

Oh, interesting. Ignore what I said earlier. After I refreshed the page, the text got populated properly.

[doronwolf]

Hi @Daveden2, Yes, we are aware of this issue and working on a fix 🙏

[nicholaszein]

Hi @Daveden2 ,

Welcome to the discussion, and thank you for sharing your findings! 🙏

[toineenzo]

Would be even better if it is not needed anymore to add var()

[nicholaszein]

I thought about this @toineenzo. It would be nice if we needn't to do it in pure CSS. 😅

[Stephane-Peyroutet]

Hi all,
Thank you for the amazing work.

I have a general concern/question regarding general style tab (which is great) vs specific style values/features when they do not apply.

One small example : if you use the Heading element, in the Layout tab, you can try to apply the display Flex option with Space Between, Space Around or whatever but it won't change a thing as this option not relevant/useful here. And every option you play with is (of course) written on the corresponding css class.

Do you plan on hiding/greying out options when they are not relevant on an element/component ?
What is the plan regarding grid vs flexbox as the layout options will also be quite different ?

Keep up the amazing work !!

[Stephane-Peyroutet]

@Daveden2 .... Good point, I guess my example was not a good one.

Right now, the only thing I don't get with the new v4 editor direction is regarding layout & container.
Is the "new" flexbox atomic element supposed to replace the "old" layout container ?
Or is it just a new "generic" element that you can place inside any container ?

[Daveden2]

Yes, I believe the new v4 Flexbox and div elements should replace the v3 container element.
However, the v3 elements will still be supported for a long time.

Also, you can freely mix and match the v3 and v4 elements.

[nicholaszein]

Hi @Stephane-Peyroutet, welcome to the discussion! 🙂

Great question, and @Daveden2 made a great point too!

1. Regarding the Unified Styles

The idea behind Unified Styles is to give you full control. You can apply nearly any style to any element or class, including layout (like Flexbox), typography, backgrounds, and more, regardless of element type.
We intentionally don’t limit these options based on context. For example, while justify-content on a Heading might not be useful, the same class could be reused on a Div or Flexbox that does need that property. This keeps us aligned with how CSS works natively, no restrictions on what you can apply to a selector.

So for now, there are no plans to add conditional logic based on element type.

2. Context-aware Grid and Flexbox controls

These will show up based on the selected Display value of the element. Grid isn’t available just yet, but it’s coming soon! 😉
Also, depending on the parent’s display type, you might see child-related Grid or Flexbox layout controls appear in the Layout section. This is currently the only contextual behavior we have.

3. Flexbox Atomic Element

The new Flexbox element was created to work with Global Classes and the unified Style tab. Unlike Containers, it doesn’t include an Inner Container, so boxed layouts need to be built manually.
It’s not a replacement for the Container, instead, use Flexbox or Divs when you want full control over layout. The goal of Atomic Elements is simplicity, one element, one purpose.

Later, we’ll introduce Components, which will offer ready-made layouts built from these atomic elements.

And yes, @Daveden2 nailed it with the "mix and match" insight! 💪

Let me know if anything is still unclear!

[toineenzo]

@nicholaszein About the boxed layout, is it best practise to build it like this: Div block > flexbox inside that with max width?

[nicholaszein]

Hi @toineenzo!

Right now, the difference between the Flexbox and the Div elements is the preselected Display property. The Div element has display: block pre-selected, while the Flexbox element has the display: flex property selected.

While we recommend using the Flexbox element as the parent (wrapper) and the Div element as the child (boxed), it's up to you to decide if this is the best approach for your workflow.

[79ho3ein]

The new editor is great. Congratulations to the Elementor team.

[nicholaszein]

Thank you for the kind words @79ho3ein! 🫶

If you have any deeper insights, please don't hesitate to send your feedback!

Happy testing! 🤓

[Daveden2]

I'm loving the updates I've seen so far! One thing that can enhance the editor experience is adding the time unit for the start and end times for the YouTube video. I believe you're already aware of it, but I thought I should still mention it.

[nicholaszein]

Thank you for the kind words @Daveden2! We really appreciate it! 🙏

Also thanks for pointing this out, we have seen people having difficulty in figuring what they should type in this field, and we will work to improve the UI/UX!

Keep 'em coming! 💪

[Stephane-Peyroutet]

@nicholaszein

Thank you for your very clear and detailed answers.

This helps us embracing the new V4 editor whose approach is awesome in so many ways.

[nicholaszein]

Thank you for the kind words @Stephane-Peyroutet!

Our goal is to empower your creativity! Hearing your feedback and sharing the progress with you is crucial to ensure we can give you the tools to reach that goal! 💪

[Daveden2]

Text sanitisation in atomic elements

I noticed that we cannot add HTML tags in the atomic elements. I tested adding a <strong> and <span> tag to both the heading and button elements. It showed correctly on the backend, but the tags were stripped on the frontend.

[pingram3541]

Ok for a single button element that needs an icon, we need minimum 3 components, a div or flexbox container which will be rendered as an anchor tag, an svg and a paragraph. This is going to add up. 3 components vs 1.

That's 3 database references and 3 json objects (which in v3 are massive containing all the defaults and every possible setting, maybe atomic elements don't do this, haven't looked under the hood)

And what if I don't want a paragraph nested within an anchor tag when a span is more appropriate, the paragraph atomic element doesn't seem to allow for this.

Instead of nesting many atomic elements to produce a single visible component, can we consider adding extra controls within a single atomic element that adds abilities to produce additional inline content?

For example, a single paragraph may contain all of the above: bold text, italic, different colors, an email link and an element with a custom attribute like so:

<p><b><i>Hello Cadets</i></b>, we've been waiting to share the news about our upcoming <span style="color: purple;">Annual Fall Festival</span>. For more information <a href="/2025-fall-festival/" data-tracker="5Tr9vsD0">click here</a>. Please RSVP at <a href="">admin@mohaveseacadets.org</a></p>

This would get real messy if everything is nested elements.

[pingram3541]

I had an idea, and forgive me if this has been mentioned, I have not read all comments above but what if we allowed html tags and attributes using a brackets-like approach and some helper text that provides an example such as:

{{b}}bold text{{/b}}

{{span class="standard" style="background-color: yellow;"}}highlighted content{{/span}}

{{a href="mailto:admin@mohaveseacadets.org"}}click here{{/a}}

{{img src="/media/logo.png" data-src-set="/.../"}}

The allowed tags and attributes can be filtered giving developers further control.

This would allow for that paragraph example in my comment above, to all be within a single atomic component.

{{b}}{{i}}Hello Cadets{{/i}}{{/b}}, we've been waiting to share the news about our upcoming {{span style="color: purple;"}}Annual Fall Festival{{/span}}. For more information {{a href="/2025-fall-festival/" data-tracker="5Tr9vsD0"}}click here{{/a}}. Please RSVP at {{a href="mailto:admin@mohaveseacadets.org"}}admin@mohaveseacadets.org{{/a}}

[doronwolf]

Hi @pingram3541, as I mentioned and replied to you in a different discussion - inline editing for text and a more robust text editor are on their way for v4 as well. It will take some time, but they will come.
As for performance and nesting, you can examine the dom and json and database references of v3 button with an icon VS a v4 flexbox that has a link and contains text + SVG (and set to be sized and look as a button) and decide for yourself which one has cleaner code and better performance - also, you can reach a much more precise look that V3 buttons wouldn't allow, this is the beauty performance and flexibilitythe V4 atomic design gives you 🙂

[pingram3541]

inline editing for text and a more robust text editor are on their way for v4 as well.

I can't wait to see how this unfolds!

also, you can reach a much more precise look that V3 buttons wouldn't allow, this is the beauty performance and flexibilitythe V4 atomic design gives you

Yes, I replicated a Link in Bio element using all V4 atomic elements and while the # of editor components were 12, the front end was actually less tags in the DOM. Additionally I was able to add some transitions without using custom css giving me more control than the single V3 Link In Bio element.

The front end render DOM result is less elements in V4 yet it still lacks control to lace it properly such as accessibility, data and status attributes. i.e. aria-label

The back end may result in more loops and/or json objects to be iterated through vs a single V3 element, however with caching tools this becomes less of a worry.

I think the best way to flush out V4 polishing is to try to replicate as many professional web designs across different verticals and see where the pain points are when strictly using V4 methods and components.

Source the top web design awards material so that you know your product can keep up with the latest trends. You're going to need fresh V4 templates anyway right?

[doronwolf]

Hi @pingram3541 yes - data and status attributes are also on their way, V4 library blocks/pages/kits are also planned to be available once V4 is more mature and considered stable enough 🙂 all those things need time, please be patient, we promise to try deliver as fast as we can

[nicholaszein]

Cloud Website Templates - Share your feedback!

Hey everyone! 🙂

I know everyone is focused on Editor V4 features, but I would like to take a moment to show you how the new Cloud Website Templates [Pro] feature works, and we would love to know your feedback about this feature as well.

I've recorded a quick video (no audio) showing how to use it, and how you can Export entire Website Templates (former Site Kits) to your personal Cloud space, and Import it on any connected website quickly and easily without sweating. 💪

cloudwebsitetemplates02-optimized.mp4

Website Templates could already save your WordPress Settings, Pages, Posts, Custom Post Types, Menus, active Plugins and Theme, Elementor Settings - including Site Settings such as Global Colors and Global Fonts, and serve as a blueprint for quickly starting a new site with everything ready for you to start building in just a few steps. Cloud Website Templates in Elementor Pro can improve your workflow even more by allowing you to store these blueprints, or even migrate from staging to production without having to deal with complex backup solutions, FTP and other migration methods. You could even maintain your production website live while you work on your staging site and import your full Website Template from your personal cloud space in just a few minutes!

What do you think? Have you tested this feature yet? How was your experience? We're eager to know! 🤩 👂

Let us know down below! 👇

[pingram3541]

Interesting experience today working with the atomic SVG element and trying to adjust the fill color as I'm not sure what element control to use, I wound up having to use custom css.

.um-logo path { fill: #fff; }

Oddly, my custom css didn't take because the custom class um-logo I assigned was not actually rendering in the preview. I'm not sure what did it but it eventually started working after I moved on to others parts of the design.

However, this experience was short lived.

Oddly, now I uploaded a second SVG, a hamburger menu icon and gave it a custom class as well.

.um-menu-button line { stroke: #fff; }

Yet none of my custom css is working because low and behold, neither the front or back end render with the class um-menu-button.

• I've saved and reloaded.
• I can see the custom um-menu-button class assigned to my atomic SVG element
• I can select the class in the element's side bar editor and change settings related to it, i.e. color: #fff;
• I cannot find this class assigned to any element in the DOM, back or front
• oddly, after doing ??? something ??? the class is now assigned and custom css is working

Using javascript to create carousels and add click event listeners was also difficult with the classes rendering. Even still, one the custom classes are rendering on the front end they are still not there on doc ready, something is dynamically assigning them rather than already being assigned in the original payload. When I inspect the page source, the elements do not exist and the custom classes are only found in side a json object. After much difficulty trying doc ready, window.elementor['loaded'], DOMContentLoaded etc., I had to delay my event listeners using setTimeout function at 1 full second delay;

[doronwolf]

Hi @pingram3541, you can set the SVG color and stroke by using typography color and stroke! 🙂

Regarding carousels, I think it's better to use the existing V3 carousels until V4 carousels are ready (I realise it's far from ideal but remember V4 is still an alpha) 🙏

[nicholaszein]

Hi @pingram3541,

Please submit an 🐛 Editor V4 Bug Report with your full Elementor System Info, and if possible a screen recording of the problem. I would love to take a deeper look at your issue, and understand why this is happening to you.

https://elemn.to/editor-v4-new-issue

Thank you!

[pingram3541]

@doronwolf Here is a video example of the SVG which has two path child elements.

SVG structure:

<div class="um-menu">
  <svg ...>
    <path>
    <path>
  </svg>
</div>

And here is a video example of the 2nd SVG which has different structure as follows:

<div class="um-menu-button">
  <svg ...>
    <title>
    <g>
      <rect>
      <line>
      <line>
      <line>
  </svg>
</div>

@nicholaszein Thanks for offering to take a look, I'll see if I can put something together that clarifies my experience.

[doronwolf]

Hi @pingram3541 - just as the current V3 editor is behaving with SVG coloring is true for V4 as well, meaning: you have to ensure your SVG is properly formatted. If the fill color is set inside the SVG file, Elementor’s color controls may not override it.
Similar to V3, only uploaded SVGs with no fill property can be colored from within the editor.
(This can be done by editing the SVG code and removing the fill property or graphic programs - see example here under the 'Override Inline Styling' title at the end of the page).

[pingram3541]

I just hit a limit - "You've reached the limit of 50 classes. Please remove an existing one to create a new class"

I'm working on a site that has many different design examples, can we please expand this limit or remove it altogether?

[nicholaszein]

Hi @pingram3541,

We will handle this limit once the class system is established and stable. Until then, we added this limit to test for performance.

It sounds like you're using Editor V4 on a production website. You shouldn't. We are going to change things, and they may break your site. Editor V4 is in early alpha stage, before even being in beta, and beta is not even recommended to be used on production websites either. This means its highly experimental, and contains bugs.

For your safety, use it only for testing purposes.

[pingram3541]

It's a test site for me not production, I'm using it to test how my plugins and kits may need to adapt.

[nicholaszein]

Thank you for helping us test Editor V4 @pingram3541! We really appreciate it! 🙏 ❤️

[pingram3541]

It was fun but sadly this limit has quenched my desire to continue testing.

[nicholaszein]

Hey everyone!

We just released Elementor Free v3.30 Beta 3.

This version includes minor tweaks and fixes.

Free version

• Fix: Style control not applying in YouTube element - Editor V4 (✅ 🐛 New YouTube Element does not show border radius #31468)
• Fix: Incorrect positioning of floating actions bar in various scenarios - Editor V4
• Tweak: Dark mode adjustments in visual choice for Mask control

Pro version

No changes.

Cheers! 🎉

[Vossha]

Amazing update 😄

A few questions about cloud templates and importing/exporting V4 CSS classes (note: I haven’t properly tested the cloud functionality yet):

1. Disable cloud functionality on selected sites - Will there be an option to disable cloud templates for individual sites connected to a license? I don’t want every site linked to my Elementor license to have access to my cloud templates or be able to upload their own. It would be great if we could disable cloud access per site from the My Account page on Elementor’s website.
2. Review imported class names - When importing templates (manually or via cloud) that use V4 CSS classes, will we be able to review which classes are being imported and optionally deselect some?
3. Conflicting class names - What happens if an imported template includes CSS classes that already exist in the site? Will we get a conflict warning? Will there be an option to link, rename, or overwrite?
4. Import/export CSS classes only - Will there be a way to import/export only CSS classes? This would be awesome for building custom CSS frameworks to streamline workflows and share with clients and other Elementor users.

Can’t wait to play with all the new features 🥳

[nicholaszein]

Hi @Vossha!

Thanks for the great questions, and welcome to the discussion. 🙏

Cloud Templates and Cloud Website Templates are tied to the individual user’s Elementor account and Elementor Pro subscription. This means that only the user who connects their account to the site can access or upload templates to their personal Cloud space. Other WordPress users on the same site will not have access to this service unless they log in with their own Elementor account, and have an active Elementor Pro subscription.

So as long as you don’t share your personal login, your templates will remain private and inaccessible to others.

It's also important to note that using Cloud Templates is separate from activating Elementor Pro or any other subscription. Just like Elementor AI, each user must have their own account and subscription to access these services.

Regarding Editor V4 CSS classes and Cloud Templates compatibility, we're still working on how this integration will work. For now we don't recommend using these features together. We’ll share more details once everything is finalized.

Let us know if you have more questions! 😉

[doronwolf]

Hi @Vossha,
regarding the possibility of disabling cloud templates functionality on selected sites:
It is important to distinguish between an 'Elementor license' and an 'Elementor user' and a 'WordPress user'.
It is recommended to give the client their own 'WordPress user', which then allows them to be connected to the site with the same 'Elementor license' as the freelancer who created the site, but not with the same 'Elementor user'.
Cloud Templates is connected to the user's Elementor account, so simply connecting the site to the freelancer's Elementor license does not allow the client access to the templates. However, suppose (in addition to connecting the Elementor license) the client also connects to the site using the freelancer's 'Elementor user'. In that case, they will indeed gain access to the templates, since they are linked to the account.

Long story short - creating your client their own WP user should do the trick

Regarding your other questions, I'm still verifying because I want to give you an accurate answer, will try to update it here once I get it.

[doronwolf]

now I see @nicholaszein beat me to it 😅 but I think maybe combining our explanations helps to understand it better

[nicholaszein]

Alright beta testers. That's a wrap! 🙌

Elementor and Elementor Pro version 3.30.0 are officially out! 🎉 🚀

We've published a detailed Blog post to commemorate this release, and you can read it all here.

Thanks to your feedback this was a very smooth and productive beta release, and we are grateful for having you with us! 🙏

✨ Special thanks to these awesome testers:

• @toineenzo
• @Peravel-com
• @Topicimes
• @suasgn
• @tobisalami
• @vcpaige
• @toltechinternet
• @Daveden2
• @Stephane-Peyroutet
• @79ho3ein
• @pingram3541
• @Vossha
• @FireDeveloper
• @awakekat
• @emuplugins
• @Perone-Luigi
• @feriamsidera
• @mauro500designs (and team)
• @nesoor
• @meksone
• @wpmate
• @pathusutariya
• @lllopo
• @mecpcanada
• @digatopia
• @mbaierl
• @mofo-is-guilty
• @brouskifi
• @urs-faerber
• @m1ga
• @NoiZzz3R

Your feedback here and in the 🧪 Editor V4 Discussions Category has been fundamental for helping shape this new era for Elementor, and we are really grateful for your contribution! You guys rock! 💪

Keep 'em coming! You can submit your feedback at any time! 👊 😉
👉 Share your feedback here!

See you in the next beta release! 👋

Cheers 🥂

Changelogs of Elementor Core and Pro + Additional Information:
Elementor Core
Elementor Pro
3.30 Developers Update