How to position the filter & listing
Putting the filter where it belongs on the page - beside the results, above them, or below.
In short
A filter doesn't have to live in a left sidebar. On the Layout Settings screen, the filter and the listing are two pieces sitting inside one wrapper, and the Layout group on the Design tab decides how they're arranged. Set Display to Flex, then use Direction: row and row reverse put the filter to the left or right of the results, column and column reverse put it above or below. Gap sets the distance between the two, and each device can be different.
Two pieces in one wrapper
The Layout Settings screen shows the filter and the listing together for the first time, and that's not just a preview - they really are two pieces inside a single wrapper. Arranging them is the same job as arranging anything else in the builder, which is why it's done with the same controls.
Because there are only two of them, the direction you set is the whole answer: it decides both whether they sit side by side or stacked, and which of the two comes first.
Placing the filter
Open the Design tab with the wrapper selected, expand Layout, and set Display to Flex. Direction then gives four arrows for the way the two pieces run - the same control described on Flex layout settings, behaving here exactly as it does everywhere else.
| Direction | Where the filter ends up |
|---|---|
| Row | Side by side, filter first - the classic left sidebar. |
| Row reverse | Side by side, filter last - a right-hand sidebar. |
| Column | Stacked, filter first - the filter across the top, results beneath. |
| Column reverse | Stacked, filter last - results first, filter underneath. |
Nothing about the filter itself changes when you move it: the same modules, the same settings, in a different place on the page.
A vertical direction stacks the filter above the results.
The space between them
Gap sets the distance between the filter and the listing. It matters more than it looks: a filter sitting flush against a grid of results reads as part of the grid, and a little space is what tells a visitor these are two different things.
A different arrangement per device
Direction is set per device like every other Layout value, and this is where that earns its keep. A sidebar that works on a desktop leaves very little room for results on a phone, so the usual answer is row on desktop and column on mobile - filter across the top, results beneath. Switch device with the control under the canvas, described on Responsive design, and set it again.
Tip
Above the listing suits a filter with only two or three choices; a sidebar suits a long one. If the filter is tall enough to push the first result below the fold, it belongs at the side rather than on top.
Note
Align X and Y sit alongside Direction and are worth a look once the placement is right - they control how the two pieces line up against each other, which is what stops a short filter floating oddly beside a tall grid.
FAQ
Can the filter go somewhere other than a sidebar?
Yes - left, right, above the listing or below it.
Where do I change it?
The Design tab on the Layout Settings screen: Layout group, Display set to Flex, then Direction.
Direction isn't doing anything - why?
Display is on Block. The Direction, Align and Gap controls apply when it's set to Flex.
Can I have a sidebar on desktop and a filter on top on mobile?
Yes. Direction is set per device - switch device under the canvas and set it again.
Does moving the filter change what's in it?
No. The modules and their settings are untouched; only the position changes.
How do I add space between the filter and the results?
Gap, in the same Layout group.
Was this page helpful?
Thanks for your feedback!