“Post Grid Widget” is a fully responsive widget loaded with multiple predefined layout options to make your post grid attractive. With a few clicks, you can generate a well-formed grid for your blog posts, product showcase, portfolio, category post, and more. This is the best free Elementor Post Grid solution, offering advanced filtering and custom metadata options to display custom fields and ACF fields seamlessly.
Let’s take a brief look at all the options of the “Post Grid Widget” below.
Elementor Post Grid Tutorial Video
Add a Free Post Grid for Elementor
This widget requires Unlimited Elements Free version installed and activated on your WordPress website.
- Go to Unlimited Elements Widget Library
- Search in the search bar for “Post Grid”
- Hover over the widget in the search results and click install
- Add the “Post Grid” widget to any Elementor Page
General Settings for Elementor Post Grid
Layout
Select the desired layout from the list for your post grid.
- Under
- Overlay (PRO)
- Overlay Always (PRO)
- Under Overlap (PRO)
- Partial Overlay (PRO)
- Reveal from Bottom (PRO)
- Side by Side (PRO)
- Alternating (PRO)
Grid Gap
Increase or decrease the gap between posts.
Number of items
Select the number of items you want to show in a row.
Button text
Edit the text you want to display on the button.
Direction
Choose the item's direction from Left to Right or Right to Left.
Intro number of characters
Choose the number of characters of post content you want to display.
Force Metro Layout
Makes grid in metro style, but it only works with 4 columns.
Show Empty Message
Shows empty message when no post answers the query.
Empty Message
Set custom empty message.
Layout Settings for Elementor Post Grid
Show or Hide elements in post layout.
Additional Data Settings for Elementor Post Grid
Enable/disable date, time, author, and customize custom metadata.
Show Date
Show/Hide Post Date
- Text before date
- Date Icon
Show Time
Show/Hide Post Time
- Text before Time
- Time Icon
Show Author
Show or Hide Author
- Author Element - Icon / Avatar Image
- Author Icon
- Text Before Author
Show Comments
Show or Hide Author
- Text Before Comments
- Comments Icon
Custom Meta (PRO Feature)
Display custom metadata, ACF (advanced custom fields) in post grid.
- Show custom meta
- Select meta filed name
- Add custom text before metadata
- Choose custom meta icon
Post Query Settings for Elementor Post Grid
Select the exact posts you want to show on your Elementor page
Posts Source
Choose any of the below options for your post source.
- Current Query Post
- Custom Posts
- Related Posts
- Manual Selection
Post Types
Choose the type of post you want to display. For example posts, pages, products, or any other custom post type.
Include By
Include the posts from different options given below
- Include Sticky Posts
- Get Only Sticky Posts
- Author
- Date
- Post Parent
- Post Meta
- Most Viewed
- ID's from PHP function
- ID's from Post Meta
- ID's from Dynamic Field
Include By Terms
Choose specific posts that you would like to include from your selection by adding rules.
- Include By Terms Relation
- Include Terms Children
Exclude By
Choose specific posts that you would like to exclude from your selection by adding rules.
- Terms
- Current Posts
- Author
- Post Without Featured Image
- Posts with current category
- Posts with current tags
- Offset
- Avoid Duplicates
- ID's from Dynamic Field
To know more about post query setting, please visit our article on Advanced Post Selection
Post Pagination and Filtering for Elementor Post Grid
Pagination
Display the pagination for your post grid
- None
- Numbers
- Using Pagination Widget
Enable Post Filtering
When turned on you can use all the post-filter widgets like tab filters, load more and infinite scroll.
Filters Behaviour
- Ajax
- Ajax and URL change - Will change the URL each time the filter changes and add the possibility to use browser back navigation.
Learn more about the diffrent Ajax filters that can work with the Post Grid in the links bellow:
Connected Settings for Elementor Post Grid
Enable Remote Connection
Visit Name for Connection
Provide a name for the connection that other widgets will use to connect and control this widget.
Sync
Sync Group
Choose the same group for two or more item-based widgets so they can sync together.
Show Debug
Sync between two post widgets to filter them simultaneously with a post filter.
Elementor Post Grid Styling
Various styling options are included to control every design aspect of the widget. Modify the colors to match your site’s look and feel. Customize the text, button, fonts, and layout to make the widget look and work exactly how you want it.
Layout Styling for Elementor Post Grid
In this section, style the alignment, image height, padding and border.
Post Category Styling for Elementor Post Grid
In this section, you can style the color, typography, spacing, etc. of the post category.
Title Styling for Elementor Post Grid
Style the color, typography and spacing of the title.
Additional Data Styling for Elementor Post Grid
In this section, you can style the color, typography, spacing and alignment of meta data.
Text Styling for Elementor Post Grid
Style the text color, text typography and text spacing.
Button Styling for Elementor Post Grid
In this section, you can style the color, typography, border, radius, spacing, etc. of the button.
Elementor Post Grid Empty Message Styling
Style the typography, color, padding, border etc. of your empty message with this option.
Usage Examples of Elementor Post Grid
Here are some live use cases for the Post Grid widget.
Free Elementor Post Grid Overlay With Metro Grid Layout
Free Elementor Post Grid Under Overlap with Pagination
Free Elementor Post Grid With Load More Button
Free Elementor Post Grid With Filters and Pagination
Thank you for using the Post Grid Widget for Elementor! With its versatile layout options and easy customization, this is the best Post Grid Widget for Elementor, ideal for showcasing your blog or news posts in a clean, organized way. We hope it enhances your website’s content presentation. If you have any questions or need assistance, feel free to reach out. For more use cases and examples visit the live demo on our website.
