4.2Loop Builder: grids of articles & products
The essentials in 30 seconds
- The Loop Builder (Pro) lets you draw one single card (loop item) repeated for each item.
- You design the card with dynamic content (image, title, fields), then display it as a grid/list.
- Ideal for homogeneous lists: projects, articles, products — sortable/filterable.
Through-line — Nadia builds the gallery
The joiner now has 20 structured projects (4.1). Nadia wants a nice gallery. With the Loop Builder, she draws one standard card (photo + title + wood + lead time), and Elementor repeats it for each project, in a grid. One card to polish, 20 cards displayed automatically.
Continues 4.1 — displaying structured data in bulk.
1. One card, repeated
The Loop Builder (Pro) flips the logic: instead of placing 20 cards, you draw one single model card (the "loop item") with dynamic content (featured image, title, custom fields). Elementor then repeats it automatically for each item in the list.
Nadia polishes one card (photo + title + wood + lead time): all projects display in this same format, impeccably.
2. Grid, list, filters
You then display these cards as a grid or a list, with pagination. The structured data (4.1) lets you sort (by date, by type) and sometimes filter. The same principle applies to a shop's products (see 4.3).
Advantage: changing the presentation = changing one card, and the whole grid updates. Minimal maintenance for a pro rendering.
🔎 Concrete example — Gallery of projects (Nadia's case)
Loop item: [Photo] [Title] [Wood] [Lead time] + link to the card.
Display: 3-column grid, sort by date, pagination.
→ 20 projects displayed automatically.
→ Change the card (e.g. add dimensions) = the whole grid follows.Result: a pro gallery, maintained via one single card.
Lesson: design the card, leave the repetition to the Loop Builder.
Section vocabulary
- Loop Builder (Pro)
- The tool for designing a repeated card (loop item) displayed for each item.
Simple example: a project card repeated in a grid.
What it is not: manually placing one card per item.
Reflex: homogeneous list → Loop Builder.
- Loop item (model card)
- The single, dynamic card, repeated for each article/product.
Simple example: photo + title + wood + lead time.
What it is not: a frozen card with hard-coded values.
Reflex: polish one card, not twenty.
- Grid / list
- The display of the repeated cards, with sorting and pagination.
Simple example: 3-column grid of projects.
What it is not: a long page with no structure.
Reflex: choose grid or list by content.
- Sort / filter
- Order or filter the cards thanks to the structured data.
Simple example: sort by date, filter by wood type.
What it is not: a random, uncontrolled order.
Reflex: structured data → sorting/filtering possible.
- Centralized maintenance
- Changing the card updates the whole grid.
Simple example: adding dimensions to the card = everywhere.
What it is not: editing each card one by one.
Reflex: a presentation change = one single card.
In practice — Building a dynamic grid
- Design a loop item (card) with dynamic content (image, title, fields).
- Display these cards as a grid and set the number of columns.
- Add a sort (by date) and pagination.
- Change the card and check that the whole grid updates.
Ready-to-say script — presenting the gallery to the client (20 s)
"All your projects display in a nice gallery. I only designed one standard card: when you add a project, it appears automatically, in the same format. And if you want to change the presentation, I change one card and the whole gallery follows."
Highlight the automation and single-point maintenance.
Copy-paste template — Loop plan
LOOP ITEM (card): image ___ title ___ fields ___ link ___
DISPLAY: grid (___ columns) / list · pagination: yes / no
SORT: by date / by field ___ FILTER: yes / no
TEST (adding an item appears automatically): done / to doProjects
Grid of photo + info cards, sorted by date.
Articles
Loop of the latest tips on the home page.
Products
Same principle for the shop (see 4.3).
Mobile
Grid that switches to one column on mobile (responsive).
✓ Best practices
- Design one single polished card (loop item).
- Leverage the structured data for sorting/filtering.
- Check the grid's responsiveness.
✗ Common pitfalls
- Placing one card per item by hand.
- Putting hard-coded values in the card.
- Forgetting the grid's mobile rendering.
Key takeaways
- Loop Builder = one card repeated automatically.
- Dynamic loop item (image, title, fields).
- Sortable and filterable grid/list.
- Changing the card updates the whole grid.
48h challenge — apply tomorrow
Design a loop item (dynamic card) and display a grid of articles or projects sorted by date. Change the card and see the global update. 30 minutes.
- I design a repeated card (loop item).
- I display it as a sortable grid/list.
- I maintain everything via one single card.
Frequently asked questions
What is a loop item?
The model card you design once in the Loop Builder, with dynamic content; Elementor repeats it for each article or product.
Can I sort or filter the grid?
Yes, thanks to the structured data (fields): you can sort (by date, by field) and sometimes filter. That's the whole point of structuring the data in 4.1.
Does the Loop Builder work for products?
Yes: the same principle applies to a WooCommerce shop's products (see 4.3) — a product card repeated in a grid.
The joiner has 20 structured projects. How does Nadia display a maintainable gallery?