Help Center

How to Change Layouts in the Listing Grid

How to Change Layouts in the Listing Grid

Find out how to change the Listing Grid’s layouts with the specific feature available with the JetEngine plugin.

Before you start, check the tutorial requirements:

Widget Activation

Navigate to WordPress Dashboard > Plugins > Add New and press the “Upload Plugin” button.

Hit the “Choose File” button and find the needed ZIP file on your computer.

Then, press the “Install Now” button and “Activate Plugin” to make the widget function.

Content Editing

Proceed to the Elementor Page Builder to implement the Layout Switcher. 

Open the page where the Listing Grid is located or where it is to be put. 

Place the Listing Grid widget on the page and adjust its settings if you haven’t done it before.

listing grid widget

Find a Layout Switcher widget and put it on the page as well. Then, proceed to the settings; check their description in the Layout Switcher widget overview.

Pick the listing in the Select a Listing Grid widget field.

layout switcher widget

For this tutorial, we left the default “Grid” and “List” options and added several custom layouts by pressing “Add Item.”

Warning

We recommend having one layout set as default by activating its Is Default Layout toggle. The default “Grid” option represents such a layout, so it can be left without changes.

We created the “Two Columns” layout by setting the Columns Number value to “2” in the layout Settings tab.

two columns settings

We called the next layout “Just Prices.” It adds another listing, not the one set by default. To enable this functionality, we opened the Settings tab and selected the needed Listing.

We also changed the Columns Number value to “2.”

prices settings
Things to know

Items can be dragged up and down to change their order.

Next, we added an Icon to the labels. The field for attaching the icon is in the Content tab of each layer option.

icon field

Now, the icons are displayed next to the items.

layouts with icons

We also adjusted the style settings to highlight the enabled layout option. To do this, we changed the Buttons style in the Style > Buttons > Active tab.

However, styling is optional. Once the page was ready, we clicked the “Publish/Update” button.

buttons style

Check Result

Now, every layout button on the front end can be clicked to see the needed layout.

The “Grid” layout represents the default Listing Grid. It is a three-column content section.

grid layout

The “List” displays items in one column.

list layout

A custom “Two Columns” button enables a two-column layout.

two-column layout

The last button shows a different listing called “Tours.”

Things to know

When switching to a different Listing, the AJAX loading will be activated, and the content will appear after a short delay. When switching between default layouts, the content will load instantly.

different listing layout

Now you know how to change layouts in the Listing Grid widget with the help of the Layout Switcher feature available with the JetEngine plugin.

Was this article helpful?
YesNo

Need help?

Ask Facebook community

Get answers from 22K Crocoblock Community experts from all over the world.

Start a live chat

Ask question to support agent and share its details via chat messages.