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

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.

It is also possible to set the Number of Posts in the column.

Not Found Message field is to specify what text will appear when the data was not found.

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

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

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 on Field

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.

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

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.

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.