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.
1 Step – Creating the alternative listing template
First of all, you need to enable the Listing Grid injections option in the JetEngine dashboard.
2 Step – Creating the first listing.
How to do that you can learn from this tutorial.
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.
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.
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.
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.
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.
Display varied listings in one place and experiment with layouts and style of the listings using JetEngine Listing Grid widget.