> ## Documentation Index
> Fetch the complete documentation index at: https://docs.wpbevel.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Loops

> Design one card as a Loop Item and repeat it for every post with a Loop Grid, a Loop Carousel and a Taxonomy Filter.

A **Loop Item** is a template for one card: a post, a product, a team member. A **Loop Grid** or **Loop Carousel** repeats it for every post its query finds, and a **Taxonomy Filter** lets visitors narrow the query by category or tag.

## Loop Item

Create one under **Bevel → Theme Builder → New template → Loop Item**. A new Loop Item is not blank: it starts as a post card with a featured image, date, linked title, excerpt and a "Read more" button, every field bound to a dynamic tag, so you restyle rather than assemble.

In the panel's **Preview Settings** choose which post type to preview as, a specific item (or the latest), and the preview width (default 410 px), so the card is designed at the size it will render.

Every card is rendered as a visitor sees it, with its own scoped CSS, so a value set on one card cannot leak into the others.

## Loop Grid and Loop Carousel

Both share the same **Layout** and **Query** sections; control ids are Elementor Pro's, so a page built with Pro keeps its settings.

**Layout**: the Loop Item template (with a link to the Theme Builder when none is chosen).

**Query**:

* **Source**: any public post type, Manual Selection, Current Query, or Related (by chosen taxonomies, with a fallback to recent posts when nothing is related).
* **Include** by term or author; **Exclude** the current post, chosen posts, terms or authors.
* **Avoid duplicates**: skip posts an earlier loop on the page already showed. **Offset**.
* **Date**: all, past day, week, month, quarter, year, or a custom range.
* **Order by**: date, title, menu order, last modified, comment count or random; ascending or descending.
* **Ignore sticky posts**, on by default.
* **Query ID**: a name, so code can adjust the query through the `bevel/loop/query/{id}` action.

**Nothing found message**: text, alignment and tag, shown when the query is empty.

### Loop Grid

Columns (default 3), items per page (default 6, at most 100), masonry, equal height. **Pagination**: numbers, previous and next, both, **Load on click** with a button and spinner, or **Infinite scroll**, with a page limit and an end-of-list message. Each grid pages independently; a grid on *Current Query* follows WordPress's own page number.

### Loop Carousel

Slides on display and to scroll per device, equal height, autoplay with speed and pause on hover or interaction, infinite loop, transition duration, direction; arrows with custom icons; bullets or fraction pagination, inside or outside.

## Taxonomy Filter

A bar of terms that filters one loop on the page.

* **Loop to filter** and **Taxonomy**; the editor lists the loops on the page and the taxonomies of the chosen loop's post type.
* Horizontal or vertical, aligned start, centre, end or stretched.
* **Multiple selection**, matching posts in all of the chosen terms or any of them.
* Show an **All** item, hide empty terms, hide or show child terms to a depth, cap the number of terms, wrap or scroll horizontally.
* Items styled in normal, hover and active state.

The active terms live in the page address, so a filtered view can be linked to.

## Elementor Pro

With Pro active the Kit's loops stand down and Pro's take over. See [Working next to Elementor Pro](/kit/elementor-pro).