Back to contents

JetEngine: Listing Grid Widget Overview

This guide represents a detailed overview of the Listing Grid Widget. Learn how to build and showcase content in a grid layout.

Listing Grid is a widget of the JetEngine plugin that allows you dynamically display custom post types and taxonomies from Meta fields and Terms. It helps to post any type of content like Products, Services, Projects, and much more in the listing form, which is possible to customize to any taste and vision.

Let’s delve into all nuances of this powerful widget for Elementor!

General Listing Grid Settings

Listing Grid General settings section

Let’s go through each feature:

  • In the Listing drop-down menu, you can choose the listing template that was previously created in the WordPress Dashboard. You will find more details in this Listing template creation tutorial;
  • Columns Number. Here you are able to decide how many columns will be displayed in the listing (from 1 to 6);
  • Turn the Use as Archive Template toggle to use the page where you placed the grid as an archive template In this case the number of posts will be taken from the Blog pages show at most field that can be found in WP Dashboard > Settings > Reading window;
  • The Status drop-down menu contains a list of five options:
    • Publish which means that it will be published immediately;
    • Future — save it to post a little bit later;
    • Draft — save it as a draft and think if some changes are needed;
    • Pending Review — set this status if the listing is not ideally customized and needs some future revision;
    • Private — it is visible only for you;
  • Use Random posts number. Turn it on if you want to show a random number of posts each time the user reloads the page. After switching it on, you can set the minimum number of posts in the Post number bar and a maximum number of posts in the Max Random Posts number bar.
  • Not Found Message field is to specify what text will appear when the data was not found.
  • Lazy load. This option boosts the rendering performance of the page. When this toggle is enabled, the grid loads as the user scrolls the page and not when the page is opened;
  • Activate Is masonry grid to present the Listing in a form of masonry grid. Learn more about Masonry layout in this tutorial.
  • Turn on the Equal columns height toggle to unify all the columns by their height.

Load More

Load More is an amazing option of the updated JetEngine plugin that allows you to perfectly organize the listing and save the page space in case you have a lot of posts to show. When this option is enabled, the grid shows a defined number of posts and loads more of them on the user’s demand. With the help of this option, you can also use an Infinite Scroll functionality on the page, which men’s the new posts of the grid will be loaded as the user scrolls the page.

Check this full tutorial of Load More usage.

Listing Grid load more functionality

Inject on field

In simple words, if you have the Listings that are customized differently, it is possible to use them in one listing Grid. It is a great option to make the items more attractive and interesting. Learn more about this function in our Listing Template Functionality tutorial.

adding injection item

Queries Settings

Post Query is to Include or Exclude some posts in the listing by Posts IDs and Set advanced parameters. Check the step by step guide on Post Query in this set of detailed tutorials.

Listing Grid queries

The same thing with Users and Terms Queries. If there are some lists of the website users, such as Authors, Admins, Editors, etc., that help in maintaining it, you can create the Users Listing Grid and set advanced parameters to display it, for example by Roles, Exclude or Include some of them by Users ID.

Widget Visibility

Listing Grid visibility

With the Widget Visibility settings section, it is possible to set the widget to be always shown or hide it when the query is empty.

Slider

There are two options here – the Enable Slider and Enable Scroll Slider toggles. If you enable the first one you will see:

Listing Grid slider settings
  • Slides to Scroll. Choose how many posts will be shifted to the side in one click;
  • Enable Show Arrows Navigation toggle if you want the arrows to be displayed on each side of the slide and that choose the Arrow Icon;
  • Turn the Dots Navigation toggle on if you want to add the dots navigation to the bottom of the slider block;
  • Set Autoplay and it’s Speed with the Slider function if you do not want users to slide the listing manually.
  • Enable the Infinite Loop for slides to repeat from the first one after the last one is shown and set an appropriate Animation Speed.

The Enable Scroll Slider option adds a vertical scroll to the grid. On a mobile device, such a slider can be moved by just swiping it with fingers. That can sufficiently reduce the length of the page and improve the UI.

scroll slider
  • Scroll Slider On. Here you can choose the device on which the scroll slider will be enabled. That could be the desktop, tablet, or mobile;
  • Static column width. With the help of this field, you can set some static width of the grid for the different devices.

Well, as you know, all Crocoblock Plugins and Widgets have a wide range of options and this one is not an exception! Try all of them and make your website as unique as possible.