Team Members widget

The Team Members widget lets you showcase the people behind your business, organization, or project in a structured team section.

Each team member can include:

  • Photo
  • Name
  • Role
  • Short bio
  • Social links

Team members can be displayed as a grid, list, or slider, and you can customize the photo shape, typography, colors, card styling, and slider behavior.

This article explains how to add and manage team members and customize how the team section is displayed.

Team Members

The main Team Members section contains all people currently included in the widget.

From here, you can:

  • Add team members
  • Edit existing team members
  • Reorder team members
  • Delete team members

Add a team member

Click Add to create another team member.

Reorder team members

Use the drag handle next to a team member to change their position.

The order shown in the settings determines the order in which team members appear on the page.

Edit a team member

Click the settings icon next to a team member to edit their information.

Delete a team member

Click the trash icon to remove them from the widget.

💡 Tip

If some team members are more important for the context of the page, place them first. For example, a founder or primary contact may be more relevant at the beginning of the section.

Team member content

Each team member can include a photo and supporting information.

Photo

Select the photo displayed for the team member.

For the most consistent result, use images with similar:

  • Framing
  • Proportions
  • Background style
  • Image quality

Portraits with the person's face clearly visible usually work best.

Name

Enter the person's name.

For example:

Alex Morgan  

Role

Enter the person's role, title, or position.

For example:

Founder & CEO  

Other examples could include:

  • Business Coach
  • Customer Success Manager
  • Product Designer
  • Marketing Director

Short Bio

Use Short Bio to provide a brief introduction to the person.

For example:

Turning bold ideas into products people love.  

Keep the bio relatively short so the team cards remain easy to scan.

💡 Tip

A short bio is usually more useful than a full biography here. Focus on the person's role, expertise, or what they contribute rather than trying to include their entire background.

Use Social Links to add links to a team member's social profiles or other supported destinations.

Each social link consists of:

  • A selected social platform
  • The corresponding link

For example, you could select:

  • LinkedIn
  • X / Twitter

and enter the relevant profile URL.

Click Add underneath the social links to create another link.

Select the platform and enter the corresponding destination.

Click the trash icon next to a social link to remove it.

💡 Tip

Only add social links that are relevant and actively used. A small number of useful profiles is generally better than linking to every possible network.

Layout

The Layout setting controls how team members are arranged.

Available options:

  • Grid
  • List
  • Slider

Grid

Displays multiple team members next to each other in a structured grid.

This works particularly well for:

  • Larger teams
  • Staff directories
  • About pages
  • Team overview sections

When Grid is selected, you can also control Items per row.

List

Displays team members in a vertical list.

This gives each person more horizontal space and can work well when:

  • Bios are longer
  • Each person needs more prominence
  • You want a more editorial presentation

Slider

Displays team members inside an interactive slider.

This is useful when you have several team members but want to keep the section relatively compact.

💡 Tip

Use Grid for a quick team overview, List when each person needs more space, and Slider when you want visitors to browse several profiles within a smaller section.

Grid settings

The following setting is available when Grid is selected.

Items per row

Controls how many team member cards are displayed next to each other in a row.

For example, setting Items per row to 3   displays up to three team members across each row where space allows.

The ideal number depends on:

  • Available page width
  • Length of bios
  • Photo size
  • Number of team members

Check the result on both desktop and mobile.

Slider settings

When Slider is selected, additional controls become available.

Slider Type

Choose how the slider behaves.

Available options:

  • Single slide
  • Multiple slides
  • Auto rotate (no controls)

Single slide

Displays one team member at a time.

This gives each profile maximum attention.

Multiple slides

Displays several team members at the same time while allowing visitors to browse through the slider.

Auto rotate (no controls)

Automatically rotates through the team members without showing manual slider controls.

Rotate speed

Controls how long the slider waits before moving to the next set of team members when automatic rotation is used.

The value is displayed in seconds (s).

  • Lower value = faster rotation
  • Higher value = slower rotation

Pause on hover

Enable Pause on hover to stop automatic rotation while a visitor places the cursor over the slider.

This gives visitors more time to read a bio or interact with social links.

💡 Tip

If team cards contain bios or social links, give visitors enough time to read and interact with them. Avoid overly fast automatic rotation.

Photo Shape

The Photo Shape setting controls how team member photos are displayed.

Available options:

  • Rounded
  • Circle

Rounded

Displays the photo in a rectangular shape with rounded corners.

This works well for larger portraits or a more card-based design.

Circle

Displays the photo as a circular portrait.

This creates a classic profile or avatar-style presentation.

💡 Tip

Use the same photo shape for all team members to maintain a consistent visual style.

Theme and typography

Theme

Choose the overall visual theme used for the team cards.

Available options:

  • Light
  • Dark

Choose the theme that provides the best contrast with the surrounding page background.

Text Font Family

Controls the font family used for names, roles, bios, and other text in the widget.

For consistency, it is usually best to use typography that matches the rest of your website.

Card styling

Border Radius

Controls how rounded the corners of the team member cards are.

  • Lower values create sharper corners
  • Higher values create more rounded cards

Use a value that fits with the styling used elsewhere on your website.

Card background

Controls the background color of the team member cards.

Choose a color that works with both the surrounding section and the text displayed inside the cards.

Text Color

Controls the primary text color used throughout each team member card.

Make sure there is sufficient contrast against the selected card background.

Accent Color

Controls accent elements within the widget, such as interactive or emphasized details.

For consistency, use colors from your website's Global Colors whenever possible.

Common use cases

The Team Members widget works particularly well for:

  • About pages
  • Meet the team sections
  • Leadership teams
  • Coaching teams
  • Staff directories
  • Expert panels
  • Project teams
  • Agency websites
  • Company pages
  • Course or program instructors

Best practices

  • Use consistent, high-quality team photos
  • Keep names and roles concise
  • Use short bios that explain each person's relevance
  • Add only useful social links
  • Arrange people in a logical order
  • Use Grid for larger team overviews
  • Use List when profiles need more room
  • Use Slider when you want a more compact presentation
  • Avoid overly fast auto rotation
  • Use a consistent photo shape throughout the section
  • Maintain strong contrast between card backgrounds and text
  • Check the presentation on both desktop and mobile

💡 Tip

Visitors usually want to understand who the person is, what they do, and why they are relevant. Make those three things clear before adding additional detail.

Summary

  • The Team Members widget displays people using photos, names, roles, bios, and social links
  • Add, edit, reorder, or remove team members
  • Add multiple social links to each profile
  • Choose between Grid, List, and Slider layouts
  • Grid lets you control Items per row
  • Slider supports Single slide, Multiple slides, and Auto rotate
  • Control rotation speed and pause behavior
  • Choose between Rounded and Circle photo shapes
  • Customize theme, font, border radius, card background, text color, and accent color
  • Check the team section on both desktop and mobile

Used well, the Team Members widget provides a clear and professional way to introduce the people behind your business and build a stronger personal connection with visitors.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.