How to set up and style the Loop Grid widget in Elementor.
Loop Grid shows a loop item you design in the Theme Builder once for every post, page, product or custom post of a query. Show the items as a grid or a masonry layout, add a second loop item every few posts, and let visitors see more with page numbers, a load more button or infinite scroll.
Part of: Bright Addons Pro. Before you start: A Loop item template made in Bright Addons Pro > Theme Builder.
| Option | What it does |
|---|---|
| Loop Item | The Loop item template that is shown for each post. |
| Alternate Loop Item | Shows a second loop item now and then, for example every 4th post. |
| Second Loop Item | The loop item used for those positions. |
| Every Nth Item | How often the second loop item is used. |
| Query ID | A name for this list that developers can use with the bapro_loop_query_{ID} filter. |
| Layout | Grid, or Masonry where items keep their own height and fill the gaps. |
| Columns | Number of columns, per device. |
| Column Gap | Space between columns. |
| Row Gap | Space between rows. |
| Equal Height | Every item in a row is as tall as the tallest. |
| Second Loop Item Spans Two Columns | Makes the second loop item twice as wide. |
| Option | What it does |
|---|---|
| Source | Posts, pages, products, a custom post type, chosen posts by ID, or the Current Query of an archive or search page. |
| Include Terms | Only posts with these categories, tags or other terms. |
| Exclude Terms | Leaves out posts with these terms. |
| Authors | Only posts by these authors. |
| Posts per Page | How many items show on each page. |
| Skip First | Skips a number of posts at the start. |
| Order By | Published date, last updated, title, most comments, menu order or random. |
| Published Within | Any time, the past week, month or year. |
| Exclude Current Post | Leaves out the post being viewed. |
| Only Posts With a Featured Image | Hides posts that have no featured image. |
| Nothing Found Message | Text shown when the query finds nothing. |
| Option | What it does |
|---|---|
| Pagination | None, Page numbers, Load more button or Infinite scroll. |
| Most Pages | The highest page number that can be loaded, 0 means no limit. |
| Button Text | Text of the load more button. |
| Loading Text | Text shown while the next page loads. |
| Scroll to the List on a New Page | Scrolls back to the top of the list when a page number is clicked. |
| Alignment | Left, center or right for the page numbers and the button. |
One license gives you every Pro widget, all 10 extensions, the Theme Builder and priority support. From $10 a year, with a 14-day money-back guarantee.
These sections are in the Style tab.
background, border, radius, padding and shadow of each item, with hover colors, and an option to clip the content to the rounded corners.
typography, space above, text, background and border colors for normal, hover and current page, radius and padding.
typography and color of the empty message.
No. Loop items are made in the Bright Addons Pro Theme Builder and work with the free Elementor plugin.
Yes. Pick Products as the Source and use the WooCommerce dynamic tags, such as the product price, inside the loop item.
It gives the list a name. Developers can change the query of that list with the bapro_loop_query_{ID} filter.
Yes. When new items load with load more or infinite scroll, Elementor and Bright Addons start the widgets inside them.
Check the troubleshooting guide, or contact support with the page address and what you expected to happen.
Troubleshooting guideYearly and lifetime plans. Use this code at checkout:
14-day money-back guarantee. Ends Monday 30 November at 23:59.