Using the List/Grid Switcher

Written by the Divi Engine Documentation Team

Introduction

In this documentation, we delve into the powerful feature of Divi Ajax Filter, the List Grid Switcher. This dynamic feature permits seamless switching between the list and grid views. Additionally, it provides extra functionalities, such as the inclusion of a 'Read More' button in grid view and an excerpt text with a 'Read More' link in the list view. This feature operates smoothly with CSS magic, which avoids the need for double loading elements on the screen. 

List/Grid Switcher DEMO ⮕ https://ajax-filter-docs.diviengine.com/loop-templates/grid-list-loop-template/

Steps to Set Up the List Grid Switcher in Divi Ajax Filter

1. Access the Archive Loop settings: Go to your page backend, find the archive loop settings for Divi Ajax Filter.
2. Configure your Loop Layout: Create a custom loop layout or use one of the existing loop templates. The custom loop layout provides extra flexibility.
3. Navigate to the Grid Settings: Ensure that you select "grid list view" switch as your view. You'll notice a new option, "Grid List View Options", where you can set the default state to either grid or list and adjust the icon's position.
4. Set up Cookie Time: This setting saves the user's preferred default view for their next visit. If set to zero, the default setting, the cookie will be saved as a session cookie and the layout will "forget" the user preference; otherwise, you can set a specific number of days.
5. Create a custom layout (optional): For this, you'll need to use the Divi Ajax Filter thumbnail, the Post Title module, and layout excerpt within a Text module.
6. Apply CSS classes (optional): We have added specific CSS classes for you to use which are there to control the display of certain elements depending on the current view (list or grid). These classes are placed in the 'Custom CSS ID and Classes' section of the 'Advanced' tab in each module's settings.

Available CSS Classes

See below for the available CSS classes for you to use to enhance your Custom Loop Layouts for the grid/list switcher. 

.de-list-view | Use this to apply styles to elements in your custom loop when the list view is active. This should be added to the Theme Options Custom CSS area along with whatever CSS you want for that view.

.de-hide-list-view | Use this to hide a specific element like a button for example in list view. This should be added as a Custom Class in the Advanced tab of the element you want to hide in the view.

.de-grid-view | Use this to apply styles to elements in your custom loop when the grid view is active. This should be added to the Theme Options Custom CSS area along with whatever CSS you want for that view.

.de-hide-grid-view | Use this to hide a specific element like a button for example in grid view. This should be added as a Custom Class in the Advanced tab of the element you want to hide in the view.

.de-no-stack | Use this to prevent rows or columns from stacking. This should be added to the parent element. For example, if you have 2 columns in your row, the class would be added on the Advanced Tab for the Row.

Using Loop Templates

Instead of creating a custom loop layout, you can use one of Divi's loop templates. 

To do this:

1. Change Loop Style to Loop Templates: In the Archive Loop settings, set the Loop Style to "Loop Templates".
2. Select Template: Choose the desired template from the list.
3. Configure Template Settings: Under 'Loop Template Options', adjust the settings to suit your needs.

Remember that the use of a loop template or a custom layout will depend on your specific needs and desired level of customization.

In conclusion, the List Grid Switcher in Divi Ajax Filter offers a dynamic, user-friendly way to customize the appearance of your website content.