🔥 Elementor Editor v4.2 Beta Release 🔥 #36286
Replies: 5 comments 5 replies
-
|
Let's go! 🙌 Hey Beta Testers! Excited to see what you build with this version! 💪 Let us know in the comments! 😉 |
Beta Was this translation helpful? Give feedback.
-
shouldt angie show designs in the editor? nothing happens
|
Beta Was this translation helpful? Give feedback.
-
|
Thanks for the update! 🙌 Great to see the new support for Atomic Loop and Grid. |
Beta Was this translation helpful? Give feedback.
-
|
Hi, I am on Elementor 4.1.0-dev3, and Elementor Pro 4.2.0-beta1 but it says i'm up-to-date. I don't see the loop and grids etc. How can I get there features to test this! |
Beta Was this translation helpful? Give feedback.
-
Beta Was this translation helpful? Give feedback.




Uh oh!
There was an error while loading. Please reload this page.
-
Hey Beta Testers, 👋
We’re excited to announce that Elementor 4.2 Beta is now ready for testing.
Elementor 4.2 brings two of the most requested capabilities in the Atomic Editor journey: Grid and Loop, with full support for Components, Variables, Classes, and atomic structure.
Angie also takes a significant step forward, with better layout output, Loop generation, and the ability to create reusable Components with exposed properties.
Make an impact by testing Elementor 4.2 Beta and sharing your feedback on the latest additions, including:
Looking forward to hearing your thoughts and feedback on this update!
Create structured layouts with the Atomic Grid
CSS Grid is now available in the Atomic Editor, making it possible to build fully grid-based layouts: cards, galleries, feature sections, and complex page compositions, entirely within the atomic system.
Classes and Variables apply natively to the new Grid element, without needing to maintain parallel setups.
You can define explicit column and row tracks, span elements across multiple cells, and control auto-placement behavior.
To use it, drag the new Grid element onto the canvas, or select an existing Atomic Flex container and switch its layout to Grid in the Layout panel.
From there, you get full control over the grid structure: set column and row sizes using any CSS unit, including
frfor fractional space, define gaps between tracks, configure auto-flow direction, and set auto-sizing rules for implicit rows and columns.You can also enable Show Grid Outline to see the grid lines rendered live on the canvas while you build. The outline is an editor-only visual aid and does not appear on the frontend.
Span and place elements with precision
Each child container inside a Grid parent gets its own Grid Child controls.
Column Span and Row Span let you stretch any element across multiple tracks, so a featured card can occupy two columns while the rest of the grid fills in around it. Align Self and Order give you per-child control over vertical alignment and source-order placement, independent of the visual 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 fills empty cells left behind by spanned elements instead of leaving gaps. For galleries or card layouts with varying sizes, this keeps the grid tight without manual reordering.
How to test it
[Pro] Build dynamic archives with the Atomic Loop, powered by Angie
The Atomic Editor now powers dynamic content displays with Loops, and the fastest way to build a Loop is to ask Angie.
Describe the layout you want: a blog archive, a product grid, or a portfolio. Angie generates the full Loop structure, maps dynamic fields like post title and featured image, and applies your design system Variables and Classes.
What used to require manually wiring a query, designing an item template, and configuring a layout can now be created from a single prompt. From there, you can publish as-is or keep editing.
This is the recommended starting point for complex Loops. Angie handles the architecture so you can focus on refinement rather than building from scratch.
Complete atomic structure
Atomic Loops are built out of three elements working together, whether you are using Angie or building by yourself.
Loop is the outer container. It holds the query settings, including data source, items per page, and sort order.
Layout controls how items are arranged spatially.
Item is the item template: the design that gets repeated for every matching post, product, or page.
You can edit any of these after Angie generates them. Open the Item to redesign the individual card, change the dynamic fields, or swap the layout entirely. When you’re happy with the item design, save it as a Component and it becomes reusable across other Loops on the site.
Build Loops from scratch
You can also build a Loop by yourself.
Drag the Loop element onto the canvas, set your query in the Loop, define the spatial layout in Layout, then enter the Item edit mode to design the item yourself.
Add dynamic fields such as post title, featured image, price, or any custom field, then exit when done. The Loop renders all matching items using that design.
Components as item templates
Once you have designed your Loop Item, whether Angie generated it or you built it manually, the recommended next step is to save it as a Component.
Select the item design, right-click to save it as a Component, and it becomes part of your site's Component library.
From that point, the same item design can be reused across different Loop contexts: a blog archive, a product carousel, or a featured posts section. If the design changes, it updates everywhere the Component is used.
Legacy template support
For builders 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 means you are not forced to rebuild every Loop from scratch before moving to the Atomic Editor.
Pagination and navigation with atomic control
Just like the legacy Loop, the Atomic Loop supports Previous/Next pagination with two modes: a standard page reload and Ajax-based navigation that swaps items in without refreshing the page.
In line with the atomic architecture, the Previous and Next controls are now also fully customizable and anything can be nested in them. You can replace the default text with an icon, image, or any combination of elements using the same nesting model used everywhere else in the Atomic Editor.
Position them left, right, centered, or spread across the full width using the standard layout controls.
How to test it
Generate consistent and professional layouts with Angie
Angie now generates sections and layouts as native atomic structure: real containers, Classes, and design system Variables. This is the same architecture you would build by hand.
Design and styling quality has also improved broadly, with more consistent use of spacing, typography, and color from your existing design system.
Two specific improvements make this practical.
First, Angie can now build a base design system from a wider range of starting points: a screenshot of a design you want to match, a direct prompt, or pasted CSS from an existing project. Describe it, show it, or hand it over. Angie maps it to atomic tokens and Variables compatible with your design system.
Second, section generation has improved substantially. Ask Angie for a hero section, a features grid, or a content block, and the result lands in the Editor ready to edit, not ready to be rebuilt.
Beyond layouts, as mentioned above, Angie can generate Loops for Pro users, including the full query, layout, and item template structure from a single prompt. Ask for a blog archive or a product grid and Angie wires the Loop, maps dynamic fields, and applies your design system. From there, the standard editing and Component workflow applies.
For Pro users, Angie can now also create reusable Components with exposed properties. When Angie builds a Component, it can surface specific properties: a headline, a background color, or an image, so that each instance of the Component can be customized independently without touching the underlying structure.
For teams building multi-page sites or client projects with repeating patterns, this means Angie can do the Component architecture work, not just the initial design.
The intended workflow of starting with Angie and refining manually now holds up in practice. Both paths are always open and valid, but the starting point Angie provides saves time, unlocks new capabilities, and is worth exploring.
How to test it
Loop with Angie
Design system from image
Additional updates
Atomic Forms improvements [Pro]
Email 2 action after submit - Atomic Forms now support a second email notification as part of the form submission workflow. Configure Email 2 independently from the primary notification, with its own recipient, subject, and content. This is useful for sending a confirmation to the submitter while routing a separate alert to your team.
Settings UI improvements - Atomic Form settings were updated to provide a clearer and more consistent configuration experience.
Autocomplete support - Atomic Forms now includes autocomplete support, improving accessibility and helping browsers provide better autofill behavior for form fields.
More Improvements
Free version
Pro version
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:
This will get you set up to test the new atomic features on Elementor 4.2.
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:
Designated time for release:
July 5th, 2026 (estimated).Many thanks for your support and help!
Cheers,
The Elementor Team
Beta Was this translation helpful? Give feedback.
All reactions