{"id":20429,"date":"2020-09-14T13:46:21","date_gmt":"2020-09-14T13:46:21","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=20429"},"modified":"2023-05-19T06:07:05","modified_gmt":"2023-05-19T06:07:05","slug":"jetgridbuilder-how-to-create-a-posts-grid","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetgridbuilder\/jetgridbuilder-how-to-create-a-posts-grid\/","title":{"rendered":"How to Create a Posts Grid"},"content":{"rendered":"\n

JetGridBuilder has two widgets \u2013 Posts Grid Builder<\/strong> and Terms Grid Builder<\/strong>. The process of creating an attractive grid is similar for both of these widgets. The difference is only in the grid items \u2013 posts in one case, and terms in another. In this tutorial, we will show all the steps of creating a nice grid using the Posts Grid Builder widget.<\/p>\n\n\n\n

1<\/span> Step<\/b> \u2014 Install the JetGridBuilder plugin<\/strong><\/p>\n\n\n\n

After downloading the JetGridBuilder plugin from WordPress.org, go to your website\u2019s WP dashboard and open Plugins > Add New<\/em><\/strong>. Click the \u201cUpload Plugin\u201d<\/strong> button and choose the downloaded file from your computer. Be aware that you have to choose the whole ZIP archive, don\u2019t extract files from it. After that hit the \u201cInstall Now<\/strong>\u201d button.<\/p>\n\n\n\n

\"plugin<\/figure><\/div>\n\n\n\n

When the installation is over, activate the plugin. The grid builder widgets are already added to the Elementor widget menu.<\/p>\n\n\n\n

2<\/span> Step<\/b> \u2014 Add the Posts Grid Builder widget to the page<\/strong><\/p>\n\n\n\n

Go to the Pages <\/strong>menu tab and find the page where you would like to place a posts grid. Open it in the Elementor editor. In the left-side widget menu, find the Posts Grid Builder<\/strong> widget.<\/p>\n\n\n\n

Drop it to the page. If there are other elements on this page, then it would be wise to add a separate section for the grid. As you can see, the grid is empty now.<\/p>\n\n\n\n

\"Grid<\/figure><\/div>\n\n\n\n

Click the \u201cAdd Posts<\/strong>\u201d button and in the opened window choose the posts you want to place to the grid. Click the \u201cSelect<\/strong>\u201d button. Now the posts are placed to the grid.<\/p>\n\n\n\n

\"adding<\/figure><\/div>\n\n\n\n

You can easily change the shape and size of posts tile by grabbing its right bottom corner. The grid itself can also be re-sized by dragging the post tiles up or down. That is why you can create any layout you want and add as many posts as you need. Play a little with the number of posts and its dimensions to create a layout that will completely satisfy you.<\/p>\n\n\n\n

3<\/span> Step<\/b> \u2014 Define the settings<\/strong><\/p>\n\n\n\n

Go to the Content <\/strong>menu tab and open the Grid <\/strong>submenu. If you don\u2019t have any special pre-made listings, you can leave most of the settings here as they are by default. A more detailed guide to all the settings of grid builder widgets can be found here<\/a>.<\/p>\n\n\n\n

Unfold the Post Item<\/strong> submenu and go through the features. It would be best if you try and play with the switches, including and excluding different parts of the post tile until they match your needs and taste. In our case, we leave only thumbnails and titles on the tiles.<\/p>\n\n\n\n

\"Post<\/figure><\/div>\n\n\n\n

In our example, we\u2019re also going to include a few WooCommerce products to the posts grid. If you also need some, you can choose what to show on the tile in the WooCommerce Product<\/strong> submenu. If you turn all the toggles off, there will be only a thumbnail, a title of the product, and its description on the tile.<\/p>\n\n\n\n

4<\/span> Step<\/b> \u2014 Create a nice design<\/strong><\/p>\n\n\n\n

In the Style <\/strong>menu tab, you will find the tools to customize each detail of the post tile. The settings for products are all in the WooCommerce Product<\/strong> submenu. Change the fonts, borders, backgrounds, and colors, so the appearance of the grid will match the design of your website. Here\u2019s an example of what you can create after about 10 minutes of work:<\/p>\n\n\n\n