How to use Sapling Carousel Widget of Sky Addons for Elementor

Sapling Carousel is a minimal, content-first Elementor post carousel widget that slides your blog posts, news, or any post type in a tidy card layout. Its signature Content Layout option lets you place the post content above or below the featured image, and a one-click Title Truncate keeps long headlines on a single line. Backed by a flexible Query builder and full Swiper carousel controls — autoplay, loop, navigation, and pagination — the Sapling Carousel widget for Elementor is a quick way to put fresh content in motion. This documentation will guide you through the process of using the Sapling Carousel Widget on your website.

Features:

1. Powerful Query Builder: Pull posts from any post type and filter by terms, authors, include/exclude rules, date, order, and offset.
2. Content Layout Switcher: Show the content above (Content Top) or below (Content Bottom) the featured image — responsive per breakpoint.
3. Responsive Columns: Show 1 to 6 slides per view with separate defaults for desktop, tablet, and mobile.
4. Title Truncate: Clip long post titles to one neat line for a uniform card height.
5. Rich Post Elements: Toggle the title, category, author, date, and excerpt independently, with a configurable text limit.
6. Video Support: Video posts get a play button and can open in a lightbox with aspect ratio, autoplay, and mute options.
7. Full Carousel Control: Autoplay, loop, slide speed, pause on hover, centered slides, free mode, grab cursor, and transition effects including coverflow.
8. Navigation & Pagination: Prev/next arrows with custom icons plus bullets, fraction, or progress bar pagination.

Insert Sapling Carousel Widget

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

Configure Layout

Start in the Layout section to define the basic shape of your carousel:

1. Columns: Choose how many slides are visible at once (1–6). Set different values for desktop, tablet, and mobile.
2. Content Layout: Pick Content Top to show the text above the image, or Content Bottom for a classic card. This is responsive, so the order can flip per device.
3. Alignment: Align the post content left, center, right, or justified per breakpoint.

Build the Post Query

The Query section decides which posts appear in your Elementor post carousel. It works like a mini query builder:

1. Source: Select the post type to display — Posts, Pages, or any registered custom post type.
2. Limit: Set how many posts the carousel loads.
3. Include / Exclude: Hand-pick posts to include or exclude, or filter by Terms (categories, tags, taxonomies) and Authors.
4. Offset: Skip a number of posts from the start of the results.
5. Date: Restrict posts to a time range such as past week, month, year, or a custom before/after window.
6. Order By / Order: Sort by date, title, menu order, random, and more — ascending or descending.
7. Ignore Sticky Posts: Decide whether sticky posts keep their priority position.

Configure Additional Options

The Additional section toggles each post element on or off:

1. Show Title: Display the post title, with a Title HTML Tag selector (H1–H6, div, span, p) and a Title Truncate switch that clips long titles to one line.
2. Show Category: Display the post’s category badges.
3. Show Author: Display the author name linked to the author archive.
4. Show Text: Display an excerpt, with a Text Limit (word count) and a Strip ShortCode switch to keep raw shortcodes out of the excerpt.
5. Show Date: Display the publish date, with Human Diff Time (e.g. “3 days ago”), a short-format option, and an optional time display.
6. Show Video: Detect video posts and show a play button on the thumbnail.

Configure Video Settings

When Show Video is enabled, the Video Settings section controls how videos open:

1. Video Open: Open the video in a Lightbox or follow the post link, with an optional new-tab setting for file links.
2. Entrance Animation & Aspect Ratio: Choose the lightbox animation and the video ratio (16:9, 4:3, etc.).
3. Lazy Load, Autoplay, Mute: Fine-tune playback behavior inside the lightbox.

Configure Carousel Settings

The Carousel Settings section gives you full control over the slider motion:

1. Height: Set a fixed carousel height per breakpoint, or leave it automatic.
2. Item Gap: Control the space between slides.
3. Autoplay & Autoplay Speed (ms): Auto-advance slides at your chosen interval, with Pause On Hover.
4. Loop: Make the carousel cycle endlessly.
5. Slide Speed (ms): Set the transition duration between slides.
6. Transition Effect: Slide or Coverflow, with depth, rotate, stretch, and slide shadow options.
7. Slides Per Group, Centered Slides, Grab Cursor, Free Mode: Advanced behaviors for how slides move and respond to dragging.

Configure Navigation and Pagination

1. Navigation: Toggle Show Navigation and choose custom Prev / Next icons from the icon library.
2. Pagination Type: Choose Bullets, Fraction, or Progress Bar, with a Dynamic Bullets option and progress bar position control.
3. Alignment: Align pagination left, center, or right.

Style Your Sapling Carousel

Head to the Style tab to make the carousel match your brand. Every element has its own dedicated section:

1. Sapling Carousel (Item):
   Set padding, border, and border radius for each card, with Normal and Hover tabs for background, box-shadow, and border color.
2. Image:
   Control the image Width and Height, plus padding, margin, border, border radius, and box-shadow.
3. Title:
   Adjust spacing, colors (normal and hover), typography, and text shadow.
4. Text:
   Style the excerpt color and typography.
5. Category:
   Adjust spacing, space between badges, colors, background, and typography in normal and hover states.
6. Meta:
   Style the author and date row — spacing, space between items, color, and typography.
7. Play Button:
   Customize the video play button size, color, background, border, and hover state.
8. Navigation & Pagination:
   Position the arrows precisely, style their size, color, background, and border, and customize bullet size, spacing, radius, and active colors.

These styling options let you shape the Sapling Carousel into a clean, modern content slider that fits any design system.

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: Enable Title Truncate when headlines vary in length so all cards stay the same height.
2. Accessibility: Keep autoplay speed comfortable (4000ms or more) and enable Pause On Hover so visitors can read each slide.
3. Performance: Limit the post count to what visitors actually need — fewer slides means faster loading.
4. Testing: Check the Content Layout and column counts on tablet and mobile breakpoints.

Troubleshooting

1. No Posts Showing: Check the Query section — the selected source, terms, or date filters may exclude everything. The widget renders nothing when the query finds no posts.
2. Carousel Not Sliding: Ensure JavaScript is enabled and no other plugin loads a conflicting Swiper version; clear cache after changes.
3. Cards Look Uneven: Set a fixed Height in Carousel Settings or enable Title Truncate and a consistent Text Limit.

Frequently Asked Questions

How do I show the post content above the image in Sapling Carousel?

Use the Content Layout option in the Layout section and choose Content Top. It is a responsive control, so you can keep the content on top for desktop and switch to Content Bottom on mobile.

How do I stop long post titles from breaking the card layout?

Enable Title Truncate in the Additional section. Long titles are clipped to a single line so every slide in the Elementor post carousel keeps the same height.

How do I filter the carousel to one category?

In the Query section, open the Include controls, set Include By to Terms, and pick your category. Only posts from that category will appear in the carousel.

Can I make the Sapling Carousel autoplay and loop?

Yes. In Carousel Settings, switch on Autoplay with your preferred Autoplay Speed and enable Loop for continuous cycling. Pause On Hover keeps slides readable.

Can I give the cards a different style on hover?

Yes. The Sapling Carousel style section includes Normal and Hover tabs where you can change the card background, box-shadow, and border color when a visitor hovers an item.

Related Documentation

• Stellar Blog Slider
• Momentum Slider
• Flow Slider
• Remote Pagination

Conclusion

The Sapling Carousel Widget by Sky Addons for Elementor delivers a clean, flexible post slider with a unique content-top layout option and complete carousel control. Utilize its customizable features to create a seamless user experience. For further assistance, consult the Sky Addons support team or community forums. Happy sliding!