Build
Smart Loops
Show any post type as a grid, list or carousel — with filter pills, load-more, and a card design you control.
NovaKit Smart Loops is how content gets onto a page. Point it at a post type, choose how many, pick how each item looks, and it draws the rest. A blog listing, a portfolio grid, related services, a team row — all the same widget.
Choosing what to show #
- Add the widgetSearch the panel for NovaKit Smart Loops.
- Pick the post typePosts, or anything you switched on in Post Types.
- Narrow itBy category or tag, if you want only part of it.
- Set how manyAnd the order — newest first, oldest, by title, or random.
On an archive template, leave the query alone. Inside an Archive template the widget shows whatever that archive is for — the category being viewed, the search results — so setting a post type there would override the very thing the page is about.
The five card styles #
| Style | Looks like |
|---|---|
| Classic | Image on top, text beneath. The default, and right for most blogs. |
| Overlay | Text over the image. Strong for portfolios; needs images with quiet areas. |
| List | Image beside the text, in a row. Good for a sidebar or a dense listing. |
| Timeline | Items down a vertical line. For anything chronological. |
| Custom Template | A Card block you designed yourself. |
The four built-in styles share the same switches, so you can change your mind without rebuilding:
| Setting | Default | Accepts |
|---|---|---|
| Show Featured Image | On | On or off |
| Image Height | — | A height, or blank for the image’s own ratio |
| Hover Effect | None | None, Zoom, Lift, Overlay Fade, Content Lift |
| Title Tag | H3 | H1–H6, div, span, p |
| Show Date · Author · Category Badge · Reading Time · Comment Count | Varies | On or off, each |
| Show Excerpt | On | On or off, with a word limit |
Title Tag is not cosmetic. It sets the heading level in the page outline,
which screen readers and search engines both read. In a grid under an H2 section
heading, H3 is right — change it for the look and you break the outline.
Style the size under Style instead.
Grid, list or carousel #
The Container setting decides the arrangement, independently of the card style. A grid of Classic cards and a carousel of Classic cards are the same style in different containers.
Set the column count per breakpoint — three on desktop, two on tablet, one on mobile is the usual shape — and the gaps between them.
Choose the carousel container and you can drive it with arrows, dots, or a tab row placed anywhere on the page. See Connecting widgets.
Filter pills #
Turn on Filter Pills and visitors get a row of category buttons above the grid. Clicking one narrows the results without reloading the page.
| Setting | Default | Accepts |
|---|---|---|
| Enable Filter Pills | Off | On or off |
| “All” Label | All | Free text |
| Alignment | Left | Left, Centre, Right |
The pills are built from the terms the shown posts actually use, so a category with nothing in it never appears as an empty filter.
Load More #
Rather than pagination, Load More appends the next batch under the existing one. Set how many the widget shows initially, and each click brings the same number again. The button disappears when there is nothing left.
Keep the first batch small. Twelve items that load instantly beat forty that make the page crawl — especially with images, which is most listings.
Three arrangements worth knowing #
| You want | Set |
|---|---|
| A blog listing | Posts · Classic · Grid, 3 columns · Load More |
| A filterable portfolio | Portfolio · Overlay · Grid, 3 columns · Filter Pills on |
| Related posts under an article | Posts · List · Grid, 1 column · 3 items · Random order |
Nothing showing? Almost always the query: a post type with no published posts, a category filter matching nothing, or a count of zero. On an archive template it can also mean you set a post type that fights the archive itself.