The journey toward a more modular, high-performance editing experience reaches a major milestone today. Over the past year, we have been laying the groundwork for the Atomic Editor through a series of incremental releases. These early foundations allowed us to refine the architecture and gather vital community feedback. With the release of Elementor 4.0, we are taking the first public step into this new era by making the Atomic Editor the default experience for all new websites.
A New Foundation for the Modern Web
For over five years, the version 3 architecture served as the industry standard, but the demands of modern web development require more efficiency and scalability. In version 4.0, new installations will automatically leverage Atomic Elements, Variables, Classes, and Components. This system-based workflow ensures that creators can build faster and maintain consistency across large-scale projects without the overhead of legacy DOM bloat.
For existing sites, the transition is designed to be seamless and non-disruptive. Updating to 4.0 will not affect your current live sites. Instead, you gain the option to manually enable Atomic features through the Elementor settings in your WordPress admin. This hybrid approach allows you to introduce version 4 Atomic Elements alongside your existing v3 widgets on the same page, giving you the flexibility to adopt the new architecture at your own pace with norebuilds.
Composable Form Building with Atomic Forms
One of the most significant additions for Pro users in this release is the introduction of Atomic Forms. Moving away from the traditional single-widget configuration, Atomic Forms are built using a modular approach. You can now assemble forms by placing individual elements such as Labels, Inputs, Textareas, and Submit Buttons directly into a Form container. This granular control means every part of your form is an independent element that can be styled on its own and integrated into your Classes and Variables.
Because each field is an independent atom, you can nest other elements like icons, images, or layout containers within the form structure. This also allows for complex, multi-column form designs that were previously difficult to achieve.
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.
Advanced Motion with Pro Interactions
Motion design in the Atomic Editor also receives a major upgrade with the introduction of Pro Interactions. While earlier versions focused on basic entrance animations, Elementor 4.0 introduces triggers that respond to real user behavior. You can now trigger animations based on page load, scrolling into view, hover, or click events. This allows for a more reactive browsing experience where elements transform dynamically as the visitor interacts with the content.
The new Custom Effect control provides deep precision over these movements, allowing you to define exactly how an element scales, moves, rotates, or skews. For scroll-linked designs, the new Start and End controls enable you to sync animations perfectly with the viewport or the entire page. To ensure performance remains high across all devices, these interactions include dedicated breakpoint controls, allowing you to simplify or disable complex motion for mobile users while maintaining a high-fidelity experience on desktop.
Design System Synchronization and Portability
As developers transition to system-based styling, maintaining consistency between new Atomic layouts and legacy widgets is essential. Elementor 4.0 introduces the ability to sync Color Variables to v3 Global Colors and Typography Classes to v3 Global Fonts. When these systems are linked, any update made within the Variable or Class Manager automatically propagates to your legacy global styles, ensuring a unified visual identity across your entire site during the migration period.
Furthermore, we are making design systems more portable than ever. You can now export and import Classes and Variables between templates and websites. This is particularly useful for teams who want to move design foundations from staging to production or reuse established systems across different client projects. The import process includes conflict resolution logic, ensuring that incoming styles do not accidentally overwrite your existing site configurations.
Enhancing the Atomic Ecosystem
The Atomic library continues to grow with the addition of a new self-hosted Video element. This element provides a streamlined way to display video files directly from your server with full control over autoplay, looping, and poster images, all while maintaining the clean HTML structure characteristic of the V4 architecture. Additionally, we have updated the Components workflow, introducing a “Detach” functionality that allows you to break an instance’s link to the master component when you need to transform it into a unique, editable layout. This release also introduces inline editing for Atomic Button elements.
By stabilizing the Atomic architecture and making it the default for new projects, we are committed to providing a professional workflow that scales with the complexity of modern web projects. We invite you to explore these new capabilities in the 4.0 Beta and share your feedback as we prepare for the general release in the coming weeks.
