Widgets

Team Member

Estimated reading: 9 minutes 722 views

The “Team Member” is a versatile widget that allows users to introduce information about their team members. It enables users to display vital information such as team member names, images, designations, and descriptions in an eye-catching and organized manner.

Additionally, it provides the flexibility of adding social media links to team members’ profiles, making it easy for visitors to connect with them. The widget also includes a button feature that directs users to the full profile of a team member if they want to learn more.

With various styles available, the Team Member widget allows users to showcase their team member profiles in a visually appealing way.

The “Team Member” widget features the following controls:

Content

General

  • Layout: Choose either Grid or Carousel.
  • Style Preset: Choose a style from the various options available.
Team Member: Content Settings
Team Member: Content Settings
  • Team Members: Use Add Item to add team members.
    • Content
      • Select Image: Select the team member image.
      • Image Size: Set the size of an image.
      • Name: Enter the team member’s name.
      • Name HTML Tag: Select the HTML tag for name.
      • Designation: Enter the designation of a team member.
      • Description: Enter the description.
      • Button
        • Text: Enter the button text.
        • Link: Enter the URL to link with a button.
Team Member: Content Settings(individual item)
Team Member: Content Settings(individual item)
  • Social

Note: Users can add up to five social media profiles.

  • Social Icon: Select a social icon from the Icon Library or upload SVG.
  • Social Icon Link: Enter the URL to link with social icon.
Team Member: Social Icon Settings(individual item)
Team Member: Social Icon Settings(individual item)
  • Preview Overlay Content: Toggle the option to preview overlay content during editing mode based on the selected style preset.
Team Member: Preview Overlay Settings
Team Member: Preview Overlay Settings

Grid

Note: These options are only applicable if you select Grid as Layout in the General Section.

  • Column Gap: Set the item’s column gap in px.
  • Row Gap: Set the item’s row gap in px.
  • Columns: Specify the number of columns displayed in each row.
Team Member: Grid Layout Settings
Team Member: Grid Layout Settings

Settings

Image

  • Height: Enter the height of image in px.
  • Width: Enter the width of image in px(applicable for Style 1 only).
  • Image Alignment: Choose from Start, Center, or End.
  • Image Position: Choose from Left, Up, or Right(applicable for Style 1 only).
Team Member: Image Settings
Team Member: Image Settings

Content

  • Alignment: Choose from Left, Center, or Right.
  • Gap: Enter the gap between the content.
  • Separator: Enable the option if needed.
    • Separator Type: Select the type of Separator.
    • Separator Size: Set the size of Separator.
    • Separator Width: Enter the width of Separator using px or %.
Team Member: Content Settings
Team Member: Content Settings

Social Icon

  • Size: Set the size of Social Icon.
  • Gap: Enter the gap between social icons using px, EM, or %.
Team Member: Social Icon Settings
Team Member: Social Icon Settings

Slider Options

Note: These options are only applicable if you select Carousel as Layout in the General Section.

  • Loop: Activate the option to enable slide looping.
  • Effects: Choose from Fade, Slide, Coverflow, or Flip.
  • Multirow: Enable the option if needed(applicable if the above Loop option is not enabled).

Note: These options are only applicable for Slide and Coverflow effects.

  • Slides Per View: Specify the number of slides to be displayed in a row.
  • Slides Per Group: Specify how many slides should move together when navigating through the slider.
Team Member: Slider Options Settings
Team Member: Slider Options Settings

Setting

  • Speed: Set the transition speed when moving one slide to next in ms.
  • Autoplay: Activate the option to enable autoplay while onload.
    • Duration: Set the duration for transition.
  • Space Between Slides: Set the space between slides.
  • Auto Height: Enable the option to set the auto height.
  • Pause On Hover: Enable the option to pause slides during hover.
Team Member: Slider Options General Settings
Team Member: Slider Options General Settings

Pagination

  • Pagination: Set the pagination type.
  • Clickable: Enable the option to make arrows clickable(only applicable for Bullets Pagination type).
  • Keyboard Control: Activate the option to enable keyword control.
  • Scroll bar: Enable the option to display the scroll bar.
Team Member: Pagination Settings
Team Member: Pagination Settings

Prev/Next Navigation

  • Enable: Activate the option to display the arrows.
    • Position: Choose either from Outside or Inside.
    • Icon Prev: Set previous icon either from the library or upload SVG.
    • Icon Next: Set Next icon either from the library or upload SVG.
    • Horizontal Position: Select from Left, Center, or Right.
    • Vertical Position: Select from Top, Middle, or Bottom.
Team Member: Previous/Next Navigation Settings
Team Member: Previous/Next Navigation Settings

Style

General

  • Normal
    • Box Shadow: Set box-shadow properties.
    • Border Type: Select the border type.
      • Width: Enter the width of border.
      • Color: Select the color for border.
Team Member: General Style Settings(Normal)
Team Member: General Style Settings(Normal)
  • Hover
    • Styling controls for the hover state are available under this section. These settings will be applied when Someone hovers the Item Box.
Team Member: General Style Settings(Hover)
Team Member: General Style Settings(Hover)
  • Border Radius: Set border-radius properties.
  • Padding: Set the padding.
  • Margin: Set the margin.
Team Member: General Style Settings
Team Member: General Style Settings

Image

  • CSS Filters: Set the CSS filters properties.
  • Hover CSS Filters: Set the filters for hover image.
  • Border Type: Select the border type.
    • Width: Enter the width of border.
    • Color: Select the color for border.
  • Margin: Set the margin.
Team Member: Image Style Settings
Team Member: Image Style Settings

Overlay

  • Hover Direction: Select the hover direction on overlay.
  • Size: Set the size.
  • Background Type: Select either Classic or Gradient.
    • Classic
      • Color: Choose the color for the background.
      • Image: Either upload an image or select a dynamic tag for display.
    • Gradient
      • Color: Select the color for the background.
      • Location: Determine the position of the color on the background by specifying their location in percentage.
      • Second Color: Select the second color for the background.
      • Location: Determine the position of the second color on the background by specifying their location in percentage.
      • Type: Select either Radial or Linear.
        • Radial
          • Position: Set the position.
        • Linear
          • Angle: Set the angle using DEG, GRAD, RAD, and TURN.
  • Blend Mode: Select the blend mode.
  • Border Radius: Set border-radius.

Content

  • Name
    • Normal
      • Color: Select the color for name.
      • Typography: Set the typography.
      • Text Shadow: Set the text-shadow.
Team Member: Name Style Settings(Normal)
Team Member: Name Style Settings(Normal)
  • Hover
    • Styling controls for the hover state are available under this section. These settings will be applied when Someone hovers the item box.
  • Margin: Set the Margin.
  • Designation
    • Normal
      • Color: Select the color for name.
      • Typography: Set the typography.
      • Text Shadow: Set the text-shadow
Team Member: Designation Style Settings(Normal)
Team Member: Designation Style Settings(Normal)
  • Hover
    • Styling controls for the hover state are available under this section. These settings will be applied when Someone hovers the item box.
  • Margin: Set the Margin.
  • Description
    • Normal
      • Color: Select the color for name.
      • Typography: Set the typography.
      • Text Shadow: Set the text-shadow.
Team Member: Description Style Settings(Normal)
Team Member: Description Style Settings(Normal)
  • Hover
    • Styling controls for the hover state are available under this section. These settings will be applied when Someone hovers the item box.
  • Margin: Set the Margin.
  • Content
    • Box Shadow: Set the box shadow.
    • Border Radius: Set border radius.
    • Padding: Set the padding.
    • Margin: Set the margin.
Team Member: Content Style Settings
Team Member: Content Style Settings

Social Icons

  • Normal
    • Icon Color: Select the color of social icons.
    • Background Color: Select the background color of icon.
    • Border Type: Select the border type.
      • Width: Set the width of border.
      • Color: Select the color of border.
Team Member: Social Icons Style Settings(Normal)
Team Member: Social Icons Style Settings(Normal)
  • Hover
    • Styling controls for the hover state are available under this section. These settings will be applied when Someone hovers the social icon.
Team Member: Social Icons Style Settings(Hover)
Team Member: Social Icons Style Settings(Hover)
  • Box Shadow: Set box-shadow properties.
  • Border Radius: Set border-radius properties.
  • Padding: Set the padding.
  • Margin: Set the margin.
Team Member: Social Icons Style Settings
Team Member: Social Icons Style Settings

Button

  • Alignment: Select button alignment from Left, Center, or Right.
    • Normal
      • Text Color: Select the text color of button.
      • Background Color: Select the background color of button.
      • Border Type: Select the border type.
        • Width: Enter the width of border.
        • Color: Select the color for border.
Team Member: Button Style Settings(Normal)
Team Member: Button Style Settings(Normal)
  • Hover
    • Styling controls for the hover state are available under this section. These settings will be applied when Someone hovers the button text.
Team Member: Button Style Settings(Hover)
Team Member: Button Style Settings(Hover)
  • Typography: Set the typography of button text.
  • Border Radius: Set border-radius properties.
  • Padding: Set the padding.
  • Margin: Set the margin.
Team Member: Button Style Settings
Team Member: Button Style Settings

Box

  • Background Type: As we mentioned above, Select either Classic or Gradient. Click here.
  • Border Type: Select the border type.
    • Width: Enter the width of border.
    • Color: Select the color for border.
  • Border Radius: Set border-radius properties.
  • Padding: Set the padding.
  • Margin: Set the margin.
Team Member: Button Box Style Settings
Team Member: Button Box Style Settings

Carousel

Note: These options are only applicable if you select Carousel as Layout in the General Section.

  • Prev/Next Navigation
    • Normal
      • Color: Select the color of navigation.
      • Background Color: Select the background color of navigation.
      • Border Type: Select the border type.
        • Width: Enter the width of border.
        • Color: Select the color for border.
      • Border Radius: Set the border radius.
Team Member: Previous/Next Navigation Style Settings(Normal)
Team Member: Previous/Next Navigation Style Settings(Normal)
  • Hover
    • Styling controls for the hover state are available under this section. These settings will be applied when Someone hovers the Navigation.
Team Member: Previous/Next Navigation Style Settings(Hover)
Team Member: Previous/Next Navigation Style Settings(Hover)
  • Arrow Size: Set the size of arrow.
  • Horizontal Offset: Set the horizontal offset.
  • Vertical Offset: Set the Vertical offset.
  • Padding: Set the padding.
Team Member: Previous/Next Navigation Style Settings
Team Member: Previous/Next Navigation Style Settings

Note: Only applicable when enabling Scroll bar Type in Slider Options section.

  • Scrollbar
    • Scrollbar Size: Set the size of scrollbar.
    • Scrollbar Drag Color: Select the color for scrollbar drag.
    • Scrollbar Color: Select the scrollbar color.
Team Member: Scroll Bar Style Settings
Team Member: Scroll Bar Style Settings

Note: Only applicable when selecting Pagination Type in Slider Options section, Section name and features vary based on the selected Pagination Type.

  • Fraction
    • Background Color: Select the background color of pagination.
    • Color: Select the color of pagination.
    • Typography: Set the typography.
    • Padding: Set the padding.
Team Member: Fraction Pagination Type Style Settings
Team Member: Fraction Pagination Type Style Settings
  • Bullet
    • Dot Size: Set the bullet dot size.
    • Top Offset: Set the offset from the Top.
    • Active Dot Color: Select the color for active state.
    • Inactive Dot Color: Select the color for inactive state.
    • Margin: Set the margin.
Team Member: Bullet Pagination Type Style Settings
Team Member: Bullet Pagination Type Style Settings
  • Progress Bar
    • Progress Bar Color: Select the color of progress bar.
    • Progress Color: Select the color of progress.
    • Progress Bar Size: Enter the size of progress bar.
    • Margin: Set the margin.
Team Member: Progress Bar Pagination Type Style Settings
Team Member: Progress Bar Pagination Type Style Settings

Check out the Demo page of Team Member.

Share this Doc

Team Member

Or copy link

CONTENTS