Skip to main content

Using the list/grid switcher

Divi 5 only

Switcher settings are on Archive Loop under Grid style → Grid / List View Switch. See the module reference for every related field.

Purpose​

The list/grid switcher adds a control so visitors choose how filtered results display—dense Grid cards or a vertical List—without reloading the page.

Enable the switcher​

  1. Edit Archive Loop on the page.
  2. Under Grid style, choose Grid / List View Switch instead of grid-only or list-only.
  3. Set Grid list position (left or right of the loop header).
  4. Choose Default state (grid or list) for the first visit.
  5. Set Cookie time (days) to remember the visitor’s choice; use 0 for session-only memory.

After Ajax filtering, the active view persists for the new result set.

Library layouts and custom classes​

Custom library loops can use helper classes to show or hide elements per view (for example hide a button in list view). Add classes in the module Advanced tab and scope CSS in your child theme or Divi custom CSS. See Custom loop item modules when building the layout.

What's next​