Team member - aThemes Knowledge Base

The Team Member Widget allows you to showcase team members on your website, displaying their image, name, position, short bio, experience, and social media links.

Activate the widget

This widget is part of the aThemes Addons for Elementor plugin. To activate it, go to your admin area, visit the aThemes Addons dashboard, search for the widget, and click on the switch to activate it. It will now be available in your Elementor interface.

Widget options

Image section

Image: Upload or select an image for the team member.
Image Fit: Choose how the image fits within the frame (Cover or Contain).
Image Height: Set the height of the image in pixels or viewport height units.
Image Size: Select the image size (thumbnail, medium, large, etc.).
Image CSS Filters: Apply CSS filters to the image (brightness, contrast, etc.).
Image Hover Effect: Choose an effect when the image is hovered over (Zoom in, Opacity, Zoom & Rotate, etc.).
Transition Duration: Set the duration of the hover effect transition.

Content section

Name: Enter the name of the team member.
Name HTML Tag: Choose the HTML tag for the name (H1, H2, H3, etc.).
Short Bio: Write a brief biography of the team member.
Position: Enter the team member’s position in the company.
Experience: Add a brief description of the team member’s experience.
Alignment: Align the content to the left, center, or right.

Icon: Choose an icon for the social media link.
Link: Enter the URL for the social media profile.
Add More: Click to add more social media links.

Style tab

Customize the appearance of your team member widget under this tab. You have a variety of options to ensure the widget matches your website’s design and branding perfectly.

Card Style

Padding: Adjust the padding inside the card.
Border Radius: Set the border radius for the card.
Background Color: Choose the background color of the card.
Border: Configure the border settings, including color and width.
Box Shadow: Apply a box shadow to the card.

Image Style

Width: Adjust the width of the image.
Border: Set the border for the image.
Border Radius: Adjust the border radius for the image.
Box Shadow: Apply a box shadow to the image.

Name Style

Color: Set the color of the name text.
Typography: Customize the typography of the name text (font size, weight, etc.).
Margin: Adjust the margin around the name text.

Position Style

Color: Set the color of the position text.
Typography: Customize the typography of the position text.
Margin: Adjust the margin around the position text.

Experience Style

Color: Set the color of the experience text.
Typography: Customize the typography of the experience text.
Margin: Adjust the margin around the experience text.

Short Bio Style

Color: Set the color of the short bio text.
Typography: Customize the typography of the short bio text.
Margin: Adjust the margin around the short bio text.

Icon Size: Adjust the size of the social media icons.
Icon Container Size: Set the size of the icon container.
Border Radius: Customize the border radius for the icon containers.
Icon Spacing: Adjust the spacing between the social media icons.
Icon Color: Set the color of the social media icons.
Icon Background Color: Choose the background color for the social media icons.
Icon Hover Color: Set the color of the icons on hover.
Icon Hover Background Color: Choose the background color for the icons on hover.

These style options ensure that your team member section looks professional and integrates seamlessly with your site’s overall design.

Usage tips

Use high-quality images for better visual appeal.
Keep the bio concise and informative.
Provide links to social media profiles for better engagement.

Conclusion

The Team Member Widget is a versatile tool for showcasing your team on your website. With extensive customization options, you can tailor the appearance and functionality to match your needs and provide an engaging user experience.