Recipe: Building a Team Members Page

This recipe walks you through the complete process of creating a team members page — from setting up field groups to how content managers add and manage team member entries.

Step 1: Create the Field Group

1. Go to Field Forge > New Field Group
2. Title it Team Members
3. Add a Repeater field (PRO) with the label Team Members and name team_members
4. Add the following sub-fields inside the repeater:

1. Set the Repeater display mode to Block (each team member appears as an expandable card, which is easier to manage than a compact table when there are image fields)
2. Optionally set Minimum Rows to 1 (so the page always has at least one team member)

Step 2: Set Location Rules

1. Scroll to the Location Rules section
2. Set: Page is equal to Team (targeting a specific page called “Team”)
3. Alternatively, if you have a Team page template: Page Template is equal to Team Template
4. If you want the team section available on multiple pages, add OR groups for each target page
5. Save the field group

Step 3: Content Manager Workflow — Adding Team Members

Here is what a content manager does to populate the team page:

1. Go to Pages and open the “Team” page in the editor
2. Scroll below the content editor to find the “Team Members” metabox
3. Click Add Row to create the first team member entry
4. Upload a photo by clicking “Select Image” — choose from the Media Library or upload a new headshot
5. Enter the person’s full name, job title, and a short bio
6. Add their email and social media links (optional)
7. Click Add Row again for the next team member
8. Repeat for each person on the team
9. Drag rows by their handles to reorder team members (e.g., leadership first, then alphabetical)
10. Click Update to save the page

Step 4: Display Patterns

Your developer implements the frontend display. Here are common layout options to discuss with them:

Team members displayed in a responsive grid — typically 3-4 per row on desktop, 2 on tablet, 1 on mobile. Each card shows the photo, name, title, and a hover effect reveals the bio and social links. Best for teams of 6-20 people.

A vertical list with the photo on the left and details on the right. Each entry takes the full width. Better for smaller teams (3-6 people) where you want to show more of the bio text.

Cards show photo, name, and title. Clicking a card opens a modal (popup) with the full bio, email, and social links. Good for large teams (20+) where showing all details on the page would be overwhelming.

If your team is organized by department, add a Select sub-field called “Department” with options like “Leadership,” “Engineering,” “Design,” “Marketing.” Your developer can then group the output by department with section headings.

Tips for Content Managers

• Photo consistency: Use photos that are the same dimensions and style (all headshots, all square, same background). This creates a professional, uniform appearance.
• Bio length: Keep bios to 2-3 sentences. The team page is for quick introductions, not full resumes.
• Ordering: Put leadership or key contacts first. Within each group, alphabetical by last name is the standard convention.
• Updates: When someone leaves the team, remove their row. When someone joins, add a new row in the appropriate position. Click Update to save.

—