Using the Team Member Widget

Want to highlight your team members with professional-looking profile cards on your WordPress site? The Team Member widget in aThemes Addons lets you display each person’s image, name, position, bio, experience, and social media links in a clean, customizable layout.

In this guide, we’ll walk you through how to use the Team Member widget in aThemes Addons to create polished team profiles.

Activating the Team Member 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.

Exploring Widget Options

After adding the Team Member widget to your page, you’ll find several sections to configure the team member’s profile.

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.

Social section

  • 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.

Styling the Team Member Card

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.

Social Style

  • 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.

That’s it! You’ve successfully learned how to use the Team Member widget in aThemes Addons to display team profiles on your WordPress site.

Next, would you like to display your team in a carousel layout? Check out our guide on Using the Team Carousel Widget to learn more.