Colour block in a sidebar

Colour block example

The Colour block content type can be used on all pages with either a Sidebar (on the left) or a Highlight box (aligned within text on the right). The instructions below are for adding a button to a sidebar. There are separate instructions for adding a Colour block in the highlight box area.

The Sidebar is a great way of making content, like reminders, opening hours etc., stand out. This tutorial covers adding a Colour block in a Sidebar (see left).

Here is a live example

See the left-hand side grey Sidebar to find the live example

Use colour blocks for a great way of making important information - like reminders, opening hours, etc. - stand out. This tutorial covers adding a 'Colour block' (see right). Make sure you have added a highlight box widget before completing the following steps.

Instructions

Before continuing, make sure the section (page) you are working on has a Sidebar (or Shared Sidebar) hidden folder so you can add the Colour block. If not please see the instructions for adding a Sidebar folder.

  1. Find the hidden Sidebar (or Shared Sidebar) section for your page in your site structure; 
  2. Click on the blue Actions button and click Create content;
  3. A list of content will appear. Select the item called 'Colour block'; (Find out how to add a Content type)
  4. A form will appear. Complete the form as follows:
Field title What should I do? Is it compulsory?
Name* Name the block and give it a concise description e.g. 'Colour block - training page'. This is for your reference and the user does not see this. Yes
Heading* Give the block a heading. This appears at the top of the colour block and is visible to the user. Yes
Box content*

Use the editor to add headings, content, bullet points or links. For more infomation on the menus and buttons on the editor please refer to the General content instructions page.

 Yes
Colour* Select which colour you want to use. Find out more information about choosing colours in the Colour theme section. Yes, defaults to Primary colour palette
  1. Click Save and approve and preview your page.

Save and approve option