How to use Generic Grid Widget of Sky Addons for Elementor

Generic Grid is a versatile Elementor post grid widget that arranges your blog posts, news, or any post type in clean cards topped with a distinctive date badge. Each card shows the featured image, category, title, and an optional excerpt, while the badge displays the publish day and month and can sit at the top left or top right. With a flexible Query builder, responsive columns and gaps, optional numbered pagination, and video lightbox support, the Generic Grid widget for Elementor is a dependable choice for news and magazine layouts. This documentation will guide you through the process of using the Generic Grid Widget 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. Date Badge: A stylish day-and-month badge over the image, positionable top left or top right, with separate Date and Month typography.
3. Responsive Columns & Gaps: Choose 1 to 6 columns with separate Row Gap and Column Gap per breakpoint.
4. Rich Post Elements: Toggle the title, category, date, and excerpt independently, with a configurable text limit.
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 Card States: Separate normal and hover styling for card background, box-shadow, and border color.
8. Image Height Control: Fix the image height so every card in the grid lines up perfectly.

Insert Generic Grid Widget

1. Open Elementor Editor. In the Elementor panel, search for “Generic 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. Columns: Choose how many columns the grid uses (1–6) with separate desktop, tablet, and mobile values.
2. Row Gap / Column Gap: Control the spacing between rows and columns, per breakpoint.
3. 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. 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.
3. Show Text: Display an excerpt, with a Text Limit (word count) and a Strip ShortCode switch to keep raw shortcodes out of the excerpt.
4. Show Date: Display the day-and-month date badge over the featured image.
5. Show Video: Detect video posts and show a play button on the thumbnail.
6. 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 Generic Grid

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

1. Generic Grid (Item):
   Set the card Padding and a separate Content Padding, border, and border radius, with Normal and Hover tabs for background, box-shadow, and border color.
2. Image:
   Control the image Height, padding, margin, border, border radius, and box-shadow.
3. Title:
   Adjust spacing, colors (normal and hover), typography, and text shadow.
4. Text:
   Style the excerpt color and typography.
5. Category:
   Adjust spacing and the content Position offset, plus colors, background, and typography in normal and hover states.
6. Meta (Date Badge):
   Set the badge Position (top left / top right), spacing, padding, and background — then style the Date (day) and Month separately with color, typography, and text shadow.
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 Generic Grid into a polished news or blog 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: Fix the image Height in the Image style section so every card lines up evenly.
2. Accessibility: Keep the date badge contrast strong against the featured image for readability.
3. Use Pagination for Large Archives: Keep the Limit modest and enable Show Pagination instead of loading everything at once.
4. Testing: Check column counts and gaps on tablet and mobile breakpoints for a responsive design.

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. Date Badge Missing: Make sure Show Date is enabled in the Additional section, and check the Meta style section’s Position setting.

Frequently Asked Questions

How do I move the date badge to the other corner of the card?

Open the Meta section in the Style tab and use the Position control to place the badge at the Top Left or Top Right of the featured image. You can also adjust its padding, background, and spacing there.

Can I style the day and month of the date badge separately?

Yes. The Meta style section includes separate Date and Month groups, each with its own color, typography, and text shadow, so the day number can be large and bold while the month stays small.

How many columns can the Generic Grid display?

Up to six. The Columns control in the Layout section is responsive, so a common setup for this Elementor post grid is 3 columns on desktop, 2 on tablet, and 1 on mobile, with adjustable row and column gaps.

Can I add numbered pagination below the grid?

Yes. Switch on Show Pagination in the Additional section. Page links appear below the grid, and the Pagination style section lets you match their colors and spacing to your theme.

Can the Generic Grid display custom post types?

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

Related Documentation

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

Conclusion

The Generic Grid Widget by Sky Addons for Elementor pairs a dependable post grid with a distinctive date badge for news-style layouts. Utilize its customizable features to create a seamless user experience. For further assistance, consult the Sky Addons support team or community forums. Enjoy showcasing your latest stories!