The Post Grid widget by Atomic Addons shows your posts as cards in a grid. Each card has the featured image, the categories, the title, a short excerpt and a meta row with the author, date and reading time. You pick one of three layouts, choose which posts appear, and can add a read more link and page numbers. This guide covers adding the widget, choosing the posts and setting up the cards.
Enable the Post Grid Widget
Post Grid is a Pro widget and needs Atomic Addons Pro. Switch it on from the plugin dashboard:
- 1
Go to WordPress Dashboard → Atomic Addons.
- 2
Click the Widgets tab.
- 3
Search for Post Grid. You can also open the Posts / Dynamic category.
- 4
Turn the Post Grid widget on.
- 5
Click Save Settings.
Add the Post Grid Widget
Post Grid works on any page:
- 1
Open the page in Elementor (Edit with Elementor).
- 2
In the widget panel, search for Post Grid. The widget sits in the Atomic Addons Pro category.
- 3
Drag it into the page and set it up with the controls below.
- 4
Click Publish (or Update).
To list the posts of your blog, category, tag, author or date pages, put the widget in a Theme Builder template made from the Archive card (or the Search Results card for search pages) and set its Source to Current Query (see Query).
Layout
Open the widget and go to Content → Layout:
- 1
Layout Style: Style 01, the default, shows equal cards in columns. Style 02 works in groups of four: a large card with the image beside the text, and three small cards next to it. Style 03 works in groups of five: a large card followed by four small cards. The small cards show only the image, title and meta; their category and text are hidden.
- 2
Columns: Style 01 only: 1 to 6 columns, 3 by default, 2 on tablets and 1 on phones. Use the device icon to change the tablet and phone numbers.
- 3
Row Gap: The space between rows, 24px unless you change it.
- 4
Column Gap: The space between columns, 24px unless you change it.
- 5
Image Resolution: Which image size WordPress serves for the cards, Medium by default. Shown while Show Image is on (see Card Content).
- 6
Content on Image: Style 01 only, with the image shown: lays the text over the lower part of the image on a dark, blurred band that shows the category and title. When a visitor points at the card, the band fills the card and the excerpt, meta and read more link fade in.
- 7
Item Height: With Content on Image: the height of each card, 100 to 800px.
- 8
Content Height: With Content on Image: the height of the text band before hover, 50 to 200px (150px by default).
With Content on Image on, the On Image read more type is hidden. Use Classic or None instead.
Query
Content → Query decides which posts appear:
- 1
Item Limit: How many posts to show. Each layout has its own slider, sized to fill whole rows or groups: 6 by default for Style 01 (in steps of 3, up to 21), 4 for Style 02 (steps of 4, up to 20) and 5 for Style 03 (steps of 5, up to 20). With pagination on, it is the number per page.
- 2
Source: Posts, the default, picks from your blog posts with the filters below. The list also has Pages and every other public post type on your site. Manual Selection shows only the posts you search for and pick in Search & Select, of any type. Current Query shows the posts of the page being viewed — a category, tag, author, date or search results page; the editor may not show them until you save and reload. Related shows, on a single post, other posts of the same type by the same author; narrow it down with Include By → Terms, and add Exclude By → Current Post to leave out the post itself.
- 3
Include / Exclude: Include By keeps only posts in the Terms you pick (categories, tags, formats or custom taxonomy terms) or by the Authors you pick. Exclude By leaves out authors, the Current Post, posts you pick with Manual Selection, or terms.
- 4
Offset: Skips this many posts from the start of the list, 0 by default.
- 5
Date: All by default. Or only posts published in the Past Day, Past Week, Past Month, Past Quarter or Past Year, or between a Before and an After date with Custom.
- 6
Order By: Date (the default), Title, ID, Author, Comment Count, Menu Order, Last Modified or Random.
- 7
Order: DESC, the default, puts the newest (or highest) first; ASC reverses it.
- 8
Ignore Sticky Posts: With the Posts source: on by default, so sticky posts take their normal place instead of being pinned to the top.
Only Featured Image Post leaves out posts without a featured image. Query ID is for developers: it gives the query a name that custom code can filter. The section also has a Limit field, but Post Grid doesn't use it: Item Limit sets the number of posts.
With Current Query the page's own query decides which posts show and in what order, so the filters and order settings are hidden. Item Limit still sets how many appear per page. The Include and Exclude tabs are also hidden with Manual Selection.
Card Content
Content → Additional picks what each card shows:
- 1
Show Image: The featured image; posts without one show a placeholder. On by default.
- 2
Title: The post title, linked to the post. On by default.
- 3
Title HTML Tag: The title's markup: H1 to H6, div, span or p. H3 by default.
- 4
Show Text: An excerpt under the title. A post's own excerpt is shown in full; otherwise the widget cuts the post content to the Text Limit, 20 words by default (0 shows the whole content). Ellipsis adds text after a cut excerpt, such as “…”, and Strip Shortcode (on by default) removes shortcodes from it.
- 5
Show Author: The author's name in the meta row, linked to their posts. On by default.
- 6
Separator: The character between the meta items, “·” by default.
- 7
Date: The publish date, on by default. Human Different Time shows it as “3 days ago”, and Time Short Format shortens that to “3d ago”. Without the relative date, Show Time adds the time with a clock icon.
- 8
Reading Time: An estimate such as “2 min 30 sec read”, worked out from the post's words and the Reading Speed, 200 words per minute by default.
- 9
Show Category: The post's categories above the title, each linked to its archive. On by default.
Below the content switches:
- Primary Meta End Position — on by default: the text of the cards (the large cards in Style 02 and 03) fills the card's height, so the meta row sits at the bottom and lines up across cards. Turn it off to let the meta follow the text.
- Secondary Meta End Position — Style 02 and 03 only: the same for the small cards. Off by default.
- Read More Type — None (the default), Classic for a link under the excerpt, or On Image for an arrow over the image that appears, with a dark overlay, when a visitor points at the card.
- Post Format — a small icon in the corner of the image that matches the post's format (gallery, video, audio, quote, link and so on), linked to the post. Off by default.
- Pagination — page numbers under the grid, with previous and next arrows. Each page shows Item Limit posts. Off by default.
- Item Wrapper Link — makes the whole card a link to the post. As the panel warns, the title and read more links then stop working on their own. Off by default.
Read More
With Read More Type set to Classic, a Read More section appears under Content:
- 1
Read More Text: The link's text, “Read More” by default.
- 2
Icon: An optional icon from the icon library or an uploaded SVG.
- 3
Icon Position: With an icon: Left or Right of the text, right by default.
- 4
Icon Spacing: With an icon: the space between icon and text, 8px by default.
Style the Post Grid
Everything below is on the Style tab. Sections that belong to a feature you turned off are hidden.
- Items — content padding, and the card's background, border, border radius and shadow in Normal and Hover states. With Content on Image, the background applies to the text band, and Glassmorphism (on by default) blurs the image behind it by the Blur Level, 10px by default.
- Image — width, height, border, border radius and spacing. Style 02 and 03 add Secondary Image Width and Secondary Image Height for the small cards.
- Title — a hover Style (Underline by default, Middle Underline, Overline or Middle Overline), color, hover color, spacing and typography, with Secondary Typography for the small cards. Advanced Style adds a background color, text shadow, border radius and padding.
- Text, Meta and Category — colors, spacing and typography; the meta also has a separator color, and the category links have Normal and Hover states with background, border, radius and padding.
- Read More — the Classic link in Normal and Hover states, with a hover animation. Read More On Image sets the arrow color and the overlay color.
- Post Format — the icon in Normal and Hover states.
- Pagination — alignment, and the page numbers in Normal and Hover states (color, background, border, radius, padding, arrow size, typography), with the space above and between them.
If no post matches the query, the widget shows nothing.
Can't find what you need?
Our support team can help with setup questions and anything the docs don't cover yet.