Team Carousel Widget

Estimated reading: 3 minutes 9 views

Showcase your team members in a modern and interactive way using the Team Carousel Widget from RTMKit Pro. This widget is perfect for displaying team profiles, company members, creative teams, or professional staff with a smooth sliding effect.

Follow the step-by-step instructions:

1. Go to Menu RTMKit Pro.

2. And you will be able to see the Team Carousel Widget.

3. Click Add New Container.

4. Select your layout : Flexbox or Grid.

5. On the canvas select your structure.

6. Drag the widget from the Elementor

7. Drop it on the selected area.

8. Setting Content :

Click Content → Member Content.
In the Content tab, you’ll find several layout styles you can choose from, including Default, Social On Hover, Overlay, and Centered. Select the one that best fits your design concept.
Enable the Pointer Effect if you’d like to add an interactive animation effect to your team card.
Then, choose the appropriate HTML tag and start adding your team members according to your content needs.
Click Add Item to add more member.

9. Setting Navigation :

Click Content → Navigation.
Click Yes to show the navigation.
Click Yes to show the animation.
Click Icon Library → Choose Icon → Click Insert.

10. Settings the logo carousel :

Click Content → Settings.
Adjust the spacing, set how many slides to show, define how many slides scroll at once, and control the transition speed.
You can also enable Autoplay, Show Dots, Pause on Hover, and Loop to create a smoother and more interactive carousel experience.

11. Wrapper Style (used to customize the wrapper style) :

Click Style → Wrapper.
Choose the border type, adjust the border radius, and add a box shadow to enhance the overall appearance.
You can choose the border type, box shadow, adjust the border radius, and configure the hover settings for a more engaging look.

12. Member Image Style (used to customize the member image style) :

Click Style → Member Image.
Adjust the image ratio, apply a hover effect, and set the border type and border radius to match your design.

13. Content Style (used to customize the content style) :

Click Style → Content.
Adjust the alignment and padding, customize typography and spacing, and set the name color, member position color, description color and you can also define the border type if needed.

14. Social Media Style (used to customize the social media style) :

Click Style → Social Media.
Adjust the icon size and spacing, social media color, and configure the border radius, padding, margin, and background color.

15. Dots Style (used to customize the dot style) :

Click Style → Dots.
Adjust the alignment, spacing, width, height, background type, color, border type, box shadow, and border radius.

16. Navigation Style (used to customize the navigation style) :

Click Style → Dot.
Adjust the icon size, navigation spacing, padding, icon color, background color, border type, box shadow, and border radius.

17. Don’t forget to click Publish to save the changes.