Opacity

How see-through the whole column is, from fully solid to invisible.

Where to find it
Labelled Opacity in the "Selected Column" section of the Modify drawer.
Per device
Yes — you can set one value for every screen, or separate values for phone, tablet, and desktop.
Underlying CSS
opacity

In plain English

Opacity fades the entire column. It takes a number between 0 and 1, where 1 is completely solid (the default), 0.5 is half see-through, and 0 is invisible.

The important word is "entire". Opacity does not just fade the background — it fades the background, the text, the images, the border, and the shadow together, as one. If you only wanted a tinted background, this is the wrong setting: use a translucent colour in Background Color instead.

Its honest uses are secondary content that should recede, watermarks, and a disabled-looking state.

When you would use it

  • A decorative background image should sit quietly behind text.
  • Secondary or inactive content should visibly recede.
  • A watermark needs to be present but unobtrusive.

How to change it

  1. Select the column, open "Selected Column", then "Opacity".
  2. Enter a number between 0 and 1. 0.6 is a noticeable fade; 0.9 is a subtle one.
  3. Check the text is still readable — faded text on a busy background disappears quickly.
One value, or one per device? Every input in this setting sits under a “Same value for all resolutions” checkbox. Leave it checked for a single value everywhere, or uncheck it to give phones, tablets, and desktops their own. How per-device values work.

Watch out for

  • Faded text frequently fails accessibility contrast requirements. Anything a visitor needs to read should stay at full opacity.
  • An opacity of 0 hides the column visually but keeps it on the page, taking up space and still reachable by screen readers and keyboard. To genuinely remove it, use Hide Column.
  • For a tinted background only, use an rgba or hsla value in Background Color rather than fading the whole column.

Related settings

For developers

The technical reference for what this setting produces: MDN: opacity. You do not need any of it to use the setting — it is there for whoever is building the components or debugging the published page.

Where to go next