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 posts 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

In the Listing block, it is possible to choose from the lists that were previously created in the WordPress Dashboard. In case there is more than one listing and you would like to apply some certain one to the exact page.

Edit Listing Grid

Here is how the General Block looks like:

listing grid general settings

Let’s go through each point:

Columns Number — decide how many columns must be displayed in the listing (from 1 to 6)

Want to use the listing as an Archive Template? Just toggle to Yes and remember that Listing Grid will take the information from WP > Settings > Reading.

There are several Status for the listing to choose from, such as:

  • Publish which means that it will be published immediately.
  • Future — just 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.

Activate Is masonry grid to present the Listing in more modern form. Learn more about Masonry layout in this tutorial.

Set the Equal columns height if needed just by toggling to Yes.

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.

Check this full tutorial of Load More usage.

Load More

Inject on field

Set the alternative listing unit to Each N Item or attach it depending on Meta Field Value with the Inject on Field option.

In simple words, if you have the Listings that are customized differently, it is possible to mix the styles in one.

For example, there is one Listing with a blue background and another one with a pink and in the current listing, you can set the blue color for the one part and the pink one to another.

It is a great option to make the items more attractive and interesting. Learn more about this function here Listing Template Functionality.

Inject Option

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 JetEngine Documentation.

query

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.

Order the posts by Name, Slug, Description, etc., Include or Exclude posts with a certain Term in Terms Query.

Widget Visibility

widget visibility

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

Slider Option

If you prefer to display the listing in the slider mode, just toggle it to Yes and start to customize it.

slider

Slides to Scroll — choose how many posts will be shifted to the side in one click.

Enable Show Arrows Navigation and choose the Style of the Arrow Icon.

Toggle to Yes the Dots Navigation if needed.

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 and set an appropriate Animation Speed.

Slider

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 by following our guide on the Knowledge Base page and make the website as unique as possible.