Prepare block backgrounds

What is a block background?

The block background is a style used for some blocks of the SiteW editor. Here is an example with the Text block:

With just a click, it’s possible to set a style for this block to give it the following look for instance:

With another click, you can also give it a quite different look:

To that end, just choose the style in the block backgrounds list in the Design tab of the website:

Benefits

By preparing block backgrounds for your website, you will save time to apply styles to blocks and ensure a graphical coherence between all blocks.

In the example above, you just need to apply the same background to these two blocks in order that their design can be identical, but that’s not all!

Block background modification

If you edit a block background, all blocks with this background will be automatically updated on the entire website. In this way, you save time to ensure your website graphical harmony!

Palette modification

This Text block has a block background that uses the current palette

Other inspiring possibility: if the colours set in the block background are shades of the palette, the colours of the block background will be automatically edited when you change the palette, and all blocks based on this background will be affected by this spate of changes.

Create a block background

Open the block backgrounds list

To create or edit a block background, go to Design of your website > Blocks’ background:

By clicking on the Blocks’ background button, you display the block backgrounds list created for the website:

Each background is shown with its title, a preview and a button to edit it.

Set block background properties

Block backgrounds have three parts:

1. Style for the background
2. Style for the title
3. Style for the paragraph

For each of these three parts, you can apply different graphical properties:

The diagram below highlights the padding, margin and border notions:

Apply a block background

As you can see on the video below, you can apply block backgrounds to different SiteW blocks, especially to the Text block.