10Web Help Center

Hi, how can we help?

Team Widget

Copy article URL

in this article

The Team widget is designed to showcase your team members or staff profiles in a stylish and professional way. With multiple customization options, this widget lets you display names, roles, bios, images, and social media links in a format that matches your website’s design and tone.

Adding the Team widget 

  • Find the Team widget under the Elementos section of your 10Web Builder page.
  • Drop the widget onto your preferred location on the canvas.  For details, see Add elements to a page.

Content tab

General 

  • Slider View: can be turned On or Off. If Slider View is On, additional settings become available.
  • Members per Slide: You can set the number of members shown per slide (default or up to 10).
  • Items to Scroll: Determines how many members move with each scroll (default or up to 10).

If Slider View is Off, you will see only Members section where you can enter the following: 

  • Image: Upload a photo of the team member to give a personal touch.
  • Name: The full name of the individual.
  • Title: Their role or designation within the company (e.g., CEO, Developer, Designer).
  • Description: A brief bio or background that tells more about the person.
  • Social Links: Add links to their professional or social media profiles, including:
    Facebook
    LinkedIn
    X Twitter
  • Alignment: Choose how the content inside the widget card is aligned. Left, Center, or Right alignment.
  • Social Links: can be turned On or Off. Enables or disables the display of social media icons.
  • Shape: Controls the shape of various elements, particularly the image and possibly the card or icons. You can choose from rounded, square, circle.
  • Image resolution: Choose the quality and sharpness of the team member image.
  • Image position: Set where the image should appear relative to the content.
  • Image Shape: Define how the team member’s image is displayed. You can choose from circle, square, portrait 9:16, landscape 16:9.

Slider Settings

  • Full-Width Slider: This option overrides the container box width, impacting the overall layout design. It makes the team slider stretch across the full width of the screen, overriding container limits.
  • Slider Layout: Choose the visual structure of the slider between Full-Width or Cut From Right.
  • Transition Duration: Set the speed of the slide transitions.
  • Arrows: Show or hide the navigation arrows used to move between slides.
  • Arrows Icon: Choose the style or type of arrow used.
  • First/Last Slide Arrow: If autoloop is disabled, you can hide or disable the arrows when the slider reaches the first or last team member.
  • Arrows Position: Determines whether the arrows appear Outside or Inside.
  • Arrows Alignment: Choose the alignment of the arrows (left/right, centered, etc.).
  • Pagination: Toggle to show or hide the slide indicator.
  • Pagination Position: Decide whether the pagination appears Inside within the bounds of the slider or Outside positioned just below or outside the slider for a cleaner, more separated look.
  • Pagination Type: Choose if the pagination appears as Dots or Fraction.
  • Pagination Alignment: Control where the pagination appears below content, centered, etc.
  • Autoplay: If enabled, the slider will automatically rotate through members.
  • Autoplay Speed: Set how long each member is shown before switching.
  • Pause on Interaction: Stops the autoplay if a user clicks or hovers, allowing them to read comfortably.
  • Infinite Loop: Enables the slider to loop back to the first team member after the last one, creating a continuous rotation.

Style tab

Members

  • Space Between: Set spacing around the image between other elements.
  • Background Color: Set the background color of each team member card.
  • Border Size: Define the thickness of the border around the member card.
  • Border Color: Choose the color of the card's border.
  • Border Radius: Rounds the corners of the member card.
  • Padding: Add inner spacing between the card content and its edges. 

Image

  • Width: Control how much space the image takes within the card.
  • Gap: Set the space between the image and other elements.
  • Border: Toggle to enable or disable a border around the image. When turned on, the following settings apply:
    Border Color: Choose the color of the image’s border.
    Border Width: Sets the thickness of the border around the image.

Content

Name

  • Gap: Set the space between the name and other elements.
  • Text Color: Define the color of the name.
  • Typography: Choose the font settings for the name.

Title

  • Gap: Set the space between the title and other elements.
  • Text Color: Define the color of the title.
  • Typography: Choose the font settings for the title.

Description

  • Gap: Set the space between the description text and other elements.
  • Text Color: Define the color of the description text.
  • Typography: Choose the font settings for the description text.

Social Icon

  • Gap: Distance between each social icon.
  • Primary Color: The icon’s main color is set to transparent.
  • Secondary Color: The background or secondary area of the icon is black.
  • Size: Overall icon size.
  • Padding: No additional internal spacing around the icon.
  • Spacing: Distance between the icon and other elements (like text or borders).
  • Border Type: Standard border (not explicitly styled).
  • Border Radius: No rounded corners (sharp edges).
  • Icon Hover
    Primary Color: Not set (default or disabled).
    Secondary Color: Not set (default or disabled).
    Hover Animation: No animation effect on hover.

Slider

  • Gap: Set the space between team members slides. This helps control how compact or spread out each slide feels.
  • Arrows: Control the navigation arrows that let slide between members.
  • Arrows Icon size: Adjusts the size of the arrow icons.
  • Arrows Color: Sets the default color of the arrow icons.
  • Arrows Hover Color: Changes the arrow icon color when a user hovers over it with a mouse.
  • Background Color: Sets the background color behind the arrows.
  • Background Hover Color: Changes the background color on hover.
  • Border Type: Lets you add a border around the arrows, like solid, dashed, dotted, etc.

  • Border Radius: Controls the roundness of the arrow container's corners.

    Pagination: This refers to the small dots or indicators below the slider that show which members slide is active.

    Size: Sets how big or small each dot is.
    Color: Defines the color of the active dot.
    Secondary Color: Sets the color of the inactive dots.

Advanced tab

You can customize the widget further using the settings available in the Advanced tab. These options provide additional styling and functionality adjustments, allowing you to tailor the widget to better fit your design needs.

in this article