V4 Early Bird: save 25% on Annual, 30% on Lifetime, and get 2x site activations on every plan. Ends Oct 17.V4 Early Bird: up to 30% off + 2x sites · ends Oct 17. See plans →
Try Animation Addons Free
Atomic Element · Free

Elementor Loop Grid design one card, repeat it for every post, free

Build a card once from atomic elements, point it at posts, products or any custom post type, and the Loop Grid repeats it for every result. No Elementor Pro licence, and pagination is built in.

Download free See the demos
  • Native Elementor 4 Atomic Element
  • No Elementor Pro needed
  • Any post type
  • AJAX pagination and Load More

Animation Addons 4.3Updated

Demo variations

Six ways to use the Loop Grid.

Ideas you can build today with the Loop Grid and native Elementor 4 elements. Cards marked Pro add an Animation Addons Pro extension or element; the rest work on the free plugin.

01Agency blogs and news pages

Studio journal with numbered pages

White page, three columns of cards with a 16:9 image, headline and a two-line excerpt; numbered pagination below swaps pages without reloading.

Built with
Loop Item with Post Image, Post Title and Post Excerpt (Limit By Line Clamp, 2); Source Post; Posts Per Page 9; Load Method AJAX (no reload); Load More hidden in its Style tab so only Previous, Page Numbers and Next show.
Motion
Each card fades up on scroll with Regular Animation on the Loop Grid (Pro extension).
Needs Pro
Regular Animation only.
02Clinics, salons and service businesses that list services as a custom post type

Clinic treatment cards from a custom post type (Free only)

Soft mint background, four-up cards with a square photo, name, one-line summary and a "Book" button.

Built with
Source set to a Treatments post type; Only With Featured Image on; Order By Menu Order, Order Ascending; Loop Item with Post Image (Aspect Ratio 1:1), Post Title, Post Excerpt and a Button linking to the booking page; Loop Layout set to four columns on desktop and one on mobile.
Motion
None.
03Single-post templates that need related reading

"Keep reading" under an article (Free only)

A compact row of three small thumbnail-and-title cards under the article, sharing categories or tags with it.

Built with
Source Related Posts; Related By Categories & Tags; Posts Per Page 3; Pagination removed.
Motion
None.
04Category, tag and search archive templates on content-heavy sites

Recipe archive with Load More (Free only)

A warm, image-led two-column archive; a wide "Load more recipes" button appends the next page under the current cards.

Built with
Source Current Query (Archive); Load Method AJAX (no reload); Previous, Next and Page Numbers hidden, Load More shown; Loop Item built from Post Image and Post Title.
Motion
None; the button gets a hover state from its own Style tab.
05Shops that want product cards designed in Elementor 4

Pro demo: WooCommerce product grid

A four-column grid on light grey: product image, name, price, sale badge and an Add to Cart button.

Built with
Source Product; Post Image and Post Title in the Loop Item, plus the Pro WooCommerce widgets Product Price, Product Badge and Add to Cart.
Motion
Each card tilts toward the cursor with Tilt (Pro extension).
Needs Pro
WooCommerce widgets and Tilt. The Loop Grid itself is free.
06Team pages and member directories built on a custom post type

Architecture team directory

Black-and-white portraits in a five-up grid, name and role underneath, in a manual order; alumni hidden.

Built with
Source set to a Team post type; Order By Menu Order; Meta Key Exists so only people with a role field appear; Exclude Posts for alumni; Loop Item with Post Image (Aspect Ratio 1:1) and Post Title.
Motion
The name lifts when the card is hovered, with Parent Child Hover (Pro extension).
Needs Pro
Parent Child Hover.
Features

What you get with the Loop Grid.

Every option below is a real control in the Loop Grid panel or part of how the element renders. Nothing here needs custom code.

A real loop builder on Elementor Free

The Loop Grid is part of the free Animation Addons for Elementor plugin. You get a card builder, query controls and AJAX pagination without an Elementor Pro licence.

The card is made of atomic elements

The Loop Item accepts Post Image, Post Title, Post Excerpt, headings, buttons, Flexbox and Div Block. Change a Class once and every card on the site follows.

Query exactly what you need

Source lists every public post type, including products. Query Filters add a term picker per taxonomy, Include Posts, Exclude Posts, Authors, Exclude Authors, Date Range, Meta Key Exists, Only With Featured Image and Sticky Posts First; pickers search by name or ID.

Related Posts and archives

Related By offers Categories & Tags, Categories or Tags. Current Query (Archive) makes one grid serve every category, tag and search template.

Pagination visitors can share

With AJAX (no reload), the page number is written to the URL (?aae_page=2), so the back button and shared links land on the right page. Page numbers are real links with "Go to page" labels and aria-current on the active page.

WooCommerce-aware

With Source set to Product, the grid applies WooCommerce catalog visibility and "Hide out of stock items", so it shows what your shop shows.

Card presets from the preset library

Apply Preset on the Loop Item loads ready-made card designs from the Animation Addons preset library, which you then restyle like any other element.

Helpful empty states

An empty query shows "No posts found."; when Loop Filters (Pro) narrow it to nothing, visitors get a Clear all filters link.

Built on the atomic base

How the Loop Grid is built (atomic structure)

Why it mattersOne card serves every result, and Loop Filters (Pro) and the Loop Grid Slider reuse the same query engine, so a grid becomes a filterable shop or a carousel without a rebuild.

StructureNavigator
  • Loop Gridquery, query filters
    • Loop Layoutthe grid area
      • Loop Itemrepeats once per post; Apply Preset, Wrapper Link
        • Post Image, Post Title (seeded) and any atomic elements you add
    • PaginationLoad Method
      • Previous / Next
      • Page Numbersone styled Page Number, repeated per page
      • Load More
Step by step

How to add a loop grid in Elementor 4

Six steps, from installing the plugin to publishing the page. The bold names are the exact labels you will see in the Elementor 4 panel.

Download free

  1. Install and activate Animation Addons for Elementor, then open a page or template in Elementor with the Atomic Editor on.

  2. Drag Loop Grid onto the canvas. It arrives with a Loop Item holding Post Image and Post Title, plus a Pagination bar.

  3. Select the Loop Grid and set Source, Posts Per Page, Order By and Order. Add Query Filters for specific terms, authors or dates.

  4. Select the Loop Item and add Post Excerpt, buttons or layout elements, or start from Apply Preset.

  5. Set columns and gap on the Loop Layout per breakpoint, choose the Pagination Load Method, and hide the pieces you don't need.

  6. Preview on desktop, tablet and mobile, then publish.

Who it's for

Who uses the Loop Grid?

The people who get the most out of it, and what they use it for.

  • Freelancers on Elementor Free

    Who need a real loop builder without buying Elementor Pro.

  • Agencies

    Building service, team and resource grids from custom post types.

  • Bloggers and publishers

    Who want archive templates and related-post rows that match their design.

FAQ

Questions about the Loop Grid

Can I use a loop grid in Elementor without Elementor Pro?

Yes. The Animation Addons Loop Grid is free and runs on Elementor Free. You design a card from atomic elements, choose a post type, and the Loop Grid repeats the card for every result, with AJAX pagination and Load More included. Elementor's own Atomic Loop requires an Elementor Pro licence.

How do I show custom post types in an Elementor loop grid?

Select the Animation Addons Loop Grid, open Query and choose your custom post type under Source; every public post type is listed. Add Post Image, Post Title, Post Excerpt or other atomic elements to the Loop Item, and the Loop Grid fills them with each entry's own content.

How do I make each loop grid card link to its own post?

The Animation Addons Loop Grid's Loop Item has a Wrapper Link that makes the whole card clickable. It stores the URL you set, so a typed URL sends every card to the same page; per-post links need a dynamic tag on that field. If you want cards linked with no setup, the Posts Grid links each card to its post automatically.

Is AJAX pagination in the loop grid bad for SEO?

No. The Animation Addons Loop Grid renders the first page on the server, so those cards are in the page HTML. Page numbers are real links to ?aae_page=N URLs, and AJAX updates the address bar, so crawlers and shared links reach every page. Use Page Reload if you want each page fully server-rendered.

Will a loop grid slow down my page?

The Animation Addons Loop Grid runs one WordPress query per grid, capped at 50 posts per page, and its pagination script only fetches the next page when a visitor asks for it. Keep Posts Per Page sensible, use Only With Featured Image to avoid empty cards, and the grid stays light on mobile.

Can I filter the loop grid by category, price or custom fields?

For a fixed selection, use the free Loop Grid's Query Filters: taxonomy terms, authors, date range, include or exclude posts, and more. For filters visitors click on the page, add Animation Addons Pro Loop Filters, which update the Loop Grid without a reload by taxonomy, price, rating, ACF field, date, author or search.

Does the Loop Grid work with WooCommerce products?

Yes. Choose Product as the Animation Addons Loop Grid's Source. The query applies WooCommerce catalog visibility and hide-out-of-stock settings, so the grid matches your shop. Animation Addons Pro adds atomic Product Price, Product Rating, Product Badge, Product Stock, Add to Cart and Variation Swatches to place inside the card.

What is the difference between Loop Grid and Posts Grid?

The Animation Addons Loop Grid repeats a card you design yourself, for any post type, with Related Posts and archive sources. The Animation Addons Posts Grid is a ready-made blog grid with fixed card parts that link to each post automatically. Choose Loop Grid for custom designs; choose Posts Grid for a quick blog section.

More answers in the FAQ · Documentation · Free vs Pro

Build your loop grid without Elementor Pro

Design one card, repeat it for any post type, and add filters or product widgets with Pro when you need them.

Download free See the demos

Compare Free and Pro

  • Free on WordPress.orgNo Elementor Pro needed
  • Native Atomic ElementUses your Classes and Variables
  • Animation Addons 4.3Updated October 2026