Loop Grid
Repeat a card you design for every post of a query, in a grid with pagination, load more or infinite scroll.
On this page
The Loop Grid widget shows a list of posts (or pages, or any post type) as a grid of cards. You design the card once, as a Loop item template with dynamic data such as the post title and featured image, and the grid repeats it for every post of the query. Use it for a blog page, a portfolio, a project list or an archive template.
Before you start: design a card
The grid needs a Loop item template to repeat.
- Go to Urmi → Theme Builder and choose Loop items in the list of template types.
- Create a template and design one card with widgets such as Featured Image, Post Title, Post Info and Post Excerpt. They show the data of each post.
- Publish the template.
See Loop items for the details.
Add a Loop Grid
Open Insert in the left panel and find Loop Grid in the Content group, or type "loop" in the search box. Drag it onto the canvas, or click it to add it next to the selected element. See Add elements.
Then choose your card in Loop item template and set the number of Columns.
Choose which posts to show
The Query section decides which items fill the grid. Pick a Source:
- Custom query: choose the Post type, how many Items, the order, and optionally which items, terms or authors to include or exclude.
- Current query (archives): shows the posts of the page being viewed. Use it in archive and search results templates, so a category archive shows that category's posts. In the editor, the latest posts are shown as a preview.
- Related to current post: posts that share a category (or other hierarchical term) with the post being viewed. Use it under a blog post.
- Manual selection: exactly the items you pick in Include, in that order.
Nothing found message is shown when the query returns no items.
Page through long lists
Set Pagination to show numbered links, previous and next links, a Load more button or Infinite scroll (more cards load as the visitor reaches the end). Load more and infinite scroll add cards without reloading the page.
To let visitors filter the grid by category, add a Loop Filter widget on the same page.
Mix in a different card
Alternate template shows a second Loop item template at a set Position, for example a larger, highlighted card as every third item. Turn Repeat off to use it only once, and set Column span to make it wider than the others.
Content tab settings
| Setting | What it does |
|---|---|
| Loop item template | The published Loop item template to repeat for every item. |
| Columns | Number of columns (1–12). Empty fits as many columns as the space allows. Can differ per device. |
| Masonry | Cards keep their own height and move up into the gaps, like a brick wall. Off by default. |
| Equal height | Stretches the cards of a row to the tallest one. On by default. Shown when Masonry is off. |
| Featured image as CSS variable | Makes each card's featured image available as the CSS variable var(--urmi-loop-image), for a stylesheet outside Urmi, such as your theme's, for example as a background. Off by default. |
| Setting | What it does |
|---|---|
| Source | Custom query, Current query (archives), Related to current post or Manual selection. |
| Post type | Which content to list, such as Posts or Pages. For custom queries. |
| Items | How many items to show (1–100). Default: 6. |
| Offset | Skips this many items from the start, for example to leave out a post shown above. |
| Order by | Date, Last modified, Title, Menu order, Comments, Random or Manual order. |
| Order | Descending or Ascending. |
| Include, Exclude | Pick specific items to show or leave out. |
| Terms (taxonomy:id) | Only items in these categories, tags or other terms. |
| Authors | Only items by these authors. |
| Ignore sticky posts | Treats sticky posts like any other post instead of putting them first. |
| Exclude current post | Leaves out the post being viewed. Useful under a blog post. |
| Avoid duplicates | Skips items that an earlier Loop Grid or Loop Carousel on the same page already shows. |
| Nothing found message | Shown when there are no items. |
| Setting | What it does |
|---|---|
| Alternate template | An optional second Loop item template, shown at a set position. |
| Position | Which card uses it (1–100). Default: 3. Shown when an alternate template is chosen. |
| Repeat | On: every Nth card. Off: only the Nth card. On by default. |
| Column span | How many columns the alternate card spans. Keep it at or below the number of columns. Can differ per device. |
| Setting | What it does |
|---|---|
| Pagination | None, Numbers, Previous / next, Numbers with previous / next, Load more button or Infinite scroll. Default: None. |
| Previous text, Next text | The link labels. Shown for the previous / next types. |
| Button text | The load more label. Default: Load more. Shown for load more and infinite scroll. |
| Loading text | Shown while more cards load. Default: Loading…. |
| Button style | Primary, Secondary, Outline or Ghost. Default: Outline. Shown for load more. |
| Alignment | Start, Center or End. Can differ per device. |
Design tab settings
| Section | Settings |
|---|---|
| Layout | Column gap, Row gap, Pagination distance. |
| Pagination | Typography, Text color and Background (with Normal, Hover and Active tabs), Border radius, Space between. Shown for numbered and previous / next pagination. |
| Load more button | Typography, Text color and Background (with Normal and Hover tabs, plus Border color on hover), Border, Border radius, Padding. Shown for load more and infinite scroll. |
| Nothing found message | Typography, Color. |
The look of each card comes from its Loop item template. Edit the template to change it everywhere the card is used.
The Design tab also has the sections every element shares: Spacing & position, Background & border and Mask. See Spacing, size & position.
Behaviour tab
The Behaviour tab has the settings every element shares. Set an Anchor ID in Anchor & classes when a page has several grids and a Loop Filter must target one of them. See Anchor, classes & attributes.
Tips
- If you do not want to design a card, the Posts widget has a ready-made card with image, title, meta and excerpt.
- For more on queries and archive templates, see Loop grid & carousel.