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.

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.

Image Style #

This section allows you to customize the appearance of the team member’s profile photo.

• Object Fit: Define how the image should be resized to fit its container, with options like Cover to ensure the image fills the space without distortion.
• Image Position: Specify the focal point of the image (e.g., Top Center) to ensure the most important part of the photo remains visible.
• Border Type: Choose a border style (e.g., Solid, Double) or keep it as Default.
• Border Radius: Adjust the corner roundness of the image by entering pixel values for the Top, Right, Bottom, and Left corners.
• Box Shadow: Use the pencil icon to add a shadow effect, providing depth to the team member’s image.

Style Tab: Content Style #

This section manages the typography, color, and alignment for the team member’s name and professional position.

Name #

Customize the primary identifier for the team member.

• Alignment: Set the horizontal text alignment to Left, Center, or Right.
• Color: Define the text color for the name in both Normal and Hover states.
• Typography: Access full font controls, including family, size, weight, and line height.

Position #

Style the job title or designation text.

• Color: Select a specific text color for the member’s position for both Normal and Hover states.
• Typography: Customize the font settings independently from the name to create a visual hierarchy.

Style Tab: Social Icons #

This section provides customization options for the social media icons associated with team members in the Team Widget.

• Custom Color: This feature is Off by default. When toggled On, it allows you to define specific colors for the icons for both Normal and Hover states.
• Background Color: Select a custom background color for the social icon containers.
• Color: Set the primary color for the social icons themselves.
• Border Radius: Adjust the roundness of the icon containers by defining pixel values for each corner. Use the link icon to apply a uniform radius or set individual values for Top, Right, Bottom, and Left.