How to Display Posts in a Grid Layout in Elementor Using JetGridBuilder

Elementor has no default widget or setting option aimed specifically at creating a grid layout. To create a grid layout in Elementor (and display your site posts on it), an add-on you can use is JetGridBuilder. Well, there are actually a bunch of other add-ons out there that you can use to create a grid layout as well. JetGridBuilder is designed specifically to create a grid layout to display posts on your WordPress site. In addition, JetGridBuilder also allows you to create a grid layout to display WordPress taxonomies (categories and tags).

JetGridBuilder itself is an Elementor add-on from Crocoblock, the maker of the JetPlugins. Unlike JetPlugins, JetGridBuilder is released as a free add-on. You can download it on the official plugin directory of WordPress. JetGridBuilder is especially a great add-on if you want to create an online magazine with Elementor. You can use it to create a grid layout on a certain section of the homepage of other pages of your online magazine.

How to use JetGridBuilder

First off, you can download install the JetGridBuilder first. As mentioned, you can download it from the official plugin directory of WordPress. Once installed and activated, JetGridBuilder adds two widgets to your Elementor: Posts Grid Builder and Terms Grid Builder.

You can use the Posts Grid Builder widget to display the following content types on your WordPress site:

  • Pages
  • Posts (blog posts)
  • WooCommerce products
  • Custom post types
  • JetEngine listing (read here to learn more about JetEngine listing)

While for the Terms Grid Builder widget, you can use it to display the following content types:

  • Categories
  • Tags
  • WooCommerce product categories
  • WooCommerce product tags

By the way, you can use JetGridBuilder on both Elementor Free and Elementor Pro.

Unlike, say JetBlog, which automatically displays the new blog posts on the grid, the content on the grid you created with JetGridBuilder remains the same until you change it manually.

Start creating a grid layout with JetGridBuilder

Assuming you have installed and activated JetGridBuilder, create a new page and edit it with Elementor (sure, you can also edit an existing page). If you are completely new to Elementor, you can this guide to learn how to use Elementor. Prepare a section and column on the Elementor editor. Once ready, drag the Posts Grid Builder widget (or Terms Grid Builder widget if you want to display WordPress terms) to the canvas area.

To add a post, simply click the ADD POSTS button on the canvas area (or on the left panel). You can then select a post you want to display from the appearing window. Click the Select button on the bottom-right corner of the window to insert the selected post.

You can go the left panel — on the Grid block — to customize the content. You can, for instance, set content style to overlay. You can also set the gutter value and number of columns.

If you want to display a JetEngine listing, you can set item type to JetEngine. You can then select the listing item you want to display on dropdown menu on the Listing option.

To resize the post, click and hold the bottom-right corner of the post then drag it in any direction.

To add more posts, you can simply click the ADD POSTS on the left panel. To arrange the posts position, you can drag a post you want to set the position of to any spot you like.

To set the gap between posts, you can set the gutter value or drag a post to a certain direction to give a space between each other (you can also set the gap from the Style tab, which will be covered later below).

To customize the elements of the posts, you can open the Post Item block under the Content tab. From this block, you can set things like thumbnail size, excerpt length, show/hide post author, show/hide post date, show/hide post type label, and so on.

If you display WooCommerce products on the grid, you can open the Woocommerce Product block to show/hide elements like price, rating, product category, and add to chart button.

Note: If you want to use the Terms Grid Builder widget to display the terms in the grid and want to display the thumbnails of the terms you display, you need to add the thumbnails of the associated terms by editing the terms.

Styling up the grid content

To style up the content of the grid, you can go to the Style tab on the left panel. There are 10 styling option blocks to style up the elements of the content such as post title, post description, post meta, and so on. You can open each block to set things like typography, text color, margin, and alignment. For instance, if you want to style up the title of the content, you can open the Post Item: Title block.

To set the space between posts on the grid, you can open the Post Item block. You can set the padding to do so. From this block, you can also set the border type of posts, border width, border radius, border color, and box shadow.

You can play around on the Style tab to style up the content of the grid. Once done, you can click the PUBLISH/UPDATE button to apply the changes to your page.

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Want to save yearly expense up to $219? why not?

Leave a Comment

Haven’t used Elementor Pro yet?