Team Slider Widget Documentation #

Team Slider Widget #

The Team Slider widget allows you to showcase team members in an interactive carousel format with multiple style options. Perfect for displaying staff profiles, company teams, leadership sections, or any group of people with photos, names, designations, and social media links.

Live Demo: https://turbo-addons.com/team-slider/

How to Use the Team Slider Widget #

Step 1: Add the Widget

Open a page in the Elementor Editor.
Search for Team Slider.
Drag and drop the widget into your desired section.

Step 2: Configure Responsive Settings

Go to Content tab → Responsive Settings.

Responsive Items Configure how many team members display at different screen sizes:

Breakpoint – Screen width in pixels (e.g., 0, 600, 1024, 1366).
Items – Number of team members to show (1-10).

Default Settings:

0px (Mobile): 1 item
600px (Tablet): 1 item
1024px (Desktop): 3 items
1366px (Large Desktop): 3 items

Step 3: Add Team Members

Go to Content tab → Team Members.

For Each Team Member:

Upload Image

Upload team member photo from media library.
Supports all standard image formats (JPG, PNG, WebP).
Default placeholder image provided.

Name

Enter team member’s full name (e.g., “John Doe”, “Sarah Johnson”).
Default text is “John Doe”.

Designation

Enter job title or role (e.g., “Web Developer”, “Marketing Manager”).
Default text is “Web Developer”.

Social Media Links (4 slots available) For each social icon slot:

Social Icon – Choose from Font Awesome icons or upload custom SVG.
Social URL – Enter social media profile URL.
Default icons: Facebook, Twitter, LinkedIn, Instagram.
External links: Automatically open in new tab.

Add Multiple Members

Click Add Item to create additional team members.
Reorder members using drag & drop.
Remove members easily when not needed.

Step 4: Choose Style Template

Go to Style tab → Style Template.

Select Style Choose from three distinct layouts:

Style 1 – Card layout with image on top, info below, social icons at bottom.
Style 2 – Image with vertical social icons on side, info below.
Style 3 – Overlay style with hover effects and animated social icons (default).

Step 5: Style the Items

Go to Style tab → Item.

Icon Hover Visibility (Style 2 only)

Enable/disable social icon visibility on hover.
Creates smooth fade-in effect for social icons.

Content Alignment (Style 1 only)

Left – Align content to the left.
Center – Center all content (default).
Right – Align content to the right.

Background

Style 1 & 2: Set card background colors or gradients.
Style 3: Set hover overlay background (appears on hover).

Container Styling

Padding – Internal spacing for team member cards.
Border – Add borders with custom styles.
Border Radius – Create rounded corners.

Step 6: Style the Images

Go to Style tab → Image.

Enable Image Zoom on Hover (Style 3 only)

Enable smooth zoom effect when hovering over images.
Creates engaging visual interaction.

Image Dimensions

Width – Control image width (px, %, em, vw).
Height – Control image height (px, em, vh, %).

Image Styling

Border – Add borders around images.
Border Radius – Create rounded or circular images.
Box Shadow – Add depth with shadow effects.

Step 7: Style Team Information

Go to Style tab → Slider Info.

Align Items (Style 3 only)

Left – Align info content to left.
Center – Center align info content (default).
Right – Align info content to right.

Padding

Control internal spacing for info sections.

Name Styling

Typography – Font family, size, weight, line height.
Color – Set name text color.
Margin – Control spacing around names.

Designation Styling

Typography – Font settings for job titles.
Color – Set designation text color.
Margin – Control spacing around designations.

Step 8: Style Social Icons

Go to Style tab → Icon.

Icon Color

Set color for all social media icons.

Vertical Movement (Style 2 & 3)

Style 2: Control vertical position (-500% to 500%, default: -175%).
Style 3: Control hover animation position (0-100%, default: 30%).

Horizontal Position

Style 2: Choose left or right side placement.
Style 3: Choose left or right side placement (default: right).

Icon Styling

Gap – Spacing between social icons (default: 10px).
Size – Icon dimensions (default: 24px).

State Styling Configure different appearances for:

Normal – Default icon appearance.
Hover – Icon styling on hover.

Available Options for Each State:

Background – Icon background colors or gradients.
Padding – Internal spacing within icon containers.
Border – Icon border styling.
Border Radius – Rounded icon containers.
Box Shadow – Shadow effects for icons.

Step 9: Configure Navigation

Go to Style tab → Navigation Arrow.

Show Navigation

Enable/disable left/right navigation arrows.
Default is disabled.

Navigation Styling

Nav Icon Color – Color for arrow icons.
Nav Icon Size – Size of navigation arrows (10-100px, default: 20px).
Icon Position – Vertical positioning of arrows.

Step 10: Configure Animation

Go to Style tab → Animation.

Animation Speed

Control slide transition speed (100-10000ms, default: 600ms).

Lower values = faster transitions.

Pause on Hover

Yes – Pause autoplay when hovering over slider (default).
No – Continue autoplay even when hovering.

Step 11: Advanced Options

Use Elementor’s Advanced tab for:

Margin & padding
Responsive visibility
Motion effects
Custom CSS (optional)

✅ Final Output #

The Team Slider widget creates a professional, interactive team showcase with smooth carousel functionality, multiple layout styles, and comprehensive customization options—perfect for displaying team members with engaging visual effects.

💡 Tips for Better Results #

Use consistent image sizes for all team members for uniform appearance.
Optimize images for web to ensure fast loading and smooth animations.
Keep names and designations concise for better mobile display.
Test different styles to find the best fit for your design.
Use relevant social media icons that match your team’s actual profiles.
Consider mobile responsiveness when setting item counts for different breakpoints.
Choose appropriate animation speeds that feel natural and not too fast/slow.
Use hover effects sparingly to maintain professional appearance.

Team Slider Widget Documentation #