Elementor 4.2 Beta delivers two of the most-requested features on the Atomic Editor roadmap: CSS Grid and Loops, both built with native support for Classes, Variables, and Components. Beyond these structural additions, this release introduces enhancements to Atomic Forms, including secondary email actions and improved accessibility features. We have also resolved critical performance regressions related to nested Containers and addressed a wide array of stability and correctness issues across the platform to ensure a smoother, more reliable development environment.
CSS Grid in the Atomic Editor
Elementor 4.2 introduces a dedicated Grid element to the Atomic Editor, making it possible to compose fully grid-based layouts including cards, galleries, feature sections, and complex page structures entirely within the atomic system. Classes and Variables apply natively to Grid elements, so developers do not need to maintain parallel setups or reach outside the design system to control grid styling.
Users have explicit control over column and row track definitions using any valid CSS unit, including fr for fractional space allocation. Gap settings, auto-flow direction, and auto-sizing rules for implicit rows and columns are all configurable directly in the panel. Enabling Show Grid Outline renders live grid lines on the canvas for visual reference during construction. This outline is an editor-only aid and produces no output on the frontend.
Per-Child Span, Placement, and Dense Auto-Placement
Each child container inside a Grid parent receives its own Grid Child controls. Column Span and Row Span allow any element to stretch across multiple tracks, so a featured card can occupy two columns while surrounding items fill in naturally. Align Self and Order provide per-child control over vertical alignment and visual source-order placement, independently of the structural result.
One addition that is new to the Atomic Editor and was not available in the classic Grid widget is Dense auto-placement. When enabled, the grid algorithm actively backfills empty cells left behind by spanned elements rather than advancing past them. For gallery or card layouts with varying element sizes, Dense mode keeps the grid visually compact without requiring manual reordering of items.
[Pro] Loop: Dynamic Content in the Atomic Architecture
Users can set the query in the Atomic Loop container, define the spatial arrangement in the Layout, then enter the Loop Item edit mode and add dynamic fields directly. The Loop renders every matching item using that design once you exit. Users can also use Angie to generate Atomic Loops.
Legacy template support
For developers with existing V3 Loop Item templates, those templates can be loaded inside an Atomic Loop Item as a migration bridge. This is not the intended long-term pattern, but it eliminates the requirement to rebuild every Loop from scratch before transitioning to the Atomic Editor.
Pagination with Fully Atomic Controls
The Atomic Loop supports Previous/Next pagination in two modes: a standard page-reload and Ajax-based navigation that swaps items in place without a full page refresh. In line with the atomic architecture, the Previous and Next controls are now fully customizable.
Atomic Forms Improvements [Pro]
Elementor 4.2 adds Email 2 as a second email action in the Atomic Forms submission workflow. Email 2 is configured independently from the primary email notification, with its own recipient, subject line, and message content. This supports the common pattern of sending a confirmation to the submitter while routing a separate internal alert to the site team.
Atomic Forms now include autocomplete support, which improves accessibility and enables browsers to surface accurate autofill suggestions for form fields. The Atomic Forms settings UI has also been updated for a clearer and more consistent configuration experience. Accessibility support for form success and error messages after submission has been added as well, ensuring screen readers and assistive technologies can surface submission feedback reliably.
Angie AI Enhancements
In this version, Angie evolves into a more robust design collaborator within the atomic architecture. It can now assist with full Atomic Loop structure generation—automating the setup of queries, spatial layouts, and dynamic field mapping—and create native atomic layouts and sections directly from design tokens or visual inputs. Additionally, Angie can now generate reusable Components with exposed properties for independent customization and offers expanded dynamic tag support for AI-generated properties, ensuring AI-assisted workflows remain flexible and fully integrated with the design system.
Optimized Performance: Improved Nested Container Handling
Elementor 4.2 addresses performance regressions previously encountered with highly nested Container structures. While deep nesting could previously impact Editor responsiveness and resource usage, especially on complex pages, this update optimizes how the Editor calculates layout structures. These improvements help ensure that pages with intricate, grid-like, or multi-level layouts remain performant and responsive during editing.
To Conclude
Elementor 4.2 Beta marks a substantial step forward for the Atomic Editor. CSS Grid brings professional layout composition fully into the atomic system, and Loops bring dynamic content there as well, with Angie now able to generate complete, wired Loop structures from a single prompt. The critical nested Container performance fix removes a blocker that was limiting what developers could realistically build in complex page structures. With these enhancements, Elementor 4.2 delivers the reliability and robust feature set users need to build more complex and performant sites with confidence.
