Sky Addons for Elementor

⌘K
  2. Home
  4. Sky Addons for Elementor
  6. Widgets
  8. Ultra Grid

Ultra Grid

How to use Ultra Grid Widget of Sky Addons for Elementor

Ultra Grid is a bold, image-forward Elementor post grid widget that overlays your post content on the featured image for a striking magazine look. Choose from four grid layouts — a uniform default plus three featured arrangements that give selected posts extra space — and show the category, author, date, title with its own background, an excerpt, and a customizable Read More button. With a flexible Query builder, optional numbered pagination, and video lightbox support, the Ultra Grid widget for Elementor turns your latest posts into a hero-style showcase. This documentation will guide you through the process of using the Ultra Grid Widget on your website.

Features:

  1. Four Layout Presets: Default uniform grid plus Layout 1, 2, and 3 featured arrangements — selectable per breakpoint.
  2. Powerful Query Builder: Pull posts from any post type and filter by terms, authors, include/exclude rules, date, order, and offset.
  3. Read More Button: Custom button text, icon, icon position, and icon spacing — fully styleable.
  4. Image Overlay & Title Background: Gradient overlay over the featured image plus a dedicated title background for readable overlaid text.
  5. Rich Post Elements: Toggle the title, category, author, date, excerpt, and read more button independently, with a configurable text limit.
  6. Video Support: Video posts get a play button and can open in a lightbox with aspect ratio, autoplay, and mute options.
  7. Post Pagination: Optional numbered pagination lets visitors page through your full archive.
  8. Responsive Gaps: Row Gap and Column Gap sliders keep the grid balanced on every device.

Insert Ultra Grid Widget

  1. Open Elementor Editor. In the Elementor panel, search for “Ultra 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. Select Layout: Pick Default for a uniform grid, or Layout 1, Layout 2, or Layout 3 for featured arrangements that highlight selected posts with larger cells. The layout is responsive, so each breakpoint can use a different preset.
  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 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.
  8. Show Read More: Display a Read More button on each card.

Configure the Read More Button

When Show Read More is enabled, the Read More section appears:

  1. Button Text: Change the label (e.g. “Read More”, “Continue Reading”).
  2. Icon: Pick any icon from the icon library to accompany the text.
  3. Icon Position & Icon Spacing: Place the icon before or after the text and fine-tune the gap.

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 Ultra Grid

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

  1. Ultra Grid (Item):
    Set padding, border, border radius, and box-shadow for each card.
  2. Image:
    Add a gradient Image Overlay to keep overlaid text readable, plus border, border radius, and box-shadow.
  3. Title:
    Adjust spacing, padding, colors, typography, and a dedicated Title Background behind the headline.
  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. Read More:
    Style the button text, icon, padding, background, border, and hover state.
  9. Play Button:
    Customize the video play button size, color, background, border, and hover state.

These styling options let you shape the Ultra Grid into a dramatic, hero-style post showcase 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 high-resolution featured images, since the Ultra Grid design puts the image front and center.
  2. Accessibility: Keep the Image Overlay dark enough that the overlaid title and meta stay readable.
  3. Match Limit to Layout: Featured layouts look best when the post Limit fills the pattern — preview each layout with your real post count.
  4. Testing: Check each layout preset and the gaps on tablet and mobile breakpoints.

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. Grid Pattern Looks Broken: A featured layout may need more posts than the query returns — raise the Limit or switch to the Default layout.
  3. Text Hard to Read on Images: Strengthen the Image Overlay gradient or the Title Background in the Style tab.

Frequently Asked Questions

What is the difference between the Ultra Grid layout presets?

Default shows a uniform grid of equal cards. Layout 1, Layout 2, and Layout 3 are featured arrangements that give selected posts larger cells for a magazine-style hierarchy. The Select Layout control is responsive, so you can use a featured layout on desktop and the Default on mobile.

How do I add a Read More button to the Ultra Grid cards?

Switch on Show Read More in the Additional section. A Read More section then appears where you can set the button text, choose an icon, and control the icon position and spacing. The Style tab has a matching Read More section for colors and hover effects.

How do I keep the title readable over the featured image?

Use the Image Overlay gradient in the Image style section, or give the headline its own Title Background in the Title style section. Both keep overlaid text legible on busy photos.

Can I add numbered pagination below the Ultra 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 Ultra 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.

Related Documentation

Conclusion

The Ultra Grid Widget by Sky Addons for Elementor delivers a bold, image-first post grid with four layout presets, overlay styling, and a built-in Read More button. Utilize its customizable features to create a seamless user experience. For further assistance, consult the Sky Addons support team or community forums. Enjoy building striking content showcases!

How can we help?