Team Widget

Content #

The Team Widget allows you to showcase your team members in a stylish and responsive grid layout, complete with social media links and customizable styling.

Team Members #

To add and manage your team:

1. Edit the Widget: Drag the “Team Widget” onto your canvas.
2. Navigate to the ‘Content’ Tab: This is where you add individual team members.
3. Add Items: Click the ‘Add Item’ button. For each team member, configure:
   • Image: Upload a professional photo.
   • Name: The team member’s full name (e.g., John Doe).
   • Position: The team member’s title or role (e.g., CEO).
   • Social Media URLs: Add links to their profiles (Facebook, X/Twitter, Instagram, LinkedIn, etc.). Leave a field blank to hide that specific icon.

Layout Settings #

Control the overall structure of the team grid.

• Team Version: Choose from different pre-designed styles (e.g., Version 1).
• Columns: Set the number of team members to display per row on desktop (e.g., 3).
• Gap Between Items: Adjust the spacing (gutter) between each team member card.
• Equal Height: Enable this option to make all team member cards the same height, creating a uniform grid.
• Height: If “Equal Height” is enabled, use this field to set a fixed height in pixels (e.g., 250px) for all cards.

Style Tab #

The Style tab provides detailed visual control over every component of the team member cards.

You can style the following parts:

• Card Style: Style the container for each team member.
  • Card Background: Set a background color for the entire card.
  • Border Type & Radius: Control the border style and round the corners of the card.
  • Box Shadow: Apply and customize a shadow effect for depth.
  • Padding: Adjust the internal spacing within the card.
• Image Style: Control the appearance of the team member’s photo.
  • Border Type & Radius: Add a border and round the corners of the image (e.g., to create a circle).
  • Box Shadow: Apply a shadow specifically to the image.
  • Spacing: Adjust the margin around the image.
• Content Style: Style the text area containing the name and position.
  • Name: Customize the team member’s name in both Normal and Hover states.
    • Color & Typography: Set the color, font, size, and weight.
  • Position: Style the position/role text separately in both Normal and Hover states.
    • Color & Typography
• Social Icons: Style the social media links.
  • Social Icons: Choose the overall style for the icons.
  • Custom Color: Set the color for the icons. You can usually set colors for normal, hover, and background states.
  • Border Radius: Round the corners of the icon backgrounds (if applicable).
  • Spacing: Adjust the gap between individual icons.
  • Size: Control the size of the icons.