1. Home
  2. Docs
  3. Carousel & Slider
  4. Team Member Carousel

Team Member Carousel SA Element

The Team Member Carousel is a responsive widget that allows you to decorate your support/about us/team/contacts/staff page of the website in a stylish manner. It is a very powerful and lightweight team member carousel and slider element. You can present your company’s professional stuff on your website in a quality and professional way by using this element. Here in this tutorial, you’re going to learn how to use the Team Member Carousel element into Elementor Page Builder. So let’s get straight into it:


If you don’t know how to activate elements and start using it, then check the tutorials below:

Ξ Activate/De-activate Elements

Ξ Using Elementor Addons in Elementor


 

How to Customize the Team Member Carousel Element

 

»Content

 

Team Members

Adding the Items:

⇒Name: Enter the name of the member. Click on Dynamic settings to apply the AnalogWP Classes to the team member name text. (Ex. Add a dark background)

⇒Position: Enter the position of the member. Click on Dynamic settings to apply the AnalogWP Classes to the position text. (Ex. Add a dark background)

⇒Description: If you want to write a short bio about that particular team member, then enter it here. Click on Dynamic settings to apply the AnalogWP Classes to the description text. (Ex. Add a dark background)

⇒Social Links: Add the links or URLs of the social profile in order to redirect your viewers to that particular member’s social profile.

⇒Add Item: Use the ‘+Add Item’ button to add more items to the team member carousel slide.

⇒Show Social Icons: Show/hide social icons on the team.

 

Team Member Settings

⇒Name HTML Tag: Define the HTML tag for the team member name. Respectively h1, h2, h3, h4, h5 & h6 from bigger to smaller in size.

⇒Position HTML Tag: Define the HTML tag for the team member position on the page.

⇒Social Icons Position: Set the social icon position either before the description or after the description.

: Customize the overlay content.

⇒Divider after Name: Show/hide the divider after the name.

⇒Divider after Position: Show/hide the divider after position.

⇒Divider after Description: Show/hide the divider after the description.

 

Carousel Settings

: Set how many items you want to be visible on the carousel for different dimensions.

⇒Margin: Set a margin value of the carousel for different dimensions.

⇒Autoplay: Enable/disable the autoplay of the team member carousel.

⇒Autoplay Speed (ms): Set the autoplay speed in the carousel based on ms.

⇒Pause On Hover: Want to pause your carousel when hovering on the slider area? Enable/disable it here.

⇒Infinite Loop: Enable/disable the infinite loop to the team member’s carousel.

⇒Grab Cursor: Shows grab cursor when you hover over the slider.

⇒Navigation: 

→Arrows: Enable arrows as the navigation in the team member carousel.

→Dots: Enable dots as the pagination in the team member carousel.


»Style

 

Box Style

⇒Alignment: Set the team member box alignment either left, right or center for different dimensions.

 

Content

⇒Background Type: Add a custom color to the background of the team member content.

⇒Border Type: Here, select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the team member content for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the border.

⇒Border Radius: Set the border-radius around the team member carousel for different dimensions.

⇒Padding: Set the padding value for the top, right, bottom and left around the team member carousel content for different dimensions. You can link the values together or customize them individually.

⇒Box Shadow: Customize the box-shadow color, set the horizontal and vertical value of the shadow, control the blur radius and spreading, and set the position either outline or inset.

 

Image

⇒Image Width: Set the width of the team profile image manually for different dimensions.

⇒Border Type: Here, select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the team member image for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the border.

⇒Border Radius: Set the border-radius around the team member image for different dimensions.

⇒Margin Bottom: Set a margin value for the bottom of the team member image for different dimensions.

 

Name

⇒Typography: Set the typography options for the name.

⇒Color: Add a custom color to the team member name text.

⇒Margin Bottom: Set a margin value for the bottom of the name for different dimensions.

Position

⇒Typography: Set the typography options for the position text.

⇒Color: Add a custom color to the team member position text.

⇒Margin Bottom: Set a margin value for the bottom of the position text for different dimensions.

 

Description

⇒Typography: Set the typography options for the description text.

⇒Color: Add a custom color to the team member description text.

⇒Margin Bottom: Set a margin value for the bottom of the description for different dimensions.

Social Icons

⇒Icons Gap: Add a custom space to the right side of each social icon.

⇒Icon Size: Manually customize the size of the icons for different dimensions.

⇒Icons Color: Add a custom color to the Social Icons for both normal and hover view.

⇒Background Color: Add a custom color to the Social Icons background for both normal and hover view.

⇒Border Type: Select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the social icons for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the border for normal view.

⇒Border Radius: Set the border radius for the top, right, bottom and left around the social icons for different dimensions.

⇒Padding: Set the padding value for the top, right, bottom and left around the icons inside of any defined border for different dimensions. You can link the values together or customize them individually.

Arrows

⇒Choose Arrow: Add an icon for the navigation arrow.

⇒Arrow Size: Manually customize the size of the arrows for different dimensions.

⇒Align Left Arrow: Customize the align of the left arrow for different dimensions.

⇒Align Right Arrow: Customize the align of the right arrow for different dimensions.

⇒Background Color: Add a custom background color to the navigator arrows for both normal and hover.

⇒Color: Add a custom color to the navigation arrow in the team member carousel for both normal and hover view.

⇒Border Type: Here, select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the navigator arrow for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the border for both normal and hover view.

⇒Border Radius: Set the border-radius around the arrow for different dimensions.

⇒Padding: Set the padding value for the top, right, bottom and left around the arrow for different dimensions. You can link the values together or customize them individually.

 

Dot

⇒Position: Set the position of the pagination dot either inside or outside.

⇒Size: Manually customize the size of the dots for different dimensions.

⇒Spacing: Add a custom space to the right side of each pagination dot.

⇒Color: Add a custom color to the pagination dot for both normal and hover.

⇒Active Color: Add a custom color to the active pagination dot in the team member carousel.

⇒Border Type: Here, select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the pagination dot for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the border for both normal and hover view.

⇒Border Radius: Set the border-radius around the dot for different dimensions.

⇒Margin: Set the padding value for the top, right, bottom and left around the pagination dot for different dimensions. You can link the values together or customize them individually.

 


»Advanced

Set the Advanced options that are applicable to this widget

Still can’t figure out? Don’t worry, we got your back! Just watch the video tutorial below to have a precise understanding of Team Member Carousel Element.


Was this article helpful to you? Yes No

How can we help?