Page History

...

Add To add a background colour to a custom page .layout area:

1. Go to the page you want to edit (Content → Pages & Templates).
   
   
2. Click Change on the Layout panel.
   
3. Hover over Options, then Create Custom Layout.

...

1. Add Custom Layout. (NOTE - If this is unavailable, Custom Layout Creator has not been enabled for your site. Contact Commerce Vision.)
   Image Added
2. In Name Your Layout, enter a suitable name for this layout.
   
   
3. Select Add a Row.
   
   
4. In the Add New Row modal:

   1. 1. Additional Classes: enter the colour code for the row based on your provided style guide. (See: Content → Style Guides → UI Elements)

         Expand
         title Show me how...
         In the CMS, go to Content → Style Guides → UI Elements. Image Added Go to your site's syle colours. Here's an example. Image Added  Note down the label(s) against the colours.  primary-background default-background secondary-background black-background white-background

Once you have added in your background colour classes, you can hit save and add the widgets you require into the new layout zones.

Then you can hit save and preview your new colourful  template.

...

Column Example

...

Width

...

Sizing Example (width x height in px)

...

...

...

...

960 x 200

...

...

...

...

...

1. 1. 1. In Additional Classes, add the colour label against '-background'. Image Added

         
         

      2. Full Width: Tick if the row is the full width across the screen.

      3. How many columns? Select the number of columns for the row.

         
         

2. Click Save.
   
   
3. Add widgets to the new layout zones. 

Related help