Sapling Carousel: Equal Height Post Cards That Hold Their Line

October 26, 2026
·
Shahidul Islam
Sapling carousel showing equal height post cards in a row

The thing that makes a post row look unfinished is almost never the card design. It is one card being forty pixels taller than the rest because its title ran to three lines. The eye reads the ragged bottom edge before it reads a single word.

The sapling carousel is built around that problem. Each card fills the full height of its slide, so a two word title and a fifteen word title produce cards of exactly the same size. The row keeps its line whatever the editors publish, without anyone having to write shorter headlines.

It is a free widget on the shared query builder, so the row updates itself as you post.

Sapling carousel showing equal height post cards in a row
Every card fills its slide, so the row keeps one bottom edge whatever the titles do

Where a sapling carousel fits

  • A blog home page row. Recent posts, updating themselves, in a row that stays tidy.
  • A category teaser band. Point the query at one term and the row becomes a section preview.
  • A related-content strip under an article. Where mixed title lengths normally wreck the alignment.
  • A product or project row. A custom post type renders through the same card with one dropdown change.
  • A resources or downloads band. Guides with long descriptive names, which is exactly the ragged-row case.
  • A video archive strip. The play overlay makes the same card work for video posts.

Why it beats the usual approach

A row of plain cardsA fixed height cropSapling carousel
Bottom edgeRagged with mixed titlesEvenEven
Long titlesPush the card tallerCut offFit, card stays the size
SetupNonePer cardOne control set
Layout optionsOneOneTwo
Stays currentDependsDependsQuery driven

The middle column is the usual workaround, and it costs you words: cropping the title to force alignment means some posts arrive on the page half named.

The features that matter

Cards fill their slide. The item takes the full width and height of the slide, which is what produces the even bottom edge rather than a fixed height that cuts content off.

Two content layouts. The layout switch changes the card structure, so the same widget covers a tight three across row and a wider two across feature.

A real padding default that matches the markup. The item padding starts at a value that mirrors the class already in the markup, so an existing page keeps rendering exactly as it did while the control is still yours to change.

The author has a place. An author thumbnail and name can sit beside the date, which suits a blog with several contributors.

Columns are per breakpoint. Desktop, tablet and phone counts are three separate decisions, feeding the slider directly.

The excerpt is a number, with shortcodes optional. Excerpt length is a control, with a strip shortcodes switch so a page builder excerpt cannot leak markup into a card.

Sapling carousel cards keeping one level bottom edge
Left: cards of different title lengths still finishing level. Right: the same set at a wider column setting

How to build it

  1. Drop the widget in and open Query. Set the post type and terms first.
  2. Set columns for desktop, tablet and phone. Three, two and one is the usual answer for this card.
  3. Pick the content layout, and look at both at your column count before deciding.
  4. In Additional, set the category, author, excerpt and date, and the excerpt length. Around twenty words keeps the cards balanced.
  5. In Carousel Settings, set autoplay, loop and speed, then choose navigation, pagination or both.
  6. Set the item background before the item padding. The padding only reads as an inset once there is a surface behind it.

Why it works

Equal height is not a cosmetic preference. A row of cards is a pattern, and the eye checks the pattern before it reads the content. One card out of line reads as a fault in the page, which costs more attention than the extra line of title was worth.

Solving it in the layout rather than by truncating titles means nobody has to write to a character count. Editors publish what the post is called, and the row absorbs it.

The fastest way to make a page look unfinished is a row of cards with a ragged bottom edge. The second fastest is cropping the titles to fix it.

Each slide is a permalink to a real post, so the row contributes internal links rather than decorative images, and the shared slider settings mean a second instance elsewhere on the site behaves identically.

The padding default is a small piece of care worth explaining. It is set to the same value as the utility class already present in the card markup, which means an existing page renders exactly as it did before the control existed. Elementor serves a page’s CSS from a cache that only rebuilds when the page is saved, so a default that did not match would leave older pages looking unpadded until somebody opened and re-saved every one of them.

The video settings group covers mixed archives. A play marker on the thumbnail tells a reader at a glance which entries are films, which matters on a row where every card otherwise looks identical by design.

Getting it right

  • Keep excerpt lengths consistent. Equal height cards handle mixed titles well, but a card with no excerpt beside one with forty words still looks unbalanced inside its box.
  • Use consistent featured images. Mixed portrait and landscape thumbnails is what makes a level row still look untidy.
  • Give the item a background. Padding without a fill reads as extra gap, not as an inset.
  • Match the column count to the excerpt. Four columns with a full excerpt gives four narrow paragraphs. Either drop a column or shorten the text.
  • Check one column on a phone. Equal height means the tallest content sets the card, and on a narrow screen that can be taller than you expect.
  • Pick a registered image size. A full size upload in a 300 pixel card is the usual cause of a slow row.
  • Decide the sapling carousel column count first. Every other spacing decision in the card depends on how wide the card ends up being.
Sapling carousel at a different column count
The excerpt and meta sit inside a card that is sized by the slide, not by its text

What else it can carry

The card is post shaped rather than blog shaped, so a properties type renders with the photograph, the location taxonomy as the label and a short description. A course type renders the same way with the level as the label.

It also works well as a related-content strip in a theme template, with the query pulling the same category as the current post. That is one widget doing what a related-posts plugin usually does, with a card that already matches the site.

The two content layouts earn their place as the column count changes. One keeps the card compact enough for three or four across, the other opens it up for two, and because a sapling carousel keeps every card the same height either way, switching between them is a design decision rather than a layout risk. Look at both at your real column count and with your real titles, not with placeholder text, because the whole point of the widget is how it handles the titles you actually publish.

A sapling carousel also suits a page where several rows sit above one another, such as a magazine style home page with a band per category. Because each row keeps its own level bottom edge, three stacked rows read as a grid of sections rather than as three separate attempts at the same thing.

Where the same set should be seen all at once rather than moved through, the grid siblings read from the same query builder. Alongside them, a showcase wall suits an image led set and a showcase flow suits a feature strip.

Sapling carousel on a desktop and a phone screen
One column on a phone, with the card design and the meta row unchanged

Sapling carousel: common questions

Is the sapling carousel free?

Yes. It is a widget in the free Sky Addons plugin, including the query builder, both content layouts and all the carousel settings.

Does it need another plugin?

No. Elementor and Sky Addons are enough. It reads whatever post types your site already registers.

Will it slow the page down?

It loads one image per visible card and uses the slider library shared across the plugin. Image size is the thing to watch, not the widget.

Does it work on mobile?

Yes. Columns, spacing and alignment are per breakpoint, and one column with a slightly taller image is the usual phone setting.

Does it keep the cards level automatically?

Yes. The card fills its slide rather than sizing to its content, which is what keeps the bottom edge even when one title runs longer than the rest.

The short version

The sapling carousel is a query driven post row whose cards fill their slides, so the bottom edge stays level however long the titles run. Two content layouts, per breakpoint columns, optional author and excerpt, and it is free.

Build it

See it running on the Sapling Carousel demo, then read the control reference in the Sapling Carousel documentation. It is part of the free plugin: see what else is included on the free versus Pro page, and the plans on pricing.

Written by
Shahidul Islam
Writes about the work behind the widgets — what shipped, why, and what it cost.
Share
In this post

More from the journal

Mate Carousel: A Post Row That Still Reads at Six Across

Mate Carousel: A Post Row That Still Reads at Six Across

The Mate Carousel runs a post row at one to six columns with two card layouts, driven by a query. Free, responsive per breakpoint, and no hand editing.
Sapling Carousel: Equal Height Post Cards That Hold Their Line

Sapling Carousel: Equal Height Post Cards That Hold Their Line

The Sapling Carousel keeps every post card the same height whatever the titles do, with two layouts and a query builder behind it. Free with Sky Addons.
Naive Carousel: Side by Side Post Cards Where the Title Gets the Room

Naive Carousel: Side by Side Post Cards Where the Title Gets the Room

The Naive Carousel lays each post out sideways: image on one side, title and excerpt on the other, with a read more button. Query driven and free.

Comments are closed.