What is the Design tab?
The Design tab holds the appearance of whatever you've selected, and it works the same way on every row, column and module.
In short
Click the pencil on any element and the Design tab holds its styling. On a filter module it starts with tabs for the parts that module is built from - Container, plus one or two others - and each tab holds the same collapsible groups: Layout, Sizing, Spacing, Background, Border, Box Shadow, and Text where there's text. Every value can be set separately for Desktop, Tablet and Mobile.
Where to find it
Click the pencil on any row or column or module and its settings open on the right. Design sits beside the Advanced tab, and on a module there's a Settings tab too. Whatever you've selected, the Design tab behaves identically - learn it once and it applies everywhere.
The same groups, whatever you have selected.
Tabs within the Design tab
A filter module is built from several parts at once - a container, a label, the items inside it - so its Design tab starts with a row of tabs. You pick the part you want to style, then work through the groups below. The first tab is always Container: the module as a whole, including its label. The tabs beside it cover the parts inside, and they change from module to module. Most filter modules have two or three.
Settings Table
| Module | Design Tabs |
|---|---|
| Checkbox Filter | Container · Single Item |
| Dropdown Filter | Container · Select Field · Options |
On a Checkbox Filter, Single Item is one checkbox and its text - style it once and every checkbox follows. On a Dropdown Filter, Select Field is the closed select box and Options are the entries in the list that drops down. Between them, every visible part of a module can be styled.
Treat those as examples rather than a fixed list. The tabs a module shows follow how it's currently set up, so the same module can offer more or fewer of them in another filter.
Everything else goes straight to the groups. Rows, columns and the modules you use in Post Item Template - Post Title, Post Date, and on a WooCommerce site Product Price and Badges - are each a single piece, so there's no part to choose between and no tabs to show.
The tabs match the parts each module is built from.
Tabs inside a group
Groups can subdivide again. Open Spacing on a Checkbox Filter's Container tab and you'll find Outer Wrapper, Label and Items Container - the individual parts the container is built from, each with its own margin and padding. Where a group has these inner tabs, choose the part you mean rather than expecting one value to cover the whole module.
Some groups also offer Default and Hover states, so a value can change when someone points at the element.
Tip
If a change doesn't seem to take effect, check which tab you're on. Setting padding on Outer Wrapper when you meant Items Container is the usual cause.
The groups
Styling is organised into collapsible groups. Open the one you need and leave the rest closed.
Settings Table
| Group | What it controls |
|---|---|
| Layout | How the things inside this element are arranged - direction, alignment and gap, using a flex system. |
| Sizing | Width and height of the element itself, including how wide a column is. |
| Spacing | Padding inside the element and margin around it. |
| Background | Colour, gradient or image behind the element. |
| Border | Border width, style, colour and corner radius. |
| Box Shadow | The shadow cast by the element. |
| Text | Font, size, weight, colour and alignment - appears only on elements that contain text. |
Note
Every Design value is set per device. Switch between Desktop, Tablet and Mobile in the bottom bar and the values you set apply to that device only, so a filter can look quite different on a phone without affecting the desktop design.
Tip
Layout controls what's inside an element; Sizing controls the element itself. If a column is the wrong width, Sizing is where you fix it.
FAQ
Is the Design tab the same on rows, columns and modules?
Yes - the only difference is that Text appears only on elements that contain text.
Why can't I see a Text group?
The element you've selected doesn't contain text. Rows and columns don't get one.
Can I style something differently on mobile?
Yes - switch device in the bottom bar first, then set the value. Every Design value is per device.
What is the Container tab?
The module as a whole, including its label. The tabs beside it cover the parts inside - Single Item on a Checkbox Filter, or Select Field and Options on a Dropdown Filter.
Why doesn't my module have any tabs?
Rows, columns and post modules are each a single piece, so their Design tab goes straight to the groups. The tabs appear on filter modules, which are built from several parts.
Why does a group have tabs inside it?
Because that part is built from several pieces. Spacing on a Checkbox Filter's Container splits into Outer Wrapper, Label and Items Container, each with its own margin and padding.
My change isn't showing - what went wrong?
Check which tab you were on. A value set on Container won't affect a single item, and one set on Outer Wrapper won't affect the items inside it.
Was this page helpful?
Thanks for your feedback!