Team Members

Showcasing your team effectively on your website can build trust and establish expertise. With the "Team Members" widget in JupiterX, you can easily highlight your team's strengths and personalities. Here's a step-by-step guide on configuring this widget:

Content Tab

Team Members

Add and modify team member profiles with ease:

  • Add Team Member: Click on the "Add Item" button to start adding a new team member entry.
  • Edit Team Member Details: Each team member has adjustable details:
    • Name: Key in the team member's name.
    • Position: State their role or title in the organization.
    • Description: Add a brief biography or intro to the team member.
    • Profile Picture: Click to upload a photo or choose from the media library.
    • Mask Image: Optionally, overlay an image as a mask on the profile picture.
    • Link Type: Define how the profile elements link out, such as to a Custom URL or none.
  • Remove Team Member: Hit the "X" button on a tab to take a member off the list.
  • Reorder Team Members: Drag team member tabs into the order that fits your preference.

Settings

Fine-tune the overall look of the team display:

  • Members/Row: Decide how many team members appear in each row.
  • Layout: Pick the display layout that complements your site's style.
  • Content Alignment: Align your team's info to the left, right, or centre.
  • Image Resolution: Select the desired resolution for profile images.
  • Hover Effect: Choose a hover effect for an interactive element as users engage with profiles.
  • Equal Height: Toggle on to standardize the height of all images, or customize individually by providing specific values.

Content Order

Manage the sequence of information for each profile:

  • Name: Set the display order for the team member's name.
  • Position: Position the role title accordingly in the layout.
  • Description: Decide where the bio appears relative to other info.
  • Social Icons: Order the social icons in terms of appearance.

Style Tab

Container

Start by shaping the overall container that holds the team profiles:

  • Background Type: Opt between a classic color or a gradient for the container's background.
  • Border Type: Define the container's border, choosing from styles like solid, dotted, or dashed.
  • Border Radius: Adjust the corners' roundness for a softer or more angular look.
  • Padding: Modify the internal spacing to make content stand out or blend seamlessly.
  • Margin: Tweak the external spacing to ensure your container fits neatly on your page.
  • Box Shadow: Use shadows to add depth and prominence to the container.

Profile Picture

Personalize how each team member's photo appears:

  • Image Width: Fine-tune the profile image's width to balance it within the container.
  • Alignment: Align the photo left, center, or right, depending on your layout.
  • Border Type: Select a border for the image itself, mirroring your container choices.
  • Border Radius: Round the image corners to match the container or for a unique style.
  • Margin: Manage the space around the image to prevent crowding.
  • CSS Filters: Use filters like hue, brightness, or contrast for artistic effects or to meet accessibility standards.
  • Blend Mode: Play with the blend mode to see how the image interacts with the container's background.

Name

Ensure each team member's name stands out:

  • Color: Pick a text color that is readable and matches your scheme.
  • Typography: Customize the font style to convey the right professional image.
  • Text Shadow: Apply a subtle shadow for depth or clarity.
  • Margin: Add space around the name to draw attention.
  • Padding: Encase the name with internal spacing for a badge-like effect.

Position

Highlight each member's role within the team:

  • Color: Choose a subtle or bold text color to denote positions.
  • Typography: Set the font to distinguish roles from names and descriptions subtly.
  • Text Shadow: Optionally, create text depth to make it pop.
  • Margin: Control spacing around the role for clarity.
  • Padding: Insert padding for a well-defined role display.

Description

Elaborate on your team members with styled descriptions:

  • Color: Decide on a legible color that complements other text elements.
  • Typography: Aim for a readable font that suits narrative text.
  • Margin: Balance the description's text within its surrounding elements.
  • Padding: Ensure comfortable reading space within the description's area.

Social Icons

Social icons are a gateway to more engagement:

  • Color: Define the social icons' color - consider using brand colors or those that contrast nicely with the background.
  • Size: Get the size right for clickability without overpowering the profile.
  • Margin: Adjust the icons' margin to separate them from the text and each other.
  • Padding: Evenly distribute space around the icons to prevent overlap or clutter.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.