Team Members Widget Tutorial

Intro

Premium Team Members Widget is a great way to demonstrate team members, employees, and contributors on your website. With the widget, you can display your team members with their image, name, social media links and description. You can adapt the style of the widget with the help of CSS filters, hover effects, and color options.

Click here to check Premium Team Members Widget demo.

Requirements:

• You will need Premium Addons PRO plugin installed and activated on your website.
• Also, make sure that this addon is enabled so you can find it in the Elementor editor. Check this article to know how to do that.
• Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated as well.

Key Features

• General Settings
• Single Member Settings
• Multiple Members Settings

1. General Settings

• Multiple Member: Enable this option if you need to add multiple members.
• Style: Select from 3 different styles to show the team member.
• Title Rotate: Rotate the title 90 or -90 degrees. (This option only shows when Style 3 is selected.)
• Image Size: Set the image size.
• Width: Select the width of the team member image in Pixel (PX), Em (em), or Percentage (%).
• Alignment: Select the image alignment left, center or right.
• Hover Effect: Select from different styles of hover effect:
  • Zoom In.
  • Zoom Out.
  • Scale.
  • Grayscale.
  • Blur.
  • Bright.
  • Sepia.
  • Translate.
• Content Alignment: Select the content alignment left, center or right.
• Name Tag: Add an HTML tag to the name. Select between H1 to H6, where the H1 is the largest and the H6 is the smallest.
• Title Tag: Add an HTML tag to the name. Select between H1 to H6, where the H1 is the largest and the H6 is the smallest.

After enable Multiple Members option:

• Members/Row: Select how many members to show per row.
• Spacing: Set spacing between member cards.
• Equal Height: Enable this option to make all members’ cards take the same height.

2. Single Member Settings

Member’s set the Image, Name, Job Title, Description and Social Icons.

• Image: Upload or select a custom image from the Media Library.
• Name: Add a member’s name.
• Title: Add the member’s job title.
• Description: Add a short description as it will be shown right after the Job Title.
• Enable Social Icons: Include the optional links for email and for the following social media websites. The social links are displayed below the description.
  • Facebook
  • Twitter
  • Linkedin
  • Google+
  • YouTube
  • Instagram
  • Skype
  • Pinterest
  • Dribbble
  • Behance
  • WhatsApp
  • Telegram
  • Email Address
  • Website
  • Phone Number

3. Multiple Members Settings

• Add Item: Add a new member. Member content is the same as the above single member content.

• Carousel: Enable/disable showing Team Members in a carousel. You will be able to control the following option if the Carousel is enabled.
  • Autoplay: Enable/disable the autoplay of team members’ carousel.
  • Autoplay Speed: Set the autoplay speed.
  • Arrow Position: Adjust the position of carousel arrows.

Style

• Image
• Name, Job Title and Description
• Social Icons
• Content
• Carousel

1. Image

• CSS filters: You can customize the image by selecting one of the available filters: Blur, Brightness, Contrast, Saturation and Hue.
• CSS Hover filters: Select a filter that will be used when a visitor hovers over the image.
• Blend Mode: Set how the team member image should blend with the section background.

2. Name, Job Title and Description

These three sections all have the following options:

• Color: Select a text color.
• Typography: Adjust font settings.
• Text Shadow: Set a shadow for the text and adjust its settings.
• Padding: Creates space around the element inside of any defined margins.
• Margin: Creates a space around the Job Title, outside of any defined padding. You can set the margin in Pixel (PX), Em (em), or Percentage (%).

3. Social Icons

• Size: Set the social icon size.
• Color: Set a color for social icons.
• Hover Color: Select the color that will be used when a visitor hovers over the social icons.
• Background Color: Set the background color for the social icons.
• Brands Default Colors: Enable it to make the icons use the brand’s color as hover background color.
• Hover Background Color: Set on hover background color for social icons.
• Border Type: Set a border type for social icons. Choose from the following border types:
  • None (Default)
  • Solid
  • Double
  • Dotted
  • Dashed
  • Groove
• Advanced Border Radius: Apply custom radius values for Elementor Team Member widget social icons. Get the radius value from here.
• Border Radius: Insert border radius values.
• Margin: Creates a space around the social icons in Elementor Team Members Widget, outside of any defined borders. You can set the margin in Pixel (PX), Em (em), or Percentage (%).
• Padding: Creates space around the social icons in Elementor Team Members Widget, inside of any defined borders. You can set the Padding in Pixel (PX), Em (em), or Percentage (%).

4. Content

• Background Color: Set a background color for the content area.
• Bottom Offset: Adjust the content background offset as per your needs.
• Transition Duration (sec): Set the transition duration for the content.
• Padding: Creates space inside the background in Elementor Team Members Widget. You can set the Padding in Pixel (PX), Em (em), or Percentage (%).

5. Carousel

• Color: Set the color of arrows.
• Hover Color: Set on hover color for the arrows.
• Size: Set the size of the arrows.
• Background Color: Set a background color for the arrows.
• Background Hover Color: Set a hover color for the arrows background.
• Border Radius: Set border radius for arrow backgrounds.
• Padding: Creates space inside the carousel arrows in Elementor Team Members Widget. You can set the Padding in Pixel (PX), Em (em), or Percentage (%)