Menu Close

Blocksify Pro Docs

Filter shells and responsive layout

Blocksify Pro filter shells control whether a Loop Filter stays open or appears from a button on each screen size.

Where to find Shell, Layout, and Gap

  1. Select the Loop Filter block in the page editor.
  2. Open the block settings sidebar, then expand Settings.
  3. Set Layout, Gap, and Shell. The canvas updates as you change them.

Stack places facets one after another vertically. Inline places them in a wrapping row, which works well above a wide results area. Gap controls the responsive space between facets in either layout.

Shell follows the Desktop, Tablet, and Mobile device selected in the editor toolbar. Set Desktop first, then switch devices and add the overrides you need. See Responsive and hover editing for the shared device controls.

Open

Open keeps every facet visible in the page layout. Use it for a desktop sidebar or a short filter above a Content Loop.

The editor canvas shows the complete Open Loop Filter with Property type, City, Price band, Bedrooms range and Amenities facets above its Reset footer.

No Filters trigger or shell header appears. In Apply mode set to Instant, the Apply control is hidden; turn on Show reset if visitors need a quick way back to the unfiltered listing.

Popover

Popover places the facets in a compact panel anchored to a Filters button. Use it above a loop when the filter should take little space but remain close to its trigger.

The published Find a Property page shows a Filters button with its anchored popover open to the City and Amenity facets.

The button includes the number of active choices. The panel closes when a visitor clicks outside it, presses Escape, or submits an Apply button filter.

Modal opens the filter in a centered overlay with a header and close control. Use it when several facets need more room than a popover provides.

The published Find a Property page shows a centered Filters modal with facet controls and Reset and Apply actions in its footer.

The trigger text is Filters. To add or change its icon, open Styling and use Filter button icon and Filter button icon position; the icon controls appear when a button-driven shell is used on at least one device.

The footer can show Reset and Apply. Apply appears with Apply mode set to Apply button; Reset follows Show reset. If neither control is needed, the empty footer is hidden.

Drawer – Left

Drawer – Left slides the filter in from the left edge and gives it a scrollable body. It is a practical mobile choice when the page already uses right-side controls.

The Find a Property page demonstrates the Loop Filter as a left drawer at desktop width with its Filters header and property facets visible.

For a common responsive setup, keep Desktop on Open and set Mobile to Drawer – Left. The filter remains a visible sidebar on large screens and becomes a compact trigger on phones.

Drawer – Right

Drawer – Right has the same header, scrolling body, trigger, and footer behavior, but enters from the right edge. Choose it when that direction fits the site navigation.

The Northstar Shop demonstrates the Loop Filter as a right drawer at desktop width with its Price, sale, stock, rating and product facets visible.

Figures 04 and 05 show the Drawer variants configured at desktop width for illustration.

Test each device after choosing a shell, especially an Inline layout with long labels. For facet-specific controls and visual choices, use Facet displays: list, buttons, dropdown and swatches.

Was this helpful?

0

Updated