Is this feature disabled?

Custom Layout Creator needs to be switched on for your site by Commerce Vision. 

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

  1. Go to the page you want to edit (ContentPages & Templates).

  2. Click Change on the Layout panel.
  3. Hover over Options, then Add Custom Layout. (NOTE - If this is unavailable, Custom Layout Creator has not been enabled for your site. Contact Commerce Vision.)
  4. In Name Your Layout, enter a suitable name for this layout.

  5. Select Add a Row.

  6. In the Add New Row modal:
      1. Additional Classes: enter the colour code for the row based on your provided style guide. (See: ContentStyle GuidesUI Elements)

        1. In the CMS, go to Content → Style Guides → UI Elements.
        2. Go to your site's syle colours. Here's an example.

        3. Note down the label(s) against the colours. 
          1. primary-background
          2. default-background
          3. secondary-background
          4. black-background
          5. white-background
        4. In Additional Classes, add the colour label against '-background'.

      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.

  7. Click Save.

  8. Add widgets to the new layout zones. 

Related help