Back to contents

How to create a posts grid using JetElements Posts widget

This tutorial shows how to create a posts grid using Posts widget which completes a huge set of JetElements widgets for Elementor.

Posts widget from JetElements plugin is a universal tool for presenting your posts in a grid form. Just follow the recommendations listed below, and you’ll be able to create a posts grid effortlessly. Please note, that you need at least 1 post in your blog!

Step 1 — Firstly, log in to your website and open the needed page with the Elementor page builder.

Step 2 — Secondly, find the Posts widget and drop it to a new section.

Posts widget for Elementor

Step 3 — Then, proceed to the Content > General block to set the number of posts you want to display (up to 30) in the Posts Number field. Here move on to the Columns dropdown and define the number of columns (up to 6). If you select only 1 column, your posts will be in a usual listing position.

Step 4 — After that, turn on the Equal Columns Height option in order to make the columns equally high. Below, you can see Is archive template option. It allows you to pull your new posts to the grid and set tgis widget as an Archive template for the latest publications.

Posts widget adjustment

Step 5 — Afterwards, you should navigate to the Post Type dropdown and select the types of the posts to display in this particular posts grid. It can be Posts, Pages, Mega menu items, Products, etc.

Step 6 — If you want to showcase only posts of a specific category, there is a Query posts by dropdown, where you can select the filter criteria for the posts. You can also use the Use Custom Query option to filter the posts.

Step 7 — If you’ve already published some posts, you should probably use the Post offset option to hide them.

Posts widget general settings

Step 8 — Then, navigate to the Show Posts Title option to show or hide the titles of the posts. If you decide to show the title, you may like an idea of showing only part of it to intrigue the readers. You can do it with the help of the Title Word Trim option.

Step 9 — When it comes to the post images, you can either hide or show them with the help of the Show Posts Featured Image option. Whereas you decide to show the images, they can be displayed as simple images or box background images.

Step 10 — Then, after that, you should set the Background Image Size and Position, Enable or disable Posts Excerpt, hide or Show Posts Meta (author, date, comments). Also, enable or disable the Read More Button, select the Read More Button Icon, add or remove the Gap between the columns or rows, etc.

Posts widget style set up

Step 11 — Proceed to the Style block and change the design of the widget. There are tons of style settings. You are able to customize the Columns, the Post Items, the Post Thumbnails (images), the Post Items Content, the Titles, the Meta, the Excerpt, the Button, etc.

As soon as everything satisfied you, click the Publish button in the bottom-left corner of Elementor page builder and enjoy the result!