Most team pages we inherit were built by hand. Twelve containers, each with a photo, a name, a title and a bio, all styled separately. When someone leaves, the practice manager deletes a card and the row collapses into an odd gap. When someone joins, they duplicate a card, and it never quite matches the others.
The Loop Grid fixes that. You design one card, tell Elementor where the content lives, and it repeats the card for every staff member or project. Add a new physio and they appear on the page in the right style, in the right order, with no design work. It’s an Elementor Pro widget, so you’ll need a Pro licence.
This is the order we build it in.
Step 1: Decide where the content lives
This is the step people skip, and it’s the one that matters most. A Loop Grid displays posts. That can be ordinary blog posts, but for a team or portfolio you want a dedicated content type: “Team” or “Projects”, sitting in its own menu in the dashboard.
You create that with a custom post type, usually through ACF or a similar plugin. We’ve written about when you need custom post types if this is new territory.
Then decide the fields each entry needs. For a team page at a health practice, a typical set is:
- Name (the post title)
- Photo (the featured image)
- Role, for example “Senior Psychologist”
- Qualifications
- A short bio (two or three sentences) and an optional long bio
- Booking link, if each practitioner books separately
- Display order (a number)
For a builder or designer’s portfolio, swap those for location, project type, year, a gallery and a short write-up.
Write the fields down before you build anything. Adding a field later is easy. Realising halfway through that half your staff have a qualifications line and half don’t is a content problem, not a design one.
Use a taxonomy for anything you’ll filter by
If you want visitors to filter “Psychologists” from “Dietitians”, or “New homes” from “Renovations”, create a category-style taxonomy for it (for example “Discipline” or “Project type”). Filters work on taxonomies, not on free-text fields. A text field called “Discipline” where someone typed “psych” on one entry and “Psychology” on the next will not filter.
Step 2: Enter three or four real entries
Before designing, add a handful of real entries with real photos and real bios. Lorem ipsum hides every problem you need to see: the bio that runs to 200 words, the surname that wraps onto two lines, the headshot shot in landscape.
If the photos aren’t consistent (different crops, backgrounds, lighting), sort that now, even if it means booking a team headshot session so everyone is shot against the same background in the same light. A Loop Grid makes inconsistency more obvious, not less, because every card sits next to its neighbours at the same size.
Step 3: Design the loop item
The loop item is the template for a single card. You can create it from the Theme Builder (choose Loop Item as the template type), or drop a Loop Grid widget on a page and use its create template option. Either way you land in an editor showing one card.
Inside the card, use dynamic tags instead of typed text. The Heading widget gets the Post Title tag. The Image widget gets Featured Image. The role and qualifications come from your custom fields through the ACF Field tag. Our article on dynamic content in Elementor Pro goes through how those tags work.
A few things we do on every loop item:
- Set the image aspect ratio on the container or image, not the upload. That way a slightly off-crop photo still sits in a uniform box.
- Choose heading levels with care. If the page heading is an H1 and the section is “Our team” as an H2, each person’s name is an H3. Don’t make every name an H2 because it looked the right size.
- Keep the card short. Name, role, one line, a link to the full profile. Long bios belong on the single post page, not crammed into a grid.
- Make the whole card’s link go somewhere useful, usually the individual profile page, which you build once as a Single template in the Theme Builder.
Use your global colours and fonts throughout. A loop item styled with one-off colours is the same mess as twelve hand-built cards, just with fewer places to fix it.
Step 4: Place the Loop Grid and set the query
On the actual team or portfolio page, add the Loop Grid widget and select your loop item template. Then work through the settings.
Layout. Set columns per device. Three or four on desktop, two on tablet and one or two on mobile is typical for team cards. Turn on equal height if your cards have varying text lengths, so the rows line up.
Query. Set the source to your custom post type. This is where you can include or exclude by taxonomy term, which is handy if one page shows only clinicians and another shows admin staff. For ordering, team pages usually want a manual order (the practice principal first, not alphabetical), so order by menu order or by your display order field. Portfolios usually go by date, newest first.
Items per page and pagination. A team of 14 can show all 14. A portfolio of 60 needs pagination: numbers, a load more button, or infinite scroll. We lean towards a load more button. Infinite scroll makes your footer unreachable, which is where people go looking for your phone number.
Nothing found message. Fill it in. If a filter returns nothing, “No projects in this category yet” beats a blank space.
Step 5: Add filters if they earn their place
The Taxonomy Filter widget sits above the grid and lets visitors narrow it by category or tag. You link it to the grid with the Selected Loop Grid setting, choose the taxonomy, and decide whether to show an “All” option and whether multiple selections combine with And or Or. Elementor’s Taxonomy Filter documentation covers each setting.
Filtering ideas that help visitors:
- Practices: by discipline (psychology, dietetics, OT), or by who’s taking new clients
- Builders: by project type (new build, renovation, extension) or by town
- Professional services: by team (advisers, support staff) or by speciality
- Designers and photographers: by industry, so a café owner can see hospitality work first
Filtering ideas that don’t: filters with only one or two items in a category, or a filter for every tag you’ve ever used. If a team has eight people, skip the filter entirely. Visitors can see eight faces.
Hide empty items in the filter settings, or you’ll end up with a “Paediatrics” button that leads to the nothing found message.
Step 6: Test it the way a client will use it
Once it looks right, log in as the person who’ll maintain it, usually with an Editor role, and add a new entry from scratch. Can they find where to put the role? Do they know what size the photo should be? Does the new person land in the right spot in the order?
If any of that is unclear, it’ll go wrong within six months. We add short instructions to field labels (“Square photo, at least 800px wide”) and cover it in the handover guide.
Where Loop Grids go wrong
The issues we see most often:
- Built on regular posts. Staff profiles mixed in with blog posts, showing up in the blog feed and the RSS. Use a separate post type.
- Too many fields. Fifteen fields per project means nobody updates the portfolio. Keep it to what the card and profile page actually show.
- No single template. Cards link to a default, unstyled post page. Build the Single template before launch.
- Masonry with mixed images. Masonry layouts look great in the demo and chaotic with real photos. Uniform crops are almost always the better choice.
If you’re weighing up how a project gallery could look for your business, our portfolio shows the range of sites we’ve built. We set up team and project pages like this as part of our WordPress and Elementor web design builds. Still adding each project card by hand on an existing site? Converting it to a Loop Grid is usually a short WordPress and Elementor job, and our contact page is the place to start it.