Style a block: backgrounds, colours and spacing

Colours

Under Colours, you can control three things: the block background, text colour and accent colour used for links, icons and decorative details. The background has these choices:

• Default: keep the block on the normal page background.
• Dark: use the site's dark text colour as the background, while text and accent colours adjust automatically. This works well for a strong section or closing call to action.
• Page, Accent or Muted: one of your brand colours as a band (Muted is a soft wash of the muted colour). These follow your palette: if you change the brand colours later, the block changes with them, and its text stays readable.
• Custom colour: choose any background colour. If you do not set a text colour, the editor selects a readable option from your brand palette.

Only set text and accent colours manually when you deliberately want a specific pairing. Otherwise, letting the background determine them is the safer choice.

When you set your own accent colour, whatever is filled with it, such as a form's submit button, a step badge or the popular-plan badge of a Pricing table, automatically gets a text colour that reads on it, even on a light accent.

Background photo & edge

Under Background photo & edge, you can put a photo behind the block. A background photo adds atmosphere, not content, so the Wash setting keeps the text readable on any photo:

• Light: the block’s background colour goes over the photo, so the text colours stay the same.
• Dark: a dark wash with light text. It takes the place of the background colour.
• None: the photo as it is, with the page’s own text colours. Use it only for a pale, decorative picture, and check that the text reads everywhere on it.

Choose a calm picture with little detail, such as a landscape, a texture or a blurred location, and drag on the picture to choose what stays in view. A background photo needs no alternative text: it is decorative, and screen readers skip it.

Bottom edge: straight, wave or arc

In the same place, the Bottom edge can be Straight (the default), Wave or Arc. With a wave or an arc, the bottom of the block flows softly into the next section, and below it you always see the next block’s real background, whether that is the plain page, another coloured band or a picture. That is why you do not pick a colour for it.

• The edge shows on a block with a background colour or photo; on the plain page there is nothing to cut out.
• The edge is the gap: with a wave or arc edge, the Spacing below setting is not used.
• The last block on the page always stays straight.
• Use at most two such edges per page, and stick to one shape on a page.

Size and spacing

• Content width: Reading for a single column of copy, Wide for layouts such as grids, or Full when the content itself should fill the block.
• Width: controls how far the block background extends. Column keeps it to the content area, Full width takes the background to the screen edge, and Edge to edge extends both background and content.
• Spacing below: None, Tight, Default or Spacious.
• Inside the band: controls how much space sits around the content inside a coloured band, from compact to generous.
• Padding per side: when you need precision, set top, right, bottom and left individually.

The defaults are designed to keep a consistent page rhythm. Override them only where there is a clear reason, such as bringing two closely related blocks nearer together.

Visibility by device

• All devices: visible everywhere.
• Mobile only: hidden on tablet and desktop.
• Desktop only: hidden on mobile.
• Hidden: visitors do not see the block at all, but it stays in the editor. Useful when you want to keep something for later or finish it before publishing.

A common example is using a wide visual hero on desktop and a simpler, faster-loading version on phones.

Scheduling

You can make a block appear and disappear automatically:

• Date window: the block is visible only between the From and Until times. Useful for a promotion, event announcement or seasonal opening hours: set it in advance and you do not need to remember to remove it later.
• Hour of day: the block appears only during the chosen hours each day, using the visitor's local time. For example, 09:00–18:00 during the day or 22:00–06:00 overnight.

Use Clear schedule to return the block to always-visible behaviour.

Anchors: link directly to a block

Give a block a name in the Anchor ID field, for example contact or pricing. A button, menu item or link that points to #contact will then scroll directly to that block. Use lowercase letters, numbers, hyphens and underscores, do not start with a number, and keep every anchor unique on the page.