How to use Sapling Grid Widget of Sky Addons for Elementor

Sapling Grid is a minimal, content-first Elementor post grid widget that arranges your blog posts, news, or any post type in a clean card grid. Its signature Content Layout option lets you place the post content above or below the featured image, while responsive columns and gap controls keep the layout balanced on every device. Backed by a flexible Query builder, optional numbered pagination, and video lightbox support, the Sapling Grid widget for Elementor makes it easy to present fresh content with style. This documentation will guide you through the process of using the Sapling 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. Responsive Columns & Gaps: Choose 1 to 6 columns with separate Row Gap and Column Gap per breakpoint.
3. Content Layout Switcher: Show the content above (Content Top) or below (Content Bottom) the featured image — responsive per breakpoint.
4. Rich Post Elements: Toggle the title, category, author, 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 Sizing Controls: Set the image width, height, padding, and margin for precise card composition.

Insert Sapling Grid Widget

1. Open Elementor Editor. In the Elementor panel, search for “Sapling 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. Content Layout: Pick Content Top to show the text above the image, or Content Bottom for a classic card. This is responsive, so the order can flip per device.
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. 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.

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

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

1. Sapling Grid (Item):
   Set padding, border, and border radius for each card, with Normal and Hover tabs for background, box-shadow, and border color.
2. Image:
   Control the image Width and Height, plus 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, 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 Sapling Grid into a clean, modern content 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 a fixed image Height so grid cells line up evenly.
2. Accessibility: Keep card hover effects subtle and text contrast strong 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. Styling Issues: Double-check CSS settings and clear cache if recent changes aren’t displaying.

Frequently Asked Questions

How do I show the post content above the image in Sapling Grid?

Use the Content Layout option in the Layout section and choose Content Top. It is a responsive control, so you can keep the content on top for desktop and switch to Content Bottom on mobile.

How many columns can the Sapling 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.

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.

How do I show posts from a specific category only?

In the Query section, open the Include controls, set Include By to Terms, and pick your category. Only posts from that category will appear in the grid.

Does the Sapling 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
• List Group
• Stellar Blog Slider

Conclusion

The Sapling Grid Widget by Sky Addons for Elementor delivers a clean, flexible post grid with a unique content-top layout option, hover card states, and built-in pagination. Utilize its customizable features to create a seamless user experience. For further assistance, consult the Sky Addons support team or community forums. Happy publishing!