Diamond Filters composite
All your filters in one widget with a repeater for order, input type and width — and when to use it instead of the individual atoms.
Diamond Filters is one widget that holds every filter, arranged by a repeater. It is the middle ground between the Ring Builder composer, which lays out a whole page for you, and the individual atoms, which you place one by one.
The repeater
Each row is one filter. Drag to reorder; the row order is the on-page order.
Per row:
| Control | What it does |
|---|---|
| Filter | Which filter this row is. |
| Placement | Which zone the row belongs to — always visible, or inside the collapsible area. |
| Width | A percentage, per device. Empty means a full row to itself; two rows at 50% pair up. Click the device icon on the control to give a filter one width on desktop and another on a phone. |
| Alignment | Left, centre or right within its cell. |
| Width | A percentage of the row. |
| Input type | How the filter is drawn: chips or slider for grades, slider or dropdowns for carat and price. |
The collapsible zone
Filters placed in the collapsed zone hide behind a toggle. This is how you offer twelve filters without a wall of controls: the four that matter above, the rest behind Advanced Filters +.
The toggle has five styles and its own size controls, plus separate text for its open and closed states.
The small-screen collapse
The collapsible zone above is a design-time choice: a row placed there is behind the toggle at every width. Collapse on small screens is the responsive one, and it folds the whole block — visible rows, collapsible zone, Apply and Reset — behind a single button.
| Setting | Folds below |
|---|---|
| Never | Nothing. The block renders open at every width. |
| Tablet and below | 1024px |
| Mobile only | 767px — the default |
Those are Elementor's default breakpoints. Both button labels are yours to write, and the button reuses the Toggle bar style section, so whatever you set there shapes it too.
Leave it on unless your block holds two or three filters. Eight filter groups open on a phone push the diamond grid entirely below the fold, which is the fastest way to lose a mobile shopper.
Apply mode
- Instantly on change — every click re-filters the grid. Best on fast catalogues.
- With an Apply button — the shopper sets several filters and applies them together. Better on very large catalogues, or when your shoppers tend to set five things at once.
Both modes get a Reset control.
How the skins lay it out
Each skin arranges the block differently, following its design:
- Sofia — one container with hairline dividers between filters.
- Dayana and Maya — a single row of filters.
- Alexandra — each filter in its own dark box, on the skin's dark canvas.
Composite or atoms?
Use the composite when your filters live together as one block — the common catalogue layout of a filter bar above or a sidebar beside the grid. One widget to configure, one skin to set, and the repeater handles the arrangement.
Use the atoms when the filters need to be in different parts of the page: shapes across the top as a hero, the rest in a sidebar, sort inside your own toolbar. The composite cannot split itself across your layout; the atoms can go anywhere.
Use the Ring Builder composer when you are building a Ring Builder step, because it renders the filters and the grid and the stepper from one widget.
All three routes end up talking to the same filter engine, so you can change your mind later without losing anything but the arrangement.