Back to contents

How to use the alternative listing template functionality in Listing Grid

This tutorial introduces the way how to inject the alternative listing items within one Listing Grid widget using JetEngine functionality.

You are able to style the listings and present them in a bright, eye-catching manner on the pages. Create more sophisticated grid layout (chessboard pattern, highlighting each certain post,etc.) by combining several alternative listings in the Listing Grid widget of JetEngine plugin.

Preparations

1 Step – Creating the alternative listing template

First of all, you need to enable the Listing Grid injections option in the JetEngine dashboard.

jetengine dashboard

2 Step – Creating the first listing.

How to do that you can learn from this tutorial.

listing item

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 our case, we utilize JetEngine Dynamic Field and Dynamic Image widgets to showcase information about the team member and the image.

Besides, you need to style the appearance of the listing template according to your requirements. It should look different from the first listing, which you want to apply the alternative listing template to.

alternative listing item

Adjusting settings in Elementor

1 Step – Proceed to Elementor Editor

Open the page, where the original listing is displayed via the Listing Grid widget, in Elementor editor. Proceed to customize the widget in the settings panel on the left. In the General block enable the Inject alternative listing items option.

listing grid

Click the + Add Item button and set the item. In the Listing template field select the created alternative listing.

2 Step – Adjusting proper 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.

You can enable also the Inject this item only once and specify the item number. Also, it is possible to determine the start from the first item.

NOTE! If you enable the Start from first option, the alternative item will be injected on the first item, then on each N item after the first one.
Moreover, you have an opportunity to define the column span for customizing the listing layout according to your needs. It can’t be bigger than the columns number value.

If you set the Inject on: Depends on item meta field value option, then you need to specify the key (name/ID), select the Operator and insert the value.

NOTE! Compare separate multiple values with the comma for In, Not in, Between and Not between operators.
alternating listing grid

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 frontend.

listing grid on frontend

Display varied listings in one place and experiment with layouts and style of the listings using JetEngine Listing Grid widget.