In this guide, we will show you how to use the “Team Member Carousel widget” on your Elementor website. The Team Member Carousel widget allows you to display your team profiles in an interactive, sliding carousel format. It’s perfect for showcasing your team members with details such as their name, position, description, image, and social media links adding both personality and professionalism to your website. With its responsive design and customizable layout options, the Team Member Carousel widget enhances user engagement and helps build trust with your audience.
Let’s explore the customization options available in the “Team Member Carousel widget” for Elementor below.
Elementor Free Team Member Carousel Tutorial Video
Add a Free Team Member Carousel to Elementor
Add a Free Team Member Carousel Widget to an Elementor Page
Elementor Team Member Carousel Widget General Settings
Items Source
Determines where the carousel content is pulled from.
Items – Manually input content directly into the widget.
Posts – Pulls content from regular WordPress posts or a specified Custom Post Type.
WooCommerce Products – Retrieves data from WooCommerce product listings.
ACF Custom Field – Uses values from fields created with the Advanced Custom Fields plugin.
JSON or CSV – Imports content from an external JSON or CSV file.
Gallery – Displays images from a WordPress gallery.
Terms – Loads taxonomy terms (such as categories or tags).
Users – Pulls information from registered WordPress users.
Menu – Displays items from a WordPress navigation menu.
RSS – Retrieves data from an external RSS feed.
Instagram – Pulls posts or media from an Instagram feed (requires integration).
API Integrations – Connects and pulls data dynamically from an external API source.
Debug – Show Input Data
A developer/debug option. When enabled, it displays the raw input data being processed by the widget for troubleshooting or data verification.
Number of Items
Sets how many items are visible (responsive per device).
Loop
Keeps the carousel cycling continuously.
Autoplay
Slides items automatically on load.
Autoplay Hover Pause
Pauses autoplay when hovered.
Autoplay Timeout
Delay between slides.
Margin Between Items
Space between carousel items.
Transition Speed
Duration of slide animation.
Button Text
Text shown on each item’s button.
Center
Centers the active item in view.
Change On Click
Switches slides when an item is clicked.
Set Active Mode On Mobile
Optimizes active item behavior for mobile.
Random Order
Displays items in a different order each load.
RTL
Enables right-to-left scrolling.
Item Image Size
Sets image display size.
Scroll To Head
Scrolls to the top of the carousel when an item changes.
Show Arrows
Toggles left and right navigation arrows for manual slide control.
Show Dots
Displays pagination dots indicating slide position and count.
Show Image
Shows or hides the team member’s profile picture.
Show Title
Displays the team member’s name.
Show Subtitle
Displays the team member’s job title or role.
Show Text
Toggles visibility of the main description or bio.
Show Button
Shows or hides the call-to-action button.
Show Icons
Enables or disables display of social or contact icons.
Icons Placement
Sets where icons appear (before or after text).
Company Logo
Shows or hides the company logo on the card.
Show Text Header
Displays a small heading above the main description text.
Title
Sets the name of the team member.
Subtitle
Defines the role or position of the team member.
Text
Adds the biography or description of the team member.
Image Size
Sets the size of the team member’s main image.
Button Link
Defines the main link for the entire item or button.
Icon One
Sets the first social media icon.
Icon Two
Sets the second social media icon.
Icon Three
Sets the third social media icon.
Icon Four
Sets the fourth social media icon.
Link One to Link Four
Defines the URLs for the corresponding four social icons.
Company Logo
Adds the logo image associated with the team member.
Additional Image
Toggles a secondary image to display after the text.
Text Header
Sets the company or section header text.
Enable Schema
Enable Schema for the selected widget.
Schema Source
Choose the Schema Source:
From List
Custom
Custom JSON Schema
We can also add a Custom JSON Schema.
Schema Type
Choose the Schema Type:
FAQ (FAQ Page)
List of Person (Person)
How To
Recipe
Courses (Course)
Books (Book)
Items List (ItemList)
Event
Places (Place)
Products (Product)
Tourist Destinations (TouristDestination)
Event Series (EventSeries)
Music Playlist (MusicPlaylist)
Search Results Page (SearchResultsPage)
We are continuously expanding the list of supported Schema types in upcoming releases.
Schema Main Title
Enter a Schema title that describes the action, for example, how to tie your shoes.
Enable Fields Mapping
Enable manual field mapping by roles. Post-related fields are applicable only
When the content is sourced from posts.
Show Schema Debug
Display Schema debug information in the front-end footer.
Elementor Team Member Carousel Widget Style Settings
Item Border Type
Choose the border style.
None
Solid
Double
Dotted
Dashed
Groove
Item Border Width
Set border thickness for each side.
Item Border Color
Pick a border color.
Item Radius
Adjust corner roundness (higher = more rounded).
Item Shadow
Add or customize a box shadow.
Item Background
Set a solid color, image, or gradient background.
Item Scale
Define the default item size (1 = normal).
Item Scale Active
Set item size when active/hover.
Item Opacity
Set default transparency.
Item Opacity Active
Control transparency when active/hover.
Image Height
Sets the fixed height of the image.
Image Width
Sets the fixed width of the image.
Image Margin
Creates space around the image (Top, Right, Bottom, Left).
Image Alignment
Positions the image within its container (e.g., Left, Center, Right).
Image Border Type
Defines the border style around the image.
None
Solid
Double
Dotted
Dashed
Groove
Image Radius
Sets the corner roundness; high values can make the image circular.
Image CSS Filter
Apply visual effects to the image (e.g., Blur, Brightness, Saturation).
Image CSS Filter Hover
Apply different visual effects when the user hovers over the image.
Image Shadow
Add a box shadow effect specifically to the image.
Image Grow On Hover
Animates the image to scale up slightly when hovered.
Overlay Background
Sets the color, gradient, or image for the overlay layer on top of the image.
Overlay Opacity
Controls the transparency of the overlay in its normal state (0 = fully transparent).
Overlay Opacity Hover
Controls the transparency of the overlay when hovered (100 = fully opaque).
Content Background
Sets the background color, gradient, or transparency of the content area.
Content Padding
Adds space inside the content area between the edge and the content itself.
Content Align
Controls horizontal alignment of text and other elements (Left, Center, Right).
Content Min Height
Sets the minimum height for the content area; the area can expand if content exceeds this height.
Icon Hover Effect
Adds a visual animation when the user hovers over an icon.
Icons Spacing (Margin Top)
Adds space above the group of icons.
Icons Size
Sets the size of the icon container.
Icon Size (Inner)
Sets the size of the icon graphic inside the container.
Icon Border Type
Defines the border style around the icon container.
None
Solid
Double
Dotted
Dashed
Groove
Icon Border Width
Set the border thickness.
Icon Border Color
Sets the border color of the icon container.
Icon Radius
Rounds the corners of the icon container.
Icon Margin
Adds space between individual icons.
Icon Color
Sets the color of the icon graphic.
Icon Background
Sets the background color or gradient of the icon container.
Button Padding
Adds space inside the button around the text.
Button Background Color
Sets the button’s default background color.
Button Background Color Hover
Sets the background color when hovered.
Button Text Color
Set the button text color.
Button Text Color Hover
Set the text color on hover.
Button Spacing
Adds space above the button.
Button Border Type
Defines the border style in the normal state.
None
Solid
Double
Dotted
Dashed
Groove
Button Border Hover Type
Defines the border style on hover.
None
Solid
Double
Dotted
Dashed
Groove
Button Style
Determines button layout (e.g., Inline).
Button Radius
Rounds the button’s corners.
Icon Background
Sets the background color or gradient of the icon container.
Nav Arrow Spacing (Horizontal)
Sets the horizontal distance from carousel items or edges.
Nav Arrow Position (Vertical)
Adjusts vertical placement relative to the carousel center.
Nav Arrow Radius
Rounds the corners of the arrow container.
Nav Arrow Background Size
Sets the width and height of the arrow container.
Nav Arrow Icon Size
Sets size of the arrow graphic.
Nav Arrow Background
Sets the arrow container’s default background color or gradient.
Nav Arrow Background Hover
Set background color on hover.
Nav Arrow Icon Color
Sets the arrow icon color.
Nav Arrow Icon Color Hover
Sets the arrow icon color when hovered.
Nav Dots Height & Width
Sets the size of the dots in the normal state.
Dot Color
Sets the color of inactive dots.
Dot Active Color
Sets the color of the active dot.
Nav Dots Active Height & Width
Sets the size of the dot in the active state.
Dot Spacing
Adds space above the row of dots.
Dot Space Between
Sets the horizontal distance between individual dots.
Dot Alignment
Positions the row of dots (Left, Center, Right).
Dot Radius
Rounds the corners of the dots.
Image Height
Sets the fixed height of the additional image.
Image Spacing
Adds space below the image.
Image Fit
Controls how the image scales within its container (e.g., contain, cover, fill).
Image Filter
Apply visual effects like blur, brightness, or saturation.
Image Position
Sets the placement of the image relative to text content (e.g., under text).
Text Header Background
Sets the background color or gradient (can be transparent).
Text Header Color
Sets the color of the header text.
Text Header Typography
Configures font family, size, weight, and style.
Text Header Padding
Adds space inside the header around the text.
Text Header Border Type
Defines the border style around the header area.
None
Solid
Double
Dotted
Dashed
Groove
Team Member Carousel Widget Design Examples For Elementor
Here are some live use cases for the Team Member Carousel widget.
Expanding Content Cards with Team Member Carousel.
Team Members with Team Member Carousel.
Thank you for using the Team Member Carousel widget for Elementor! This engaging and dynamic tool allows you to showcase your team members in a stylish, interactive carousel. Highlight key details such as names, roles, descriptions, images, and social media links to build trust and add a personal touch to your website. Designed for flexibility and responsiveness, it offers full customization options to perfectly match your site’s look and feel. For support or inspiration, feel free to get in touch or explore our demo.