How to use Loop Grid Widget of Sky Addons for Elementor

The Sky Addons Loop Grid widget pairs Elementor’s Loop Template system with a powerful CSS grid layout to display any WordPress post type — posts, products, custom post types — in a fully custom, responsive grid. Unlike a basic post grid, the Loop Grid supports alternate templates at configurable positions, column span for featured items, optional pagination, and up to 12 columns. This documentation will guide you through the process of using the Loop Grid Widget to create a beautifully designed, query-driven post archive or listing on your website.

Features:

1. Loop Template Integration: Design the card once as an Elementor Loop Template and point the widget at it — every matched post renders through your design automatically.
2. Up to 12 Columns: Set the column count from 1 to 12 per breakpoint using CSS grid for pixel-perfect layouts.
3. Alternate Templates: Inject a different Loop Template at a specific grid position — for example, show a “featured” card design every 4th item, or place a wide promotional banner at position 3.
4. Column Span: Let an alternate template card span multiple columns (e.g., a 2-column-wide featured card), controlled per-template per-breakpoint.
5. Group Control Query Builder: Filter by post type, taxonomy, author, date, custom fields, and manual include/exclude — the same query builder used across Sky Addons.
6. Pagination: Toggle page-number pagination below the grid to let visitors browse deeper without a full page reload.
7. Row and Column Gap: Independent responsive controls for vertical and horizontal spacing between grid cells.
8. Error Handling in Editor: In the Elementor editor, missing or empty templates display an inline warning rather than a blank space, so you always know exactly what is missing.

Before You Start — Create a Loop Template

The Loop Grid requires at least one Elementor Loop Item template. Create and publish it before configuring the widget.

1. Go to Elementor → Templates and click Add New. Choose Loop Item as the type.
2. Design your card using Elementor’s dynamic tags — Featured Image, Post Title, Excerpt, Post URL, etc.
3. Publish the template. Repeat if you need an alternate design for featured items.

Insert Loop Grid Widget

1. Open your page in Elementor and click the + icon to add a new section.
2. Search for Loop Grid in the widget panel and drag it onto the canvas.

Configure Layout

The Layout section sets the primary template, column structure, spacing, and optional alternate templates.

1. Select Template: Type and select your primary Elementor Loop Template. All posts will render through this design by default.
2. Columns: Choose 1–12 columns per breakpoint (desktop default: 3, tablet: 2, mobile: 1).
3. Row Gap: Vertical spacing between rows (default: 16 px).
4. Column Gap: Horizontal spacing between columns (default: 16 px).
5. Apply an Alternate Template: Toggle on to configure a different card design for specific positions. Only available when Posts Per Page is greater than 1 and a primary template is selected.

Configure Alternate Templates

When Apply an Alternate Template is on, a repeater appears for adding as many alternate templates as you need.

1. Choose a Template: Select the alternate Loop Template for this entry.
2. Position in Grid: A number that controls which item position receives this alternate template. For example, entering 3 places the alternate template at the 3rd item in the grid.
3. Apply Once: When on (default), the alternate template appears only at the specified position. When off, it repeats at every Nth position as defined by the Position control (e.g., every 4th item).
4. Column Span: How many columns this alternate template card spans across (1–12, per breakpoint). Use this to make a featured card take up 2 columns in a 4-column grid.

Configure Query

The Query section uses the Sky Addons Group Control Query Builder to filter posts.

1. Post Type: Choose any registered post type.
2. Posts Per Page: How many posts to show per page (default: 6).
3. Order By / Order: Sort by date, title, menu order, modified date, random, or comment count.
4. Filter by Taxonomy: Include or exclude specific taxonomy terms.
5. Include / Exclude: Manually control which post IDs appear or are hidden.

Configure Additional Settings

The Additional section provides grid-level display options.

1. Show Pagination: Toggle page-number navigation below the grid. When on, the Pagination Style section becomes available in the Style tab.

Style Your Loop Grid

The card appearance is entirely controlled by your Loop Template design. Use the Style tab for pagination styling.

1. Pagination:
   Background, text color, border, border radius, and spacing for page number links. Normal / Hover / Active tabs let you style the current page indicator differently from the rest.

Save and Preview

1. Click Update in Elementor to save your page.
2. Preview the page to see your Loop Grid widget in action.

Best Practices

1. Use the Alternate Template + Column Span combination to build editorial-style grids where the first post is always displayed wider (e.g., spans 2 of 4 columns) with a more detailed card design.
2. Set the Column Gap and Row Gap to match your site’s base spacing unit (typically 16–24 px) for a layout that feels cohesive with the rest of the page.
3. Use a separate Loop Template for mobile (via Elementor’s responsive editing) if the card design needs to change significantly between breakpoints — or build one template that uses Elementor’s responsive visibility controls.
4. When using pagination, make sure the page that contains the Loop Grid is not a static front page — WordPress pagination requires a proper page template that outputs the loop.

Troubleshooting

1. “Please select a template” message in the editor: No Loop Template is selected. Open the Layout section and pick a template from Select Template. If the dropdown is empty, publish at least one Elementor Loop Item template first.
2. Alternate template appears at the wrong position: The Position in Grid is zero-indexed in the underlying logic but entered as a 1-based number in the panel. Entering 3 places the card at the 3rd item (the third post rendered). Double-check the number and whether Apply Once is toggled correctly.
3. Pagination does not work: Verify that Show Pagination is toggled on, that Posts Per Page is less than the total number of matched posts, and that your page’s permalink structure is not set to “Plain” in WordPress Settings → Permalinks.

Frequently Asked Questions

What is the difference between Loop Grid and Loop Carousel?

The Loop Grid displays posts in a static CSS grid with pagination and supports alternate templates at specific positions. The Loop Carousel wraps the same query in a Swiper slider for horizontal swiping — it does not support alternate templates or pagination but adds autoplay, loop, and navigation controls.

Can I use the Loop Grid for WooCommerce products?

Yes. Set the Post Type in the Query section to product and design your Loop Template using Elementor’s WooCommerce dynamic widgets (Product Title, Price, Rating, Add to Cart, etc.).

How do I make a masonry layout with the Loop Grid?

The Loop Grid uses CSS grid (not masonry). For a masonry Pinterest-style layout, use the Instagram Feed widget (which has a dedicated masonry toggle) or implement a CSS grid-auto-rows approach in your Loop Template’s custom CSS.

Does Loop Grid support AJAX loading or infinite scroll?

The current version supports standard page-number pagination. AJAX-based loading or infinite scroll is not built in — consider a third-party pagination plugin that hooks into WP_Query if you need this behavior.

Can I display the current archive’s posts using the Loop Grid?

Yes. The Group Control Query Builder includes an Current Query option that passes the page’s existing WP_Query context to the grid — useful for category archive pages built with Elementor Theme Builder.

Related Documentation

Explore other Sky Addons widgets and extensions that complement the Loop Grid widget:

• Loop Carousel: The Swiper-carousel version of the Loop system — same query, same templates, horizontal swiping.
• Instagram Feed: A grid widget for Instagram posts with masonry support — a good companion for social content alongside your blog grid.
• Particles: Add a particle animation to the section containing your Loop Grid for an eye-catching background.

Conclusion

The Loop Grid widget gives you editorial-grade control over post archives and content listings — from a simple 3-column blog grid to a complex layout with featured items spanning multiple columns — all powered by your custom Elementor Loop Templates. If you have any questions or need help, visit the Sky Addons support center.