How to use Luster Grid Widget of Sky Addons for Elementor

Luster Grid is a refined Elementor post grid widget that lays out your blog posts, news, or any post type in a clean, magazine-style grid. A flexible Query builder pulls posts automatically, and each card shows a featured image, category badges, author, date, and an optional excerpt with a stylish title accent bar. The Luster Grid widget for Elementor even supports video posts with a lightbox play button and numbered pagination for browsing archives. This documentation will guide you through the process of using the Luster Grid Widget to build a beautiful blog section on your website.

Features:

1. Powerful Query Builder: Pull posts from any post type and filter by terms, authors, include/exclude rules, date, order, and offset.
2. Flexible Grid Spacing: Responsive Row Gap and Column Gap sliders keep the grid airy on every device.
3. Rich Post Elements: Toggle the title, category, author, date, and excerpt independently, with a configurable text limit.
4. Primary & Secondary Title Typography: Style featured grid items and regular items with separate title typography.
5. Video Support: Video posts get a play button and can open in a lightbox with aspect ratio, autoplay, and mute options.
6. Post Pagination: Optional numbered pagination lets visitors page through your full archive.
7. Hover Image Effects: Gradient image overlay, CSS filters, and polished card styling out of the box.
8. Title Accent Bar: A decorative bar under the post title with adjustable size and color or gradient background.

Insert Luster Grid Widget

1. Open Elementor Editor. In the Elementor panel, search for “Luster Grid” under Sky Addons.
2. Drag and Drop the Widget to the desired location on your page / editor.

Configure Layout

Start in the Layout section to define the grid structure:

1. Row Gap: Set the vertical spacing between grid rows, per breakpoint.
2. Column Gap: Set the horizontal spacing between grid columns, per breakpoint.
3. Image Size: Pick the thumbnail resolution (Large by default) for the featured images.
4. Alignment: Align the post content left, center, right, or justified per breakpoint.

Build the Post Query

The Query section decides which posts appear in your Elementor post grid. It works like a mini query builder:

1. Source: Select the post type to display — Posts, Pages, or any registered custom post type.
2. Limit: Set how many posts the grid shows per page (3 by default).
3. Include / Exclude: Hand-pick posts to include or exclude, or filter by Terms (categories, tags, taxonomies) and Authors.
4. Offset: Skip a number of posts from the start of the results.
5. Date: Restrict posts to a time range such as past week, month, year, or a custom before/after window.
6. Order By / Order: Sort by date, title, menu order, random, and more — ascending or descending.
7. Ignore Sticky Posts: Decide whether sticky posts keep their priority position.

Configure Additional Options

The Additional section toggles each post element on or off:

1. Show Title: Display the post title, with a Title HTML Tag selector (H1–H6, div, span, p) for SEO-friendly markup.
2. Show Category: Display the post’s category badges above the content.
3. Show Author: Display the author name linked to the author archive.
4. Show Text: Display an excerpt, with a Text Limit (word count) and a Strip ShortCode switch to keep raw shortcodes out of the excerpt.
5. Show Date: Display the publish date, with Human Diff Time (e.g. “3 days ago”), a short-format option, and an optional time display.
6. Show Video: Detect video posts and show a play button on the thumbnail.
7. Show Pagination: Add numbered pagination below the grid so visitors can browse older posts.

Configure Video Settings

When Show Video is enabled, the Video Settings section controls how videos open:

1. Video Open: Open the video in a Lightbox or follow the post link, with an optional new-tab setting for file links.
2. Entrance Animation & Aspect Ratio: Choose the lightbox animation and the video ratio (16:9, 4:3, etc.).
3. Lazy Load, Autoplay, Mute: Fine-tune playback behavior inside the lightbox.

Style Your Luster Grid

Head to the Style tab to make the grid match your brand. Every element has its own dedicated section:

1. Luster Grid (Item):
   Set padding, border, border radius, and box-shadow for each post card.
2. Image:
   Add a gradient Image Overlay, border, border radius, box-shadow, and CSS filters to the featured image.
3. Title:
   Control spacing, normal and hover colors, and text shadow — with separate Primary Typography for featured items and Secondary Typography for the rest, plus the accent Bar Size and Bar Color.
4. Text:
   Style the excerpt color and typography.
5. Category:
   Adjust spacing, space between badges, colors, background, and typography in normal and hover states.
6. Meta:
   Style the author and date row — spacing, space between items, color, and typography.
7. Pagination:
   Customize the page-number links — colors, background, spacing, and active state.
8. Play Button:
   Customize the video play button size, color, background, border, and hover state.

These styling options let you shape the Luster Grid into a polished blog or news section that fits any design system.

Save and Preview

1. Once you’ve customized and styled your grid, click “Publish” or “Update” to save your changes.
2. Preview the page to ensure the widget looks and functions as desired.

Best Practices

1. Consistency: Use the same image size and aspect ratio across posts so grid cells line up evenly.
2. Accessibility: Keep title contrast strong against the image overlay so text stays readable.
3. Use Pagination for Large Archives: Instead of loading dozens of posts at once, keep the Limit modest and enable Show Pagination.
4. Testing: Check row and column gaps on tablet and mobile breakpoints for a responsive layout.

Troubleshooting

1. No Posts Showing: Check the Query section — the selected source, terms, or date filters may exclude everything. The widget renders nothing when the query finds no posts.
2. Pagination Not Appearing: Make sure Show Pagination is enabled and the query returns more posts than the per-page Limit.
3. Styling Issues: Double-check CSS settings and clear cache if recent changes aren’t displaying.

Frequently Asked Questions

How do I choose which posts appear in the Luster Grid?

Use the Query section. Select a Source (post type), then filter with Include/Exclude rules, Terms, Authors, a date range, and ordering. The Limit option controls how many posts show per page.

Can I add pagination to the Luster Grid?

Yes. Switch on Show Pagination in the Additional section. Numbered page links appear below the grid, and a dedicated Pagination style section lets you match them to your theme.

Why does the Title style section have Primary and Secondary Typography?

The Luster Grid highlights featured items in its layout pattern. Primary Typography styles those featured titles while Secondary Typography styles the remaining cards, so you can give highlighted posts a larger, bolder headline.

Can the Luster Grid display custom post types?

Yes. The Source dropdown in the Query section lists every public post type, so this Elementor post grid works with portfolios, products, events, or any other custom content.

Does the Luster Grid support video posts?

Yes. With Show Video enabled, posts containing a video get a play button overlay, and the Video Settings section lets the video open in a lightbox with aspect ratio, autoplay, and mute options.

Related Documentation

• Card
• Logo Grid
• Stellar Blog Slider
• List Group

Conclusion

The Luster Grid Widget by Sky Addons for Elementor gives your blog a clean, magazine-quality grid with full control over query, layout, and styling. Utilize its customizable features to create a seamless user experience. For further assistance, consult the Sky Addons support team or community forums. Enjoy building a beautiful blog section!