🔥 Elementor Editor v4.0 Beta Release 🔥

[avivu]

 

Hey Beta Testers, 👋

We’re excited to announce that Elementor version 4.0 Beta is now available for testing.

Over the past year, we introduced the early foundations of the Atomic Editor (V4) through a series of Alpha and Beta releases across versions 3.29–3.35. During this period, we began rolling out the new architecture, expanded its capabilities, and gathered feedback from the community as we worked toward a stable release.

Now, Elementor 4.0 represents the first public step into the Atomic Editor. With this release, the Atomic Editor becomes the default editing experience for new websites.

Make an impact by testing Elementor 4.0 Beta and sharing your impressions on the latest additions, including:

• Atomic Forms, introducing composable form elements built on the V4 architecture
• Pro Interactions with new triggers, custom effects, and breakpoint controls
• Design system syncing from Variables and Classes to legacy Global Styles
• Import/export Classes and Variables across templates and websites
• Self-hosted video element
• & more!

We look forward to your feedback as we prepare Elementor 4.0 for its public release.

 

The first public step into the Atomic Editor

 

After more than five years on version 3, Elementor 4.0 marks a huge milestone.

With Elementor 4.0, new Elementor installations will start with Atomic features enabled by default, including Atomic Elements, Variables, Classes, and Components.

For existing websites, updating to 4.0 will not change the current setup. Atomic features can be enabled manually from The WordPress Admin → Elementor → Editor → Settings → Atomic Editor.

Existing websites can continue working with their current setup, and can choose to combine new v4 elements together with existing widgets on the same page. This allows you to gradually adopt the new architecture while maintaining compatibility with existing workflows and without needing to rebuild existing layouts.

The architecture is stable and ready to use, but additional Atomic capabilities will continue to expand and roll out in future releases. In the meantime, you can combine V3 widgets with V4 Atomic Elements, adopting the new architecture gradually while it continues to expand. Follow our roadmap here.

For FAQs about version 4.0, scroll further in this post.

 

Build forms with full atomic control [Pro]

 

Elementor 4.0 introduces Atomic Forms, a new way to create forms using the modular architecture of the Atomic Editor.

Instead of configuring fields inside a single form widget, new Atomic Forms are built by assembling individual field elements inside a Form container. Each field such as Label, Input, Textarea, Checkbox, or Submit Button, is a draggable element that lives by itself and can be dragged directly into the form structure.

This approach brings forms into the same system-based workflow introduced with version 4. Form fields behave like other elements in the editor, meaning they can be styled through the unified Style tab and participate in the broader design system with Classes, Variables, Components and more.

Flexible form composition

A typical form can be created by combining elements such as:

• Label + Input for Name
• Label + Input for Email
• Label + Textarea for Message
• Checkbox for consent
• Submit Button

Because each field is an independent element, you can structure and arrange your forms visually on the canvas rather than configuring them inside a widget panel.

Built on an open structure

Unlike the classic form widget, the new form architecture is fully composable. You can nest additional elements inside the form wrapper, including text, icons, images, and layout containers, allowing you to design form layouts with greater flexibility and even multiple columns.

Each form also includes built-in states for Default, Success, and Error, allowing you to design the messages that appear after submission directly in the editor.

Form submissions integrate with Elementor’s built-in submissions system, allowing entries to be stored and managed directly in the WordPress admin.

Phase 1 of the Atomic Forms system

This release introduces the first phase of Atomic Forms, focused on basic lead capture and contact forms. Future iterations will expand the system with additional capabilities such as conditional logic and more advanced form workflows.

How to test it

1. Add the Atomic Form element to the canvas.
2. Confirm that the Form Wrapper creates the main structure for the form.
3. Inside the Form Wrapper, add individual form atoms such as Label, Input, Textarea, Checkbox, and Submit Button.
4. Arrange the elements to create a typical form layout (for example: Name, Email, Message).
5. Verify that each form field behaves as an independent element and can be freely positioned inside the wrapper.
6. Add additional elements inside the form structure (such as Text, Icons, or Containers) and confirm they work correctly inside the wrapper.
7. Select individual form atoms and apply styling using the Style tab.
8. Apply Classes or Variables to form elements and confirm the styles update correctly.
9. Adjust spacing, alignment, and layout of the form fields and confirm the layout behaves as expected.
10. Configure the Submit Button.
11. Style and structure the Success and Error messages that appear after form submission.
12. Preview the page and submit the form.
13. Confirm that the submission works correctly.
14. Verify that Success and Error states appear as expected after submission.
15. Open the Submissions area in the WordPress Admin and confirm that the submitted entries appear correctly.
16. Validate the form behavior in the editor canvas, preview mode, and on the frontend.

 

Create advanced interactions for dynamic experiences [Pro]

 

Interactions were first introduced in version 3.34 with essential entrance animations, Elementor 4.0 expands the motion capabilities available in the Atomic Editor with Pro Interactions.

You can now design interactions that respond to how visitors actually use your site. Instead of relying only on entrance animations, elements can now react to real user behavior and page movement.

You can create interactions triggered by:

• On page load
• Scroll into view
• While scrolling
• On hover
• On click

These triggers make it possible to build richer, more dynamic experiences—such as elements revealing as users scroll, cards reacting on hover, or components responding to clicks.

Custom effects for deeper motion control

To support these interactions, the new Custom effect gives you fine control over how elements animate. Instead of selecting a predefined animation, you define exactly how the element transforms between states.

You can animate properties such as:

• Opacity
• Scale (X, Y, Z)
• Move (X, Y, Z)
• Rotate (X, Y, Z)
• Skew (X, Y)

Scroll-linked interactions

The While Scrolling trigger introduces controls for defining exactly when an animation starts and ends.

Using Start and End controls, you can define the animation range, while the Relative option allows the animation to be calculated relative to the viewport or the entire page.

This enables smoother scroll-linked animations where elements respond gradually as users move through the page.

Playback, timing and breakpoint control

Pro Interactions also provide controls for:

• Delay
• Easing
• Replay behavior
• Repeat settings

Interactions can also be configured per breakpoint, allowing you to design motion differently for desktop, tablet, and mobile. This ensures animations behave appropriately across devices. For example, using richer scroll-linked effects on larger screens while simplifying or disabling certain interactions on mobile to maintain performance and usability.

How to test it

1. Add an Atomic element (for example: Image, Heading, or Container) to the canvas.
2. Select the element and open the Interactions settings in the panel.
3. Add a new interaction to the element.
4. Configure a trigger such as While Scrolling, Hover, or Click.
5. Add a Custom Effect and configure animation properties such as Opacity, Scale, Move, Rotate, or Skew.
6. Adjust timing settings such as Delay, Duration, and Easing.
7. Configure playback behavior and repeat options.
8. If using While Scrolling, set the Start and End positions and verify the animation responds to page scroll.
9. Test the interaction on the canvas and confirm the animation behaves as expected.
10. Configure breakpoint settings and verify the interaction behaves correctly across Desktop, Tablet, and Mobile.
11. Add multiple interactions to the same element and confirm they work together as expected.
12. Preview the page and confirm the interaction works correctly.
13. Validate the interaction behavior in the editor canvas, preview mode, and on the frontend.

 

Sync Variables and Classes to v3 Global Styles

 

As creators build new layouts and pages in Elementor 4.0, they will also begin defining their design systems using Variables and Classes. These systems can range from a small set of shared styles to a more advanced structure that manages colors, typography, and reusable patterns across an entire website.

To maintain visual consistency when legacy widgets are added to layouts, creators can choose to sync Color Variables to Global Colors and Typography Classes to Global Fonts. This allows both systems to work together while creators gradually transition to the Atomic architecture.

To sync a Color Variable: open the Variables Manager, click the 3 dots next to your Color Variable and then click "sync......"

To sync a Typography Class: open the Class Manager, click the 3 dots next to your Typography Class and then click "sync......"

Once syncing is enabled, updates made in synced Variables and Classes automatically propagate to the global styles. You can disable syncing from the same place in the Variables/Class Manager, however global styling for these instances will revert to default values.

How to test it

1. Open the Variables Manager and create a new Color Variable.
2. Click the three dots next to the Color Variable and select the option to sync it with Global Colors.
3. Verify that the Variable appears in the Global Styles color list.
4. Update the Color Variable and confirm that the change propagates to the synced Global Color.
5. Add an Atomic element to the canvas and apply the synced Color Variable.
6. Add a legacy widget to the same layout and apply the corresponding Global Color.
7. Confirm that both Atomic elements and legacy widgets display consistent styling.
8. Open the Class Manager and create a Typography Class.
9. Click the three dots next to the Typography Class and select the option to sync it with Global Fonts.
10. Verify that the Typography Class appears in the Global Styles fonts list.
11. Update the Typography Class and confirm that the change propagates to the synced Global Font.
12. Apply the Typography Class to an Atomic element and confirm the style is applied correctly.
13. Add a legacy widget and apply the corresponding Global Font to confirm styling consistency.
14. Disable syncing from the Variables or Class Manager and confirm the Global Styles revert to their default values.
15. Validate the behavior in the editor canvas, preview mode, and on the frontend.

 

Import and export Variables and Classes

 

Elementor 4.0 expands design system workflows by allowing Classes and Variables to be imported and exported between templates and websites.

This allows creators to:

• Move design systems between staging and production sites
• Reuse established design foundations across multiple client projects
• Maintain consistency when sharing projects across teams

When importing a template, you can choose whether to include the Classes and Variables defined in that template. If the option is enabled, the template’s design assets are imported alongside the layout, allowing the elements in the template to retain their intended styles.

Classes and Variables can also be exported as part of a website template, enabling teams to transfer entire design systems from one project to another.

During import, Elementor checks whether the incoming Classes or Variables already exist on the destination site. If conflicts occur, the import flow provides options to help resolve them, ensuring that existing design systems are not accidentally overwritten.

How to test it

1. Open the Variables Manager and create several Variables (for example: colors or spacing values).
2. Open the Class Manager and create several Classes (for example: typography or spacing styles).
3. Apply the created Variables and Classes to Atomic elements on the canvas and confirm the styles appear correctly.
4. Save the layout as a template.
5. Export the template from the Templates area.
6. Import the template into the same site or another site.
7. During the import process, enable the option to include Variables and Classes with the template.
8. Confirm that the imported elements retain their intended styling.
9. Open the Variables Manager and verify that the imported Variables appear in the list.
10. Open the Class Manager and verify that the imported Classes appear in the list.
11. Apply the imported Variables and Classes to new elements and confirm they work as expected.
12. Export a website template and confirm that Variables and Classes are included in the export.
13. Import the website template into another site and verify that the design system assets are transferred correctly.
14. Test a scenario where a Variable or Class with the same name already exists and confirm the import flow provides options to resolve the conflict.
15. Validate that the final styling remains consistent across all elements and that Variables and Classes are applied correctly after import.

 

Self-hosted Video element

A new Video element supports self-hosted video sources, expanding the set of atomic media elements available in the editor.

This new Atomic Element allows creators to upload and display video files directly from their website while controlling playback options such as autoplay, mute, loop, and poster images. Just like all Atomic Elements, the new video element supports Classes, Variables, and Components with a unified style tab and clean DOM structure.

This makes it easier to incorporate hosted video content while keeping full control over the media experience within your site.

 

Components updates

• Detach functionality – Detaching removes the instance’s link to the master component, transforming the individual component into a basic layout with selectable and editable elements. To detach, click the detach icon in the Components panel.
• Pro availability – Only Pro users can now create new Components. Existing components that were created in the free version remain usable; users can update exposed properties, but cannot modify the component layout. Free users can also detach the component if needed.

 

Additional updates

• Onboarding flow – New Elementor installations now include an updated onboarding experience designed to help creators get started faster.

• Inline editing in the Atomic Button element – You can now edit button text directly on the canvas.

 

--

💬 Want to share your feedback about version 4?

👉 Click here to schedule a one-on-one video call with the Editor team.

---

 

Version 4.0 FAQs

What happens to my existing sites when I update?

Nothing happens to existing sites. The main difference you will see after updating an existing site is a notice for the new Atomic Elements section at the top of the Elements panel. You can choose to either activate or dismiss. After activating, you can continue using legacy widgets together with the new Atomic Elements.

What happens to new sites?

On every new Elementor installation, atomic features are enabled by default and the new Atomic Elements appear at the top of the Elements panel. Both new and existing sites can combine legacy Widgets and Atomic Elements on the same page. Atomic features can be disabled at any time from: WP Admin > Elementor > Editor > Settings > Atomic Editor.

What’s the main change between version 3 and version 4?

The main noticeable change is the new Atomic Elements section in the Elements panel. Atomic Elements are a new generation of high-performance, flexible building blocks designed for less bloat and enable more precise styling through a unified interface. These new elements support Classes, Variables, Interactions and Components.

Do I need to rebuild my existing v3 layouts?

No, you don't need to rebuild anything. Your existing sites and layouts remain unchanged.

When should I use the new elements?

When starting a new site, you should ideally begin with v4 Elements, build a design system using Classes and Variables, and add v3 Widgets where needed. When building a new page or a big new section as part of an existing site, you can choose to gradually introduce Atomic Elements as they’re leaner and easier to maintain, but completely optional.

Do I need to pay extra for it?

No. Version 4 is not a new subscription or product. It is a new version of Elementor’s Editor, and the core remains free. Just like in version 3, the Pro plugin adds advanced capabilities to the core plugin, included in your existing Pro subscription at the same cost.

Are Atomic features safe for production?

Yes. Atomic features are stable, safe for production, and are already used in real production environments. Starting earlier allows you to learn the future workflow now instead of relearning later. However, adoption is completely optional. You can activate Atomic features now and migrate gradually at your own pace.

Does version 4 reduce DOM bloat and improve performance?

Yes. The underlying markup of the Atomic Elements is based on pure HTML tags that render without additional wrapper layers. This contributes to cleaner output and improved Core Web Vitals. When combining legacy v3 widgets with v4 Atomic Elements, performance gains may vary. However,as more Atomic Elements replace older widgets, the overall output becomes leaner.

Why are some features like Grid and Loop not available as Atomic Elements?

Version 4 introduces a new foundation and will continue evolving beyond this release. Additional Atomic Elements, including advanced layout and dynamic features such as Grid and Loop, are already in development..

Can I export and import Classes and Variables between sites?

Yes. With version 4.0, Classes and Variables can be included when exporting and importing your websites or templates. This enables reusable design systems across multiple projects.

Can I apply Classes or Variables to older widgets?

No. Classes and Variables are native to Atomic Elements. However, version 4.0 introduces syncing between v3 Global Colors and Fonts and v4 Color Variables and Typography Classes. Future versions will introduce more advanced syncing and migration solutions.

Is v4 more complex to learn?

Not necessarily. In many ways, it can be simpler to use because all Atomic Elements share the same style system. This makes the interface more consistent and intuitive. There is a mindset shift. Setting up Variables and Classes may take slightly more time at the beginning, but it significantly reduces your time to deploy by turning hours or even days of work to single clicks.

Why should I change what's working?

Web projects are becoming more complex, and the industry is shifting from page-by-page building to system-based workflows. With Version 4, your work scales with every site you build. By the time you are building site number five, you can already be working significantly faster because your design system is already in place. The foundation is evolving because professional web creators need workflows that scale, not ones that reset every time.

---

 

More Improvements

Free version

• New: Introducing syncing between Atomic Variables and Classes and Global Styles - ensures consistent styling between Atomic elements and legacy widgets - Atomic Editor
• New: Introducing self-hosted Video Atomic Element - Atomic Editor
• New: Introducing a new onboarding flow for new Editor installations to provide better guidance for getting started
• Tweak: Updated Atomic Editor status to Stable - Atomic Editor
• Tweak: Enabled Atomic Editor by default for new websites - Atomic Editor
• Tweak: Added inline editing support for the Atomic Button element - Atomic Editor
• Tweak: Improved performance and ordering of Global Classes styles on the frontend - Atomic Editor
• Tweak: Added support for importing and exporting Classes and Variables through website templates
• Tweak: Added support for importing and exporting Classes and Variables through templates
• Tweak: Improved accessibility in Cloud Templates modal
• Fix: Revision is not working as expected - Atomic Editor
• Fix: PHP warnings in the editor when WP_DEBUG is enabled after updating to WordPress 6.9.1 (🐞 Editor fails to load after updating WP to v6.9.1 with missing script dependencies in Elementor Editor Pro #34617, 🔗 🐞 Editor throws PHP Warnings about scripts being enqueued incorrectly after updating to WP 6.9.1 (Related to #34617) #34831)
• Fix: Typography modal fails to apply settings after using the "Back to default" reset option
• Fix: Data Updater does not run automatically after plugin updates

Pro version

• New: Introducing Atomic Forms for building forms using composable Atomic elements - create flexible form layouts by combining individual field elements - Atomic Editor
• New: Introducing Interactions with new triggers and custom effects for dynamic experiences - create animations based on user behavior and page movement - Atomic Editor
• Tweak: Component creation is now available in Pro - Atomic Editor
• Tweak: Added the ability to detach Components into editable layouts - Atomic Editor
• Tweak: Added support for custom fonts in typography controls - Atomic Editor
• Fix: Unable to paste content into the Custom CSS field - Atomic Editor

---

 

How to install the Beta version and activate atomic features

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

1. Go to Elementor > Editor > Tools > Version Control
2. Enable the beta tester feature
3. Go to Dashboard > Updates, and update to the latest beta version
4. Go to Elementor > Editor > Settings > Atomic Editor
5. Activate

 

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 atomic (version 4) features: open a new 🐛 Editor V4 Bug Report
• To report a bug related to version 3 features: open a new 🐞 Bug Report
• For feature requests: open a new 🚀 Feature Request
• For other comments specifically about this beta version: Comment here

Designated time for release: March 30th, 2026 (estimated).

Many thanks for your support and help!

Cheers,
The Elementor Team

[nicholaszein]

Hi Beta Testers!

Welcome to the discussion! 🙌

Excited to learn from your feedback! 💪

[dannSPM]

I'm still having problems with the interactions. I've been commenting since version 3.34, but it still doesn't work. I'm using the free element, and every interaction I add fails.

[nicholaszein]

Hi @dannSPM, welcome to the discussion! 👋

Can you share a screen recording if possible, and a copy of your Elementor System Info?

Also, please confirm if you have Animation or Motion Effects activated in your OS Accessibility settings.

Thanks for sharing your feedback! 🙏

[dannSPM]

I wasn't aware of that option, thank you very much. That was exactly it. The animation effects option was disabled on my OS.

[nicholaszein]

Great to know you found the solution! 💪

Thank you for letting us know @dannSPM! 🙏

[hitsgee]

While V4 is a great step forward in web development with Elementor. I still feel let down by the reliance on Font Awesome 5 (icons from 2017). I would of thought while developing V4 the inclusion of Font Awesome 7 would of been a smart move for developers building fresh. Google's material icons have also come along as well and completely open source making for a more inclusive system without additional pro requirements. Iconography is such a important item in my toolkit of development especially on service based websites where imagery is not always available. I hope to see this addressed soon.

[nicholaszein]

Hi @hitsgee! Welcome back!

We might have a solution for this in a not-so-distant future. 😉🤫

For now, I recommend simply uploading your SVGs. I personally prefer manually uploading myself, but it's just my preference.

Thanks for joining the discussion, let us know what you think about this new version! 🙏

[alexander-pankart]

Yeah Google icons are great and really work well with the .svg widget inside the V4 editor.

[m1ga]

Nice to see that the ElementorInteractionsConfig object is cleaned up now, thanks 👍 You should update elementor.com to use that version too (uncompressed HTML is 1.2MB at the moment) 😉

Still a bit sad that the Components moved to Pro. It was working in the free version, maybe reconsider that move and allow it to be usable there again (discussion post about it)

[nicholaszein]

Hi @m1ga! Welcome back!

Thanks for the tip, we will definitely update it once this version is released! 💪

Yes, Components are part of Elementor Pro, just like Global widgets were in V3. However, I'm told the ones you've built so far will continue to work. You just won't be able to create more.

I'll soon address that discussion. 😉

Thank you for chiming in! 🙏

[alexander-pankart]

Let's go :)

The huge animation code block seems to be gone <3

V4 form test:

YES: Add the Atomic Form element to the canvas.

YES: Confirm that the Form Wrapper creates the main structure for the form.

YES: Inside the Form Wrapper, add individual form atoms such as Label, Input, Textarea, Checkbox, and Submit Button.

YES: Arrange the elements to create a typical form layout (for example: Name, Email, Message).
BUT: Rearanging elements in the navigator panel on larger sites is still laggy

YES: Verify that each form field behaves as an independent element and can be freely positioned inside the wrapper.

YES: Add additional elements inside the form structure (such as Text, Icons, or Containers) and confirm they work correctly inside the wrapper.

NO: Select individual form atoms and apply styling using the Style tab.

Can't style the text area and text input field (bg, border) in local

NO: Apply Classes or Variables to form elements and confirm the styles update correctly.
Can't style the text area and text input field (bg, border) with existing classes

YES: Adjust spacing, alignment, and layout of the form fields and confirm the layout behaves as expected.

YES: Configure the Submit Button.

YES: Style and structure the Success and Error messages that appear after form submission.

YES: Preview the page and submit the form.

YES: Confirm that the submission works correctly.
BUT: I'm missing a webhook action in the V4 form for my lead gen automations

YES: Verify that Success and Error states appear as expected after submission.

NO: Open the Submissions area in the WordPress Admin and confirm that the submitted entries appear correctly.
// Sent some forms and see the submissions, but when i click on it, it's empty:

YES: Validate the form behavior in the editor canvas, preview mode, and on the frontend.

[doronwolf]

Oh.. o.k - yeh that makes sense, some theme styles are stronger than classes, so they will affect those inputs if they exist (this is why I asked if your theme is Hello because the 'theme style' in site settings has styling capabilities like a WordPress theme style sheet

[alexander-pankart]

Deleting all values in the v3 theme style form settings solves those errors and the new styles, both local and classes and variables work.

[alexander-pankart]

Placeholders

Is there a better way to change the placeholder text color (and other things related) ?

.elementor textarea#e-form-message::placeholder,
.elementor input.e-form-input-base::placeholder {
    color: #ff0000 !important; 
    opacity: 1 !important;
}

Also i disabled hello theme (and biz) theme styles, because i don't need them when i only use my own classes and variables.

[doronwolf]

Hi @alexander-pankart
You are correct, for now, CSS code is the way to do this - currently the typography color control in the style tab will only affect the style of the text the end user types and not the placeholder text color. To affect the placeholder text color without a CSS code, we will need to add a 'placeholder' state to the style tab states, and you are correct. to point out it's currently missing

[alexander-pankart]

thanks :)

[jlemonz]

Are there already some predefined components made by elementor? That can be used?

[nicholaszein]

Hi @jlemonz! Welcome back! 💪

Currently we are not offering any predefined Component library. This is something we may add in a future version, when there are more Atomic Elements available.

For now, you can start building your own. 😉

Let us know how's your experience with this new release! 💪

[toltechinternet]

Hi,

Thanks for the Atomic Forms release, another great step forward for Version 4.

I’ve been testing the new functionality and had a couple of questions:

1. I noticed there’s currently a limited set of input types available. Are there plans to gradually introduce additional fields such as select dropdowns, date/time pickers, radio buttons, URL inputs, etc.? Should we expect these in the near future, or is the initial release intentionally focused on just text inputs, text areas, and checkboxes?

2. The atomic form settings under "Actions after submit" don't have "Redirect" so that we can redirect users filling out the form to a different page (such as a thank you page for GA4 tracking). Again, the same question: should we expect this in the near future or is the initial release limited for now?

3. Under the atomic form email settings for the message, it states:

"By default, all form fields are sent via [all-fields] shortcode"

However, in the v3 forms, it states a clearer message:

"By default, all form fields are sent via [all-fields] shortcode. To customize sent details, copy the shortcode that appears inside each field and paste it above"

In the v4 atomic editor, it doesn't have the shortcode for each field that is required to build the message, as it has in v3, so someone trying to build their own message wouldn't have the necessary shortcode information, such as [field id="name"]. Could you tweak the message to include the shortcode to alert the user how they can add additional fields to the message?

For example:

"By default, all form fields are sent via [all-fields] shortcode. To customize sent details, use [field id="name"] shortcode for each field and replace the name with your field ID."

4. When a field is toggled as “Required,” there doesn’t appear to be any visual indication on the form itself (such as an asterisk or “required” label). At the moment, the only feedback is shown after attempting to submit the form via a validation message. Would it be possible to include a clear visual indicator on required fields so users can easily identify them before submitting? This would significantly improve usability and align with common form design patterns.

Thanks again, looking forward to seeing how this evolves.

[doronwolf]

hi @toltechinternet
I'm really happy that you raised all those issues because you are nailing it one by one. This is exactly the stuff from our to-do list:

1. Yes, this is like the MVP of the form, and obviously, next phases will have more 'form atoms' and elements, like:

• dropdown (select)
• radio buttons
• Upload files button
• and so on

2. You are correct. Redirect is something that we are currently missing, and we do intend to put it on there to create it in the next phases.
3. You are correct. Right now, we don't have the functionality to enable users to specify specific fields by shortcodes. This is also something we want to address in the next versions,
4. You are correct...but here it's a bit different from V3 - This is atomic form, so because it's atomic, we can't make one atom affect another atom that way..so this one is on the user. Users can simply add an asterisk to the label; it's up to them to do that.
   But it's also a very simple workaround that should be done by the user, so it's not like V3.

[toltechinternet]

Hi @doronwolf

Thanks for the clarification. I understand the intention behind keeping Atomic Forms true to the atomic architecture and avoiding direct coupling between atoms. That said, I think this particular case exposes a gap between the internal architecture and the resulting UX, leading to increased chances of user error (missing or incorrect indicators by manually inputting them), resulting in inconsistency across form validation.

I completely get that one atom shouldn’t directly modify another, but perhaps there’s a middle ground that preserves atomic principles while improving usability.

If possible, introduce a derived or optional “required indicator” that’s tied to the field’s required state. For example:

• When a field is marked as required, the system can optionally render a small indicator (e.g. *) via a label suffix, slot, or token
• This wouldn’t require one atom to directly control another, but rather expose the required state in a way other atoms can consume
• It keeps things flexible for advanced users, while ensuring a consistent default UX

This way, the system remains atomic internally, but still provides a reliable and accessible pattern externally without relying on manual workarounds.

[doronwolf]

Hi @toltechinternet that's intresting idea 💡 I'm going to pass it on to our R&D team and ask them about the feasibility of it..
But it sounds promising 👍

[mcrowell]

Thanks for the update! Testing out the new Atomic Form.

Question: Will the "quick edit options" work with V4 elements in the future?
It's a feature I use all the time.

[nicholaszein]

Hi @mcrowell, welcome to the discussion!

We purposefully did not include those on Atomic Elements. We think using the right-click context menu is a more robust and extended feature, as it doesn't require to move to the corner of the element to execute any actions.

We also haven't finished our innovations yet, and we have something planned you'll probably like. I can't say more than that at this point.

It's just a different way of working with Elementor. 😉

[mcrowell]

So far I came across 2 bugs with the Atomic Forms.

I can't paste in custom CSS to any V4 element.
There's no easy way to change the placeholder text color for input fields.

[nicholaszein]

Hi again @mcrowell. Can you explain the first issue? 🤔

What custom CSS are you trying to paste?

As for placeholders, we don't have this option yet, but we will implement it. See this comment. 😉

[mcrowell]

Sure, with any V4 element I can't do a copy and paste from clipboard into the Custom CSS under Style/ Custom CSS.
Right click and paste doesn't work either in the Custom CSS section of V4 elements.

It works good on V3 elements.
Not sure if it helps but I'm on MacOS Tahoe V 26.3.1.

[nicholaszein]

Oh, ok @mcrowell, I seen now what you're talking about. We have sanitization in this field. Indeed you won't be able to paste anything inside it. We will need to discuss this internally because there is indeed a need to paste in this field, but we need to ensure there is no code injection in all fields.

[alexander-pankart]

In terms of conversion tracking.

If both options are visible in the code and there is no possibility to redirect to a thank you page.
How should a business track that submission for analytics?

[nicholaszein]

Hey @alexander-pankart!

Welcome to the discussion, and thank you for the already valuable feedback! 🙏

About conversion tracking. that's a good question! I assume you've used Google Tag Manager to track each message? Can you share a little more about your use case and how you have been implementing it so far? Also, what would you say would be the best solution for tracking? Do you use any external service like Mailchimp or ActiveCampaign?

About the shortcodes. I see you added your customer's email in the "from field". This should be the email you use on your site for notifications, preferably one connected to a actual SMTP server, or using something like Site Mailer. If the problem is not receiving the email, this is why. Use only the "Reply-to" field for including the customer email. The email still needs to go from a legitimate emails service, one with all the DIKIM, DMARC, and SPF records correctly configured.

[alexander-pankart]

Hi :)

conversion tracking

90% of the time it's the standard tracking with Google Tag Manager.

With a visible indication, that the form was sent:

With a thank you page it's more stable / secure to measure and it doesn't depend on the form itself.

email

I have DKIM, SPF, DMARC and even MTA-STS (and have no money for BIMI <3) and receive all emails from the form.
The problem is, that when a customer is sending the form - the email i get is from myself and not from the customer.

[nicholaszein]

Thanks for sharing the information about GTM. I think the safest way to make this work would be to have a separate Action After submit. Using success and error messages is a way of doing it, but not the most reliable way.

As for the email, if you define the sender as the email from the user who submitted the form, you're essentially spoofing their email. This won't work. The sender should be a valid email from the website, configured through SMTP or other methods (like Site Mailer), and with valid records. To reply to the email form the user who submitted the form, then you can add it to the Reply-To field. So even if the email comes from you, when you reply it, it goes to the form submitter. This is the correct way of handling form submissions without having the email notifications bouncing.

[alexander-pankart]

...essentially spoofing their email...

makes sense.

...then you can add it to the Reply-To field...

With the same shortcode as V3 [field id="xxx"] ? @nicholaszein

Because those shortcodes aren't working, at least not for me.

A further challenge for lead generation arises when using third-party forms with platforms like HubSpot: if a user declines cookies due to GDPR, it is difficult to create a contact record without utilizing a webhook. Failing to implement webhooks in this scenario leads to lost leads. I believe this principle applies universally to other CRM systems, not just HubSpot.

[doronwolf]

Hi @alexander-pankart, this was only the MVP phase of the atomic form. Supporting fields' shortcodes, and adding webhook functionality (and many more goodies) is definitely planned in our next phases of the Atomic Form

[mcrowell]

I’m really enjoying the latest Interactions settings!

Could you please add an option to toggle visual markers, similar to GSAP?

These markers are crucial for saving time when building custom animations or interactions. Without them, we’re essentially guessing, which leads to a lot of unnecessary debugging and wasted time.

[mcrowell]

Thanks! This would be a simple yet very important feature.
Without it most people making these advanced interactions will just continue to use GSAP.

[nicholaszein]

Hey @mcrowell, just so we are speaking the same language, can you share what types of markers you'd like to see, and how you imagine they would be used?

While people who implement GSAP via script may benefit from these markers, they could create confusion for those who are not used to GSAP.

Maybe show an example?

[mcrowell]

Awesome, thanks for considering this feature.

Here’s an example from a project I’m currently building with GSAP and ScrollTrigger effects.

It would be incredibly helpful to display the “Scroller-Start” and “Scroller-End” on screen, along with the “start” and “end” markers.

While these markers can feel a bit confusing at first for new users, once you can clearly see where the effect begins and ends in the viewport, it completely changes how you approach building interactions.

Honestly, it’s hard to imagine using Elementor’s current interactions without that kind of visual feedback, it ends up being a lot of guesswork otherwise.

[nicholaszein]

I understand @mcrowell. I've used this myself in the past.

Such implementation is quite complex and resource intensive, and not really user friendly. It would mean permanently loading a heavy script that recalculates the position of elements in real time, several times, this all inside the Canvas, while also considering the rest of the interface, including the Canvas Drop Area. Personally, I'm not sure this would be a good use of resources. With GSAP you're dealing only with GSAP, on the frontend, while debugging. That's a lot different than implementing the same functionality on the backend. But I do understand what you are talking about, and appreciate the input.

Our team will consider implementing something similar.

[mcrowell]

I totally understand. I’ve noticed that when GSAP markers are enabled in the backend, things can slow down quite a bit and even cause performance issues.

To be completely honest, most people (including myself) tend to avoid Elementor’s built-in interactions. The current approach of using the viewport as a single slider just doesn’t feel intuitive, and it makes the overall experience harder to work with.

I’ve seen other tools like motion.page include visual markers, but they rely on a completely separate editor outside of Elementor, which changes the whole workflow.

From a development standpoint, I understand the limitations you’re dealing with. But as someone actively using these tools, the current viewport slider and interaction system just aren’t very user-friendly. If Elementor wants to support more advanced interactions, it feels like a bigger rethink of the experience is needed and this is the perfect time to do it.

[crispee2000]

Without grids or loop items i don't see myself using this anytime soon. Those seem like baseline things to include in a new version. Maybe I'm reading this wrong.

[nicholaszein]

Hi @crispee2000!

Welcome to the discussion! 🙌

Take a look at our newly updated Roadmap: https://elemn.to/roadmap

Girds and Loops are on the way! 💪

These are more advanced functionalities that requires a little more care and consideration. So we are taking our time to make it right.

Let us know about your experience if you happen to test this release! 🙏

[seriusokhatsky]

What plugins/extensions developers should do to start using new controls with the variables and classes system? Is it possible to somehow migrate old widgets to the new system without creating and maintaining v3 and v4 versions of the same widget?

[nicholaszein]

Hi @seriusokhatsky, welcome to the discussion! 💪

Currently there are no addons that extend V4. So you shouldn't need anything to use on your site.

Converting from V3 to V4 is something that is currently not possible, given it's a more complex task compared to simply converting Sections into Containers. However, we have plans to include a conversion tool in the future.

For now, we recommend using both V3 and V4 widgets side-by-side, or simply building Components that can replace some of the existing widgets.

[seriusokhatsky]

Thank you @nicholaszein

I meant that we have a plugin with our custom widget. For example, we have "Custom banner" and we want to add support for new class-based style settings instead of the old "Advanced" tab. Will it be possible sometime in the future? Or we will need to create one more widget "Custom banner V4"?

[nicholaszein]

Thank you for clarifying @seriusokhatsky!

V3 widgets and V4 atomic elements have different architectures. This means you can't use or add support for Global Classes to V3 widgets. You would need to create a V4 element.

At the moment we don't recommend creating V4 atomic elements, especially since we haven't yet exposed an API for this. We will release an API in the future though.

[alexander-pankart]

Sync Variables and Classes to v3 Global Styles

Colors

WORKS: Open the Variables Manager and create a new Color Variable.

WORKS: Click the three dots next to the Color Variable and select the option to sync it with Global Colors.

WORKS: Verify that the Variable appears in the Global Styles color list.

(Nice and minimalistic. I like it a lot)

WORKS: Update the Color Variable and confirm that the change propagates to the synced Global Color.

WORKS: Add an Atomic element to the canvas and apply the synced Color Variable.

WORKS: Add a legacy widget to the same layout and apply the corresponding Global Color.

WORKS: Confirm that both Atomic elements and legacy widgets display consistent styling.

Typography

WORKS: Open the Class Manager and create a Typography Class.

ERROR: Click the three dots next to the Typography Class and select the option to sync it with Global Fonts.

(There is no option to synch)

Also tried with regular Google fonts, just it's my custom font.

Can't continue with.

• Verify that the Typography Class appears in the Global Styles fonts list.
• Update the Typography Class and confirm that the change propagates to the synced Global Font.
• Apply the Typography Class to an Atomic element and confirm the style is applied correctly.
• Add a legacy widget and apply the corresponding Global Font to confirm styling consistency.
• Disable syncing from the Variables or Class Manager and confirm the Global Styles revert to their default values.
• Validate the behavior in the editor canvas, preview mode, and on the frontend.

[nicholaszein]

Thanks for the update @alexander-pankart! You're killing it! Great feedback! 💪

I see you are trying to Sync Font and Size variables with Global Fonts. In the case of Global Fonts, since they may contain not only the Font Family, but also size, weight, line-height, letter spacing, etc, they can only be converted from the Global Classes manager, not from individual variables.

Try this instead:

1. Add an Atomic Element, for example the Heading.
2. In the Style tab create a new Global Class.
3. Once the Global Class is created and selected, scroll down to the Typography section, select a Font Family, set a font size, weight, style, line-height, and letter-spacing.
4. Then go to the Class Manager (palette icon next to the class selector), click on the 3 dots icon.
5. Select Sync, and follow the rest of the instructions.

Let me know if this works for you. 😉

[alexander-pankart]

That's even better :D

V4 Class Manager

V3 Theme Style Global Fonts

V3 Text Widget

V3 Theme Style Typography

Thank you.

[nicholaszein]

Awesome @alexander-pankart! 💪

[nickdgreen]

After a faux pas on my part (turn on beta testing!) I've had an initial look at the Atomic form. A couple of things leap out: 1. Only one email in V3, there are email1 and email2. More often than not, the email my client wants to send to their customer is different to the one they want to receive themselves (they don't want to log in to see the collected submission. 2. Most of the field types are missing URL, Select, Radio, Date, Time etc. Are these going to be added later?

[nicholaszein]

Hi @nickdgreen! Welcome to the discussion! 🙌

Indeed, there are some missing fields, but we haven't finished with the Atomic Form yet. This is just the first iteration to ensure the structure is correct, and basic functionality works. Once we are confident the base functionality works, we will implement more fields, and integrate more actions after submit, to ensure parity with the existing form.

Thanks for sharing your feedback! Keep it coming! 🙏

[cbspire]

Is it possible to have the Pro beta version available with composer? https://composer.elementor.com/
Thanks

[nicholaszein]

Hi @cbspire! Thank you for joining the discussion! 🙏

Unfortunately, we can't include beta versions in our Composer package. I would recommend following the normal flow by installing Elementor Pro via Composer, then activating Beta testing and updating via the WordPress UI.

[nickdgreen]

V4 Form. I set a field to required, but there doesn't seem to be anywhere to enable the required field mark.

Additionally, with V3 in recognition that all users are stupid, I used to include an html field <p><span style="color: red;">*</span> Required Fields</p>.

In V4 I can add a paragraph, but I can't make the "*" red because html isn't supported. Used just the form as the basic widget.

Submitted the form, selecting email and "collect submission". No email received. The submission appears on the list but shows no content.

Does the V4 form only work with Sendmail?

[nickdgreen]

Oops I included some html that messed up the formatting.
V4 Form. I set a field to required, but there doesn't seem to be anywhere to enable the required field mark. Additionally, with V3 in recognition that all users are stupid, I used to include an html field 'p' 'span' style="color: red;"'*'/span' Required Fields'/p'.
In V4 I can add a paragraph, but I can't make the "" red because html isn't supported. Used just the form as the basic widget. Submitted the form, selecting email and "collect submission". No email received. The submission appears on the list but shows no content. Does the V4 form only work with Sendmail?

[nicholaszein]

I fixed that for you @nickdgreen.

Please see this thread to learn about the required mark.

As for the form Submissions, we are aware of this issue, and our team is already working on a fix. The problem stems from the checkbox field not being correctly mapped. If you remove it, the submission should appear correctly.

As for compatibility with emails services. In general, Elementor Forms (this and the other two we have) use the default email mechanism from WordPress. If you have a plugin that properly hooks into this API, and sends emails via SMTP with all the appropriate and required DNS records for validation, it should work just fine. An example is the Site Mailer plugin. It sends emails via an external API, and it connects to WordPress email API to send the email notifications.

[nickdgreen]

I removed the checkbox, and the submission appeared on the backend. Still no email. I have never had to use a separate third-party SMTP plugin on any Elementor site. The forms (V3) just work fine with the default WordPress mechanism but V4 form doesn't seem to work.

[nicholaszein]

You've been lucky then. You have to use an SMTP or email deliverability service such as Site Mailer to ensure emails go through. It's not Elementor's, neither WordPress responsibility to guarantee the deliverability of emails. Elementor uses the built-in API, and the WordPress API uses PHP_Mail, which is just a for of spoofing an email sender. Email servers no longer accept these emails. The sender needs to be verified and secure for most email services to accept the emails.

[jlemonz]

Are those wobble, wiggle etc effects coming back in v4?

[nicholaszein]

Hi @jlemonz.

Do you want them? All we've been hearing is that they are "too old school", outdated, and obsolete. That people prefer finer control over slide, fade, and scale, and those other animations feel like amateur.

You're the first person asking about them. Do you really think these animations are a must? Is this like top priority in your list of things you want to see in the Atomic Editor?

[contrastxxx]

Widged Button v4 doesn't have an option to add an icon. I understand that I can do it myself using Flexbox, but then what's the point of the widget?

[doronwolf]

We are aiming to stay true to the 'Atomic' approach, so that users who want a simple button can have one and those who want an icon with a button can also create it (and achieve it with a cleaner code than V3 had) - we also plan to have a ready 'button with icon' presets in the future so that users can get it with less effort, but that would be a 'preset', not a widget

[jlemonz]

Are webhooks coming for the new form? And is it correct that sticky is not working when I use the theme builder? I want the header to be sticky but not working

[doronwolf]

1. Yes - webhook is coming in the next phases of the atomic form
2. Note the V4 is using CSS sticky (and not JS sticky like V3 did) - this means sticky behaves as 'stay in column' all the time
   so if you put a sticky element in the header, it reaches the end of the document (/column) right away, so IMO, for V4 header/navigation, it's better to use the 'fixed' option