Filter appearances and mobile layouts
Requires WPEnhanced Ajax Filter Blocks Pro.
Overview
Filter appearances and mobile layouts (Pro) control how the Filter Posts panel behaves on desktop and mobile—beyond the always-visible sidebar common on large screens.
Available patterns typically include:
| Appearance | Behavior |
|---|---|
| Normal | Filters always visible (default) |
| Toggle | Collapsible panel with open/close control |
| Slide | Off-canvas or sliding panel |
| Mobile toggle | Button opens filters in drawer/overlay on small screens |
Configure panel appearance
-
Select the Filter Posts block (parent, not individual items).
-
Open Appearance or Layout settings (Pro).
-
Choose Normal, Toggle, or Slide.
-
For toggle/slide modes, set:
- Open / close button text
- Icons (optional)
- Start state — Open or closed on first load
-
Save and preview at desktop and mobile widths.
Mobile-specific options
Pro adds mobile toggle controls:
- Enable Mobile filter toggle on Filter Posts.
- Choose style:
- Button — Fixed or sticky "Filters" button
- Per-filter accordion — Collapse each filter item individually on mobile
- Optional: Auto-close drawer after Apply or after a filter change.
- Optional: Sticky toggle button while scrolling.
Test on real devices—touch targets and z-index stacking vary by theme.
Scroll to loop
Combine mobile drawer with Scroll to loop so after filtering on mobile, the viewport moves to product results. Configure under Filter Posts → Scroll settings.
Styling
Appearance modes add CSS classes such as divi-filter-toggle, divi-filter-slide, and toggle_mobile. Override in your theme or block Additional CSS for brand alignment.
PHP hooks for appearance conditions: see PHP hooks (daf_filterposts_render_appearance_*).
Accessibility
- Ensure toggle buttons are keyboard-focusable with visible focus states.
- Provide clear Open filters / Close filters labels for screen readers.
- Avoid trapping focus in the drawer without an escape path.
What's next
- Filter Posts block — Core panel settings
- Show selected filters — Active filter chips on mobile
- List view and grid switch — Layout controls for the loop