fbpx

Black Friday Sale 50% Off

Days
Hrs
Min
Sec

Need Help?

Here are some good places you cant start.

Join the Community

Whats New?

Get updated about all the good stuff!

Post Grid

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, etc. This widget offers advanced filtering and also comes with custom metadata options to show custom fields and ACF fields.

Let’s take a brief look at all the options of the “Post Grid Widget” below.

Install Post Grid Widget for Elementor

This widget requires Unlimited Elements PRO version installed and activated on your WordPress website.

  1. Go to Unlimited Elements Widget Library
  2. Search in the search bar for “Post Grid”
  3. Hover over the widget in the search results and click install
  4. Add your “Post Grid” widget to any Elementor Page
post grid

General Settings

1
Layout

Select the desired layout from the list for your post grid.

  • Under
  • Overlay
  • Overlay Always
  • Under Overlap
  • Partial Overlay
  • Reveal from Bottom
  • Side by Side
  • Alternating
2
Grid Gap

Increase or decrease the gap between posts.

3
Number of items

Select the number of items you want to show in a row.

4
Button text

Edit the text you want to display on the button.

5
Direction

Choose the item's direction from Left to Right or Right to Left.

6
Intro number of characters

Choose the number of characters of post content you want to display.

7
Force Metro Layout

Makes grid in metro style, but it only works with 4 columns.

8
Show Empty Message

Shows empty message when no post answers the query.

9
Empty Message

Set custom empty message.

Layout Settings

Show or Hide elements in post layout. 

1
Show Image

Show or Hide the image.

2
Show Categories

Choose from the options to show the desired categories of posts.

  • No
  • All Categories
  • Only Main Category
  • By Taxonomy
3
Show Title

Show or Hide the title of the post.

4
Show Text

Show or Hide text from the post.

5
Show Button

Show or Hide the button.

Additional Data Settings

Enable/disable date, time, author, and customize custom metadata.

1
Show Date

Show/Hide Post Date

  1. Text before date
  2. Date Icon

2
Show Time

Show/Hide Post Time

  1. Text before Time
  2. Time Icon

3
Show Author

Show or Hide Author

  1. Author Element - Icon / Avatar Image
  2. Author Icon
  3. Text Before Author

4
Show Comments

Show or Hide Author

  1. Text Before Comments
  2. Comments Icon

5
Custom Meta

Display custom metadata, ACF (advanced custom fields) in post grid.

  1. Show custom meta
  2. Select meta filed name
  3. Add custom text before metadata
  4. Choose custom meta icon

Post Query Settings

Select the exact posts you want to show on your Elementor page

1
Posts Source

Choose any of the below options for your post source.

  • Current Query Post
  • Custom Posts
  • Related Posts
  • Manual Selection
2
Post Types

Choose the type of post you want to display. For example posts, pages, products, or any other custom post type.

3
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
4
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
5
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

1
Pagination

Display the pagination for your post grid

  • None
  • Numbers
  • Using Pagination Widget
2
Enable Post Filtering

When turned on you can use all the post-filter widgets like tab filters, load more and infinite scroll.

3
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

1
Enable Remote Connection
This enables the remote connection functionality for this widget.
2
Visit Name for Connection

Provide a name for the connection that other widgets will use to connect and control this widget.

3
Sync
You can connect two item-based widgets and sync them.
4
Sync Group

Choose the same group for two or more item-based widgets so they can sync together.

5
Show Debug
Display information about remote widgets connected to this widget.

Sync between two post widgets to filter them simultaneously with a post filter.

Post Grid Widget 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

In this section, style the alignment, image height, padding and border.

Post Category Styling

In this section, you can style the color, typography, spacing, etc. of the post category.

Title Styling

Style the color, typography and spacing of the title.

Additional Data Styling

In this section, you can style the color, typography, spacing and alignment of meta data.

Text Styling

Style the text color, text typography and text spacing.

Button Styling

In this section, you can style the color, typography, border, radius, spacing, etc. of the button.

Empty Message Styling

Style the typography, color, padding, border etc. of your empty message with this option.

Usage Examples

Here are some live use cases for the Post Grid widget.

Post Grid Overlay With Metro Grid Layout

Post Grid Under Overlap with pagination

Post Grid With Load More Button

Post Grid With Filters and Pagination

Video Overview

For more use cases and examples visit the live demo on our website.

The biggest sale of the year
50% OFF all pricing plans!

Days
Hrs
Min
Sec

Download is just a click away

Get instant access to tons of Elementor goodies, completely FREE!

Hurray!

You got FREE access to the worlds leading widgets for Elementor page builder!