Elementor Team Section with Small Images
This Elementor team section shows a short heading and intro on the left and six team members on the right, each with a small round photo, a name, and a role. Team Section with Small Images is a free, responsive block shared as a JSON file and built only with native Elementor widgets.
What's Inside the Block
- A left column with an H2 heading ("Meet Our Store Crew") and a gray intro paragraph.
- A right column with six team members in a two-column grid, 2 rem apart across and 4 rem apart down.
- Each member has a round 64 px photo, an H3 name in navy, and a role in emerald green (
#007A55). - The heading column takes about one third of the width and the list takes the rest, with 5 rem between them.
- Inter font on a white background. On tablet the heading sits above the list, and on mobile the list becomes one column.
Tip: Keep an even number of members so the two-column grid stays balanced. Use photos that are cropped the same way, with the face in the center, because every photo is cut into a 64 px circle. Use real names and photos only with each person's permission.
Requirements
- A recent version of Elementor with Flexbox Container and Grid Container available.
- No Elementor Pro required.
- The Inter font available on your site (otherwise a fallback font is used).
- Your own photos, one for each team member.
Note: The six Image widgets have no photo selected, so Elementor shows its default placeholder until you choose your own. All six names read "Team Member Name" and the roles are examples, so replace them with your real team. The heading column width uses a custom grid value, so on an older version of Elementor the heading and the list may split the width equally instead. The two columns also stay side by side on smaller laptop screens. Back up your page before importing a template into an existing layout.
Widgets Used
| Element | Purpose | Pro? |
|---|---|---|
| Grid Container | Main two-column layout and the two-column member grid (2 in total) | No |
| Flexbox Container | Heading group, member rows, and name and role groups (13 in total) | No |
| Heading | Section title, intro, names, and roles (14 in total) | No |
| Image | Round team photos (6 in total) | No |
Frequently Asked Questions
How do I import this Elementor JSON template?
First, download the JSON file using the button above and don't unzip or edit it. Second, open your WordPress dashboard, go to Templates, and choose Saved Templates. Third, click Import Templates, select the JSON file, and wait until the template appears in the list.
Fourth, open the page you want to edit with Elementor and click the folder icon to open the template library. Fifth, open the My Templates tab, choose this template, and click Insert. The block is added to your page and can be edited like any other Elementor container.
How do I change the names and roles?
Click a name or a role and type the new text. The name is a Heading widget with the H3 tag, and the role is a second Heading widget below it. To change colors or sizes, select the widget and open the Style tab.
How do I add a team member's photo?
Select the Image widget next to a name, open its Content tab, and choose or upload a photo. The widget is set to 64 by 64 px with the image cropped to fill the circle, so a square photo works best. Repeat this for each of the six members.
How do I add or remove a member?
Duplicate one member row inside the right grid to add a person, or delete one to remove a person. The grid has two columns, so an even number of members stays balanced. If you remove one member, the last row will have an empty space on the right.
Why are the heading and the list different widths?
The main grid uses a custom column value that gives the heading column one third of the width, minus the gap, and gives the rest to the list. If you want a different split, select the outer container, open its Layout settings, and edit the Columns value for desktop.
How does the layout change on tablet and mobile?
On tablet, the main grid becomes one column, so the heading and intro sit above the member list, and the list keeps two columns. On mobile, the list also becomes one column and the space between rows is reduced from 4 rem to 3 rem.
Why are the columns side by side on small laptops?
The side-by-side layout applies to everything above the tablet breakpoint. If you want the heading to stack above the list on smaller laptop screens, turn on the Laptop breakpoint in Site Settings, Layout, Breakpoints, set it to 1279, and then set the outer Grid Container to one column for the Laptop view.
Where should I place this team section?
Place it on an About page after your story or mission, or on the home page before a contact section. Because its heading is an H2, use it after the page's H1 and main content.
Do I need Elementor Pro?
No. The block only uses native Heading and Image widgets inside Flexbox and Grid containers.
Why won't the file import?
Make sure the file has a .json extension and hasn't been unzipped or edited. If it still fails, check your hosting upload size limit or any security plugin that may block file uploads.
Why do the Flexbox or Grid settings look different or missing?
Update Elementor to the latest version. On older versions, the Flexbox Container and Grid Container features may need to be enabled first in Elementor's feature settings.
Why does the font look different?
The block uses the Inter font. If it isn't available on your site, change the font family in the Style tab of each widget.
Looking for more team sections? Browse all Elementor team section templates, or see every free block in Elementor Templates.
Comments
Post a Comment
Post a Comment