Colour block in a sidebar
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.
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.
- Find the hidden Sidebar (or Shared Sidebar) section for your page in your site structure;
- Click on the blue Actions button and click Create content;
- A list of content will appear. Select the item called 'Colour block'; (Find out how to add a Content type)
- 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|
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.
|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|
- Click Save and approve and preview your page.