You are able to style the listings and present them in a bright, eye-catching manner on the pages. However, the listing grid uses a single listing template for the whole grid. If you want to create a more sophisticated grid layout by combining several different listing templates in the Listing Grid widget of the JetEngine plugin – this tutorial will show you how.
1 Step— Creating the alternative listing template
First of all, you need to enable the Listing Grid injections option. Open your WP dashboard and go to JetEngine > JetEngine Dashboard > Modules and tick the Listing Grid injections checkbox.
2 Step— Creating the first listing
Create a listing template that suits your taste. If you need some help – follow this Listing Template creation tutorial. You can create the Listing template either in Elementor page builder:
Or in Gutenberg Editor:
After that, go to the JetEngine > Listings section in the WP Dashboard and create a new alternative listing with the same dynamic widgets, which are used in the main listing. In Elementor it will look like that:
And here’s Gutenberg view:
In our case, we utilize JetEngine Dynamic Field and Dynamic Image widgets/blocks to showcase information about the room and its features.
Adjusting settings in Elementor
1 Step— Proceed to Elementor Editor
Open the page, where the original listing is displayed via the Listing Grid widget or block. Proceed to customize the widget in the settings panel. In the General section enable the Inject alternative listing items option. In Elementor it looks like that:
And in Gutenberg Editor it looks like that:
2 Step— Adjusting proper settings
Click the “Add Item” button and set the item. In the Listing template field select the created alternative listing. Let’s go through the other settings:
- Inject on field provides two options: you can choose either to attach the alternative listing unit on each N item in the main listing or depending on item meta field value. The N is defined in the Item number field. If the value you put to the Item number field is negative – the alternative listing unit will be applied not from the first item but from the last. For example, if you place “-1” there, the alternative template will be applied to the last item in the grid;
- You can enable also the Inject this item only once toggle and specify the item number. In this case, the listing template will be applied only to a single grid cell;
- If you enable the Start from the first item toggle, the alternative listing template will be applied to the first cell in the first row and to each N item after that. Moreover, you have an opportunity to define the Column span for customizing the listing layout according to your needs. But be aware, that it can’t be bigger than the columns number value.;
- If you set the Inject on to “Depends on item meta field value” option, then you need to specify the Key (name/ID), select the Operator, and insert the Value.
It is possible to add as many custom items with different settings as you wish.
3 Step— Check on the frontend
When all settings are adjusted, click the “Update” button and view the listing on the front end. Here’s how a simple listing grid with one listing template used will look like:
And this is the one where the alternative listing template was injected:
In Gutenberg injected Listing Grid will look like that:
Display varied listings in one place and experiment with layouts and style of the listings using the JetEngine Listing Grid widget.