All Collections
Layout Builder / Content Creation
Design / Formatting
How to add a Background Colour or Image to a Layout, Page and Zone
How to add a Background Colour or Image to a Layout, Page and Zone

This article will show you how to add a background image or colour to an entire layout, individual page and zone

Drew Harding avatar
Written by Drew Harding
Updated over a week ago

Adding a Layout Background Colour or Image:

In the layout builder, above the layout canvas there is a list of options. Select the option for 'Background Settings'.

You'll now see an option panel pop up which gives you the ability to set a background image or colour to an entire layout or the specific page selected. 

  • Layout Background - this is applied to every page within the layout and any new page created

  • Page Background - this overwrites the layout background settings for the specific page selected

To add a background colour to a layout, simply click into the colour box and use the colour picker. 

Once you've selected the colour, close the colour picker with the 'X' close at the top right. 

If you're happy, just click the 'Apply Background' button to set the colour. 

To add a background image to a layout, again you access this via the 'Background Settings' option in the layout builder. Now click on the 'Image' box.

You'll now be presented with a pop up where you can browse your media library. Simply find the item you want to and select it.

If you're happy, just click the 'Apply Background' button to set the image. 

NOTE: Setting a background image will overwrite / take priority over a background colour. 


Remove a Layout Background Colour or Image:

To remove an image set as the layout background, click into the 'Background Settings' option, then click into the image box. Now when the media library option pops up, click the 'No Image' option to remove the image.

Now click 'Apply Background' to remove the image. 

To remove a background colour, click into the 'Background Settings' option then into the colour box. In the colour picker, set the Opacity to '0' (zero) to make the colour fully transparent. 

Now click 'Apply Background' to remove the colour. 


Adding a Page Background Colour or Image::

You can access the page background settings in exactly the same way as the layout background above. Now you can configure the image or colour for the 'Current Page'  

Once configured, click 'Apply Background' to set the colour / image for the current page. 

NOTE: Setting the Current Page Background will overwrite the Layout Background settings for the currently selected page.


Adding a Zone Background Colour or Image:

Select the zone you wish to edit, then in the zone options panel find the section for Background settings.

Much the same as background settings for Layouts and Pages outlined above, you are able to choose to add a background image or colour by clicking into the relevant boxes. 

TIP: Adding a background colour to a zone, play with the opacity setting to make zones slightly transparent. This is great for layering content and adding extra design / visual impact.

Did this answer your question?