How to Use the Atomic Loop

The Elementor Atomic Loop feature (Elementor Pro) allows you to build dynamic, repeatable content layouts directly within the Atomic Editor. Display multiple posts, products, or custom content items using a single, customizable design template.

What is the Elementor Atomic Loop?

The Atomic Loop provides a flexible architecture to display dynamic content (like blog archives or WooCommerce products) while natively integrating with Elementor’s Classes and Variables.

An Atomic Loop consists of three structural elements:

• Loop (Outer Container): Holds the primary query settings. This is where you define the data source (e.g., Posts, Products), items per page, and sorting order.

• Loop Layout: Controls the spatial arrangement (e.g., grid, list) of the repeated items.
• Loop Item: The individual template that gets repeated. You design this single item once, and the loop applies it to all queried content.

How to Create an Atomic Loop with Elementor AI (Angie)

Elementor AI (Angie) can automatically generate a complete Atomic Loop structure, map dynamic fields, and apply design system configurations from a single prompt.

1. Click the Angie AI icon within the Elementor Editor.

   
   

2. Enter a descriptive prompt (e.g., “Create a modern 3-column blog archive layout using Atomic Loop element” or “Generate a WooCommerce product grid”).

   
   

3. Review the generated layout on your canvas to ensure the Loop, Loop Layout, and Loop Item structures are correctly placed.

   
   

4. Verify that dynamic tags (such as Post Title, Featured Image, or Price) are correctly mapped.

   
   

5. To make visual adjustments, hover over the loop and click Edit Loop Item, or select the layer directly inside the Structure.

6. Save your changes and preview the live page to validate the layout.

Tip

Angie can also generate Reusable Components with Exposed Properties. If you ask Angie to create an item template, you can expose variables like headlines or backgrounds to customize individual instances later.

How to Build an Atomic Loop from Scratch

1. Drag the Loop element from the Elementor Panel onto your canvas.

   
   

2. Select the Loop element, navigate to the Content tab, and configure your Query parameters (Source, Item Count, and Sorting Order).

   
   

3. Double-click the Loop element (or select it in the Structure and click Edit Loop Item) to enter Item Edit Mode.

   
   

4. Drag widgets (e.g., Heading, Image) into the item template and map them to dynamic content using the Dynamic Tags icon.

5. Click Save & Back to exit Item Edit Mode.

6. Select the parent Loop element to adjust spacing, columns, and gaps within the Layout panel.

7. (Optional) Right-click your finished Loop Item and select Save as Component to make it available across other loops on your site.

Advanced Capabilities & Migration

Pagination Modes

The Atomic Loop supports customizable, nestable Previous/Next pagination controls with two functional modes:

• Standard Page Reload: Navigates pages via a traditional browser refresh.

• Ajax-based Navigation: Seamlessly swaps content items in real-time without refreshing the entire page.

How to configure your pagination mode:

1. Select the parent Loop element container on your canvas (or locate it within your Structure).
   
2. In the left properties panel, navigate to the Content tab.
3. Scroll down and click to expand the Pagination section.
   
4. Locate the Load Type dropdown menu immediately below it and select either Page Reload or AJAX.
   

Fully Customizable & Nestable Controls

In the Atomic Editor, the Previous and Next pagination controls act as open containers.
You can drop any element directly inside them – like an SVG arrow, image, or heading – to design fully custom navigation controls.

Legacy Template Support

If you have existing V3 Loop Item templates, you can load them directly inside an Atomic Loop as a temporary migration bridge while you transition your site to the Atomic Editor architecture.

How to Use a Legacy Loop Item in an Atomic Loop:

1. Open the page containing your existing Legacy Loop Grid
2. Edit the Loop Item template and copy its content by right-clicking on the widgets you’d like to copy.
3. Exit the template, then right-click and paste the copied content directly inside the Atomic Loop Item element.

⚠️ Important Caution: When exporting, importing, or copy-pasting loops between different websites, ensure your Loop Item template IDs match up correctly to prevent unexpected rendering errors on the destination site.

Frequently Asked Questions

Is the Atomic Loop feature available in Elementor Free?

No. The Atomic Loop architecture requires an active Elementor Pro license.

Can I use the Atomic Loop with WooCommerce?

Yes. The Loop query fully supports WooCommerce products, allowing you to build completely custom shop grids and product archives.

What happens if I edit a Component used as a Loop Item?

Any visual or structural changes made to a master Component will automatically sync across all active Loop instances site-wide.