Sky Addons for Elementor

⌘K
  2. Home
  4. Sky Addons for Elementor
  6. Carousel & Slider
  8. Team Member Carousel

Team Member Carousel

How to use Team Member Carousel Widget of Sky Addons for Elementor

The Team Member Carousel widget for Elementor by Sky Addons presents your team in a smooth, swipeable carousel with six distinct card styles — Default, Ardent, Folk, Folker, Slide, and Mold. Build members manually with the repeater or pull them dynamically from posts with the built-in Query builder, complete with meta-key mapping for job titles and social links. Each member card supports a photo (with an optional alternative hover image), name, job title, short text, up to six social icons, and a customizable button. This documentation will guide you through the process of using the Team Member Carousel widget to introduce your people beautifully.

Features:

  1. Six Card Styles: Default, Ardent, Folk, Folker, Slide (with four reveal directions), and Mold.
  2. Two Content Sources: A flexible repeater or Dynamic Posts via the Query builder.
  3. 1–6 Responsive Columns: Separate column counts for desktop, tablet, and mobile.
  4. Alternative Image: Swap to a second photo on hover (repeater mode).
  5. Social Icons: Facebook, Twitter, LinkedIn, Instagram, YouTube, and Website links per member.
  6. Carousel Controls: Full carousel settings plus navigation arrows and pagination.
  7. Deep Styling: Ten style sections covering the item, member card, image, name, job title, text, socials, and button.

Insert Team Member Carousel Widget

  1. Open Elementor Editor. In the Elementor panel, search for “Team Member Carousel” under Sky Addons.
  2. Drag and Drop the Widget to the desired location on your page / editor.

Configure Layout

  1. Content Source: Choose Default (Repeater) to add members manually, or Dynamic Posts to generate members from your posts.
  2. Select Style: Pick one of six designs — Default, Ardent, Folk, Folker, Slide, or Mold.
  3. Slide Effect: For the Slide style, choose the reveal direction — Top to Bottom, Bottom to Top, Left to Right, or Right to Left.
  4. Columns: Show 1 to 6 members per view, responsive per device.
  5. Image Position: Left, Top, or Right (Default style only).
  6. Name HTML Tag / Job Title HTML Tag: Pick semantic tags for SEO.
  7. Show Job Title, Alternative Image, Show Social Icons, Show Button: Toggle the parts you need. Alternative Image swaps in a second photo on hover (Repeater mode only).

Note: in the Mold style, the Short Text and Button are not visible by design.

Configure Members (Repeater)

Each member item has two tabs:

  1. Member tab: Choose Image (with image size), an optional Alternative Image (with its own size) shown on hover, Name, Job Title, and Short Text. All fields support dynamic tags.
  2. Links tab: A profile Link, the member’s Button Text, and URL fields for Facebook, Twitter, LinkedIn, Instagram, YouTube, and Website.
  3. Drag members to rearrange their order in the carousel.

Dynamic Posts (Query)

Set Content Source to Dynamic Posts and a Query section appears:

  1. Select the post type (e.g. a Team custom post type) and refine by terms, authors, or other parameters; set Posts Per Page.
  2. Job Title Meta Key: Optional custom field key used as each member’s job title — leave empty to hide it. The post excerpt is used as the short text.
  3. Social Links (Meta Keys): Optionally map each social platform (Facebook, Twitter, LinkedIn, Instagram, YouTube, Website) to a custom field key holding a URL.

Configure Button

  1. Button Text: In Dynamic Posts mode, one label (default “Read More”) applies to every post; in Repeater mode each member has its own button text.
  2. Button Position: Before or after the social icons.
  3. Full Width & Alignment: Stretch the button and align its label.
  4. Icon, Icon Position, Icon Spacing: Add an icon on the left, right, top, or bottom of the label with adjustable spacing.

Carousel Settings, Navigation & Pagination

  1. Carousel Settings: The standard Sky Addons carousel options — autoplay behavior, speed, looping, spacing, and related slide settings.
  2. Navigation: Enable and position previous/next arrows, then style them in the Style tab.
  3. Pagination: Enable dots/fraction-style pagination and customize its appearance.

Style Your Team Carousel

Customize every layer of the carousel to match your design aesthetics effortlessly:

  1. Carousel Item:
    Spacing and emphasis for slides, including styling for the active slide.
  2. Member:
    The member card’s background, padding, border, radius, and shadow.
  3. Mold Content:
    Dedicated options for the Mold style’s content area.
  4. Overlay:
    The hover/reveal overlay color and behavior used by overlay-based styles.
  5. Image:
    Size, border, radius, shadow, and CSS filters for member photos.
  6. Name & Job Title:
    Color, typography, spacing, and hover states for each.
  7. Text:
    The short text color and typography.
  8. Social Icons:
    Icon size, spacing, colors, backgrounds, borders, and hover effects.
  9. Button:
    Typography, padding, radius, and Normal/Hover colors for the member button.

Save and Preview

  1. Once you’ve customized and styled your carousel, click “Publish” or “Update” to save your changes.
  2. Preview the page to ensure the widget looks and functions as desired.

Best Practices

  1. Consistency: Use photos with the same aspect ratio and crop so cards stay even across slides.
  2. Accessibility: Keep names in real heading tags and ensure social icons have enough size for touch targets.
  3. Pick the style first: Choose your card style before deep styling — some sections (Mold Content, Overlay, Slide Effect) only apply to specific styles.
  4. Testing: Check column counts and swipe behavior on tablet and mobile breakpoints.

Troubleshooting

  1. Short Text or Button missing: You’re using the Mold style — it hides both by design. Switch styles if you need them.
  2. No members in Dynamic Posts mode: Verify the Query returns posts and the meta keys (job title, socials) match your custom field names exactly.
  3. Hover image not swapping: Alternative Image only works in Repeater mode — enable the toggle in Layout and set an Alternative Image on each member.

Frequently Asked Questions

Can the Team Member Carousel pull members from a custom post type?

Yes. Set Content Source to Dynamic Posts, select your team post type in the Query builder, and optionally map a Job Title Meta Key plus social link meta keys. Each post becomes a member card — featured image as the photo, title as the name, excerpt as the short text.

How do I show a different photo when hovering a team member?

Enable the Alternative Image toggle in the Layout section (Repeater mode only), then set a second image in each member’s Member tab. The card swaps to that image on hover.

Which social networks are supported for each member?

Six per member: Facebook, Twitter, LinkedIn, Instagram, YouTube, and a generic Website link. Only the links you fill in are displayed.

Why are the short text and button hidden in my carousel?

You likely selected the Mold style — it deliberately hides the Short Text and Button for its design. Choose Default, Ardent, Folk, Folker, or Slide if you need them visible.

How many team members can I show per slide?

Between 1 and 6 columns, set independently for desktop, tablet, and mobile (defaults: 3 / 2 / 1). The rest of the members are reachable by swiping or with the navigation arrows.

Related Documentation

Conclusion

The Team Member Carousel Widget by Sky Addons for Elementor combines six polished card styles, dynamic post support, and full carousel control to put your team front and center. For further assistance, consult the Sky Addons support team or community forums. Enjoy introducing your team!

How can we help?