---
title: "How to Show Team Members in Masonry Grid Layout in Elementor?"
url: https://theplusaddons.com/docs/show-team-members-in-masonry-grid-layout-in-elementor/
date: 2023-06-29
modified: 2026-09-27
lang: en
author: "Aditya Sharma"
description: "Want a more dynamic team section than a plain grid? The Team Member Listing widget's Masonry layout packs cards together based on their actual height, giving a staggered, Pinterest-style effect..."
image: https://theplusaddons.com/wp-content/uploads/2023/06/How-to-Show-Team-Members-in-Masonry-Grid-Layout-in-Elementor_-1024x536.jpg
word_count: 288
---

# How to Show Team Members in Masonry Grid Layout in Elementor?

## 

- The Team Member Listing widget in The Plus Addons for Elementor switches to Masonry from the Layout tab, and the widget applies its isotope-based masonry engine automatically with no extra setting required.
- Masonry creates a staggered, Pinterest-style effect by packing cards based on their actual height, so it becomes visually useful when team photos vary in height.
- Uniform placeholder images make Masonry and Grid look the same, and the post says the staggered effect is only visible when member photos have different heights.

Want a more dynamic team section than a plain grid? The Team Member Listing widget's **Masonry** layout packs cards together based on their actual height, giving a staggered, Pinterest-style effect instead of a strict row-by-row grid.

This guide shows how to switch a Team Member Listing widget to Masonry and what to expect.

***Requirement - This widget is a part of The Plus Addons for Elementor, make sure it's installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-listing/#team-members-widget?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## Before You Start

- The Plus Addons for Elementor installed and activated.- Team member entries (repeater or custom post type) with images of varying sizes for the staggered effect to be visible.

## Steps

- Add the **Team Member Listing** widget and add your team members.- Under the **Layout** tab, set **Layout** to **Masonry**.- The widget applies its isotope-based masonry engine automatically - no extra setting is required to enable the packing behavior itself.

![Team Member Listing rendered with Layout set to Masonry.](https://theplusaddons.com/wp-content/uploads/2026/09/team-member-listing-masonry-layout.webp)

Verified on the front end (site 1, 2026-09-27): switching Layout to Masonry adds the `layout-masonry` class and the widget still renders every card correctly. With uniform placeholder images (as in this test) the packing looks identical to Grid - the staggering only becomes visually obvious once member photos have different heights, which this pass did not have real photographic assets to demonstrate.

> *If every team photo is cropped to the same aspect ratio, Masonry and Grid will look the same. Masonry is worth choosing specifically when photos vary in height.*

![A related Team Member Listing configuration with the category filter bar, for comparison of the available layout tooling.](https://theplusaddons.com/wp-content/uploads/2026/09/team-member-listing-category-filter.webp)

## Not verified

So you know exactly what has and has not been checked:

- The visual staggering effect itself, which requires team photos of different heights - this pass used uniform placeholder images, so the masonry packing engine's class/behavior was confirmed but the staggered look was not visually distinguished from Grid.

## Frequently Asked Questions

**Q: What do I need before using Masonry for team members in Elementor?**
A: The key requirement is that The Plus Addons for Elementor is installed and activated, because the Team Member Listing widget comes from that plugin. The staggered Masonry look also depends on team member entries with images of varying sizes, since uniform images make Masonry and Grid look the same. That matters if you want the layout to feel intentionally uneven instead of just rearranged.

**Q: Why does Masonry look the same as a normal grid with my team photos?**
A: Masonry only becomes visually obvious when the team photos have different heights. If every image is cropped to the same aspect ratio, the cards line up in a way that looks identical to Grid even though the widget is still using its masonry engine. The page’s front-end verification also confirmed the layout-masonry class appears, so the behavior is there even when the staggered look is subtle.

**Q: How do I switch a team member listing to Masonry in Elementor?**
A: The layout change happens in the Team Member Listing widget itself. Add the widget, add your team members, then set Layout to Masonry under the Layout tab. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH handles the isotope-based packing automatically, so there is no extra setting just to turn on the masonry behavior.

**Q: Does Masonry work with uniform placeholder images?**
A: It works technically, but it will not show much visual difference. The page’s verification notes say uniform placeholder images still rendered every card correctly and added the layout-masonry class, but the packing looked identical to Grid because there were no real height differences to create a staggered effect. That makes placeholder content a poor test if you are trying to judge whether Masonry is worth using.

**Q: When should I choose Masonry instead of a regular grid for team members?**
A: Masonry makes sense when your team photos vary in height and you want a staggered, Pinterest-style section instead of strict rows. If all photos are cropped to the same aspect ratio, Grid and Masonry will look basically the same, so there is little visual payoff. The practical rule is simple: use Masonry when image heights differ enough for packing to matter.

**Q: Is there a live demo or widget link for this team member masonry layout?**
A: The page includes a live widget link for the Team Member Listing widget: [LIVE WIDGET LINK](https://theplusaddons.com/elementor-listing/#team-members-widget?utm_source=tpae&utm_medium=docs&utm_campaign=text). That is useful if you want to see how The Plus Addons for Elementor presents the widget before building your own section. It also helps confirm you are looking at the same Team Member Listing widget discussed in the tutorial.