{"id":42042,"date":"2023-09-19T13:11:50","date_gmt":"2023-09-19T13:11:50","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=42042"},"modified":"2023-09-19T13:17:59","modified_gmt":"2023-09-19T13:17:59","slug":"layout-switcher-widget-overview","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/layout-switcher-widget-overview\/","title":{"rendered":"Layout Switcher Widget Overview"},"content":{"rendered":"\n

The Layout Switcher <\/strong>widget is a feature available as part of JetEngine<\/em>\u2019s plugin for the Listing Grid<\/a> <\/strong>widget in Elementor. It allows users to switch between the Listing Grid <\/strong>layouts on the front end to select the most convenient one.<\/p>\n\n\n

<\/svg><\/div>
Warning<\/div>

The Layout Switcher<\/strong> widget is a separate beta feature.<\/p><\/div><\/div>\n\n\n\n

Widget Activation<\/h2>\n\n\n\n
\n

The widget can be found in the Crocoblock account and activated as a usual WordPress plugin by following the WordPress Dashboard > Plugins > Add New <\/em><\/strong>path, pressing the \u201cUpload Plugin<\/strong>\u201d button, and then \u201cChoose File<\/strong>\u201d to find a needed ZIP archive on the computer.<\/p>\n\n\n\n

After that, one should press the \u201cInstall Now<\/strong>\u201d button and \u201cActivate Plugin<\/strong>\u201d after installation.<\/p>\n<\/div><\/div>\n\n\n\n

Layout Switcher Settings<\/h2>\n\n\n\n
\n

The Layout Switcher <\/strong>widget can be found in the Elementor Page Builder by typing its name in the search bar or by selecting it in the list of all the widgets in the Listing Elements <\/strong>section.<\/p>\n\n\n\n

\"layout<\/a><\/div>\n\n\n\n

The only settings section in the Content <\/strong>tab is General<\/strong>.<\/p>\n\n\n\n

\"layout<\/a><\/div>\n\n\n\n

First, the Select a Listing Grid widget <\/strong>field should be filled in using options in the drop-down menu. It is possible only if there is at least one Listing Grid <\/strong>widget on the page.<\/p>\n\n\n

<\/svg><\/div>
Things to know<\/div>

A set of characters in the brackets next to the options is an ID of a particular Listing Grid<\/strong> widget. This ID is connected to the Listing Grid<\/strong> by Elementor automatically.<\/p><\/div><\/div>\n\n\n\n

\"two<\/a><\/div>\n\n\n\n

Two Layouts <\/strong>are displayed by default: \u201cGrid\u201d and \u201cList.\u201d Users can duplicate or delete them by pressing the \u201ccopy\u201d and \u201cclose\u201d buttons.<\/p>\n\n\n\n

To edit the layout, one should open the layout by clicking on it.<\/p>\n\n\n\n

Layouts adjusting<\/h3>\n\n\n\n

To create a new layout, one should press the \u201cAdd Item<\/strong>\u201d button.<\/p>\n\n\n\n

\"add<\/a><\/div>\n\n\n\n

There are two tabs to adjust the layout: Content <\/strong>and Settings<\/strong>.<\/p>\n\n\n\n

In the Content<\/strong> tab, the following setting fields are presented:<\/p>\n\n\n\n

\"item<\/a><\/div>\n\n\n\n