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:
- Style for the background
- Style for the title
- 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.