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
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;
- Status. Only the posts with a status you choose in this drop-down menu will be shown in the Listing Grid:
- Publish — published posts;
- Future — posts scheduled to be published in some time;
- Draft — drafts;
- Pending Review — the posts that need some revision;
- Private — the posts that are 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;
- Turn on the Equal columns height toggle to unify all the columns by their height.
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.
Use Custom Post Type
When you create a Listing template you do it for a defined CPT. And when you use it in the Listing Grid, only the items of that CPT are shown. However, in some cases, you can need to place two Listing Grids for different CPTs that will have the same look and structure. You can surely create two identical Listing templates for that purpose but that isn’t the only way.
You can just enable the Use Custom Post Type toggle and choose the CPT in the drop-down menu. In this case, the Listing Grid will use the structure of the Listing template you have chosen in the Listing drop-down but replaces the original CPT with the one you choose in the Post types select.
Be aware, that if you want to show the meta fields of different CPTs in the Listing, their names have to be the same. The best solution will be to create a Meta Box and assign it to both of the CPTs.
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.
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 detailed tutorial.
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 to maintain 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.
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.
There are two options here – the Enable Slider and Enable Scroll Slider toggles. If you enable the first one you will see:
- 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 horizontal 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 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.