Sidebar top tips
Sidebar
A sidebar is the section of the page to the left of a content page where the navigation appears or to the right on a landing page with the Landing page with sidebar layout. Read our tips on what kind of content to include in sidebars.
Note: any content in a sidebar will appear underneath the main page content on smaller screens such as a phone or tablet. If your content needs to be more prominent, then you may want to consider using a Highlight box instead. Highlight box content will appear above the main page content on smaller screens.
Sidebars appear in one of two places:
- Landing pages - the sidebar appears on the right of a landing page that has the template, Landing page with sidebar; If your landing page is set up to have a Sidebar, it can be used to add links, call to action buttons, images, feeds and more. It is empty by default and requires content adding to it.
- Content pages - on your content pages, the Sidebar is the grey bar on the left of the screen and it lists your site structure in a vertical format. This can not be removed. However, you can add items to it underneath the navigation to highlight important content, adverts, links, call to action buttons and social media. Add a hidden section called 'Sidebar' as described above to the page where you want to add more Sidebar content.
Instructions for adding a Sidebar section
1. Go to the site structure view. You can do this by clicking on the terminalfour logo in the top left.
2. Navigate to the section (page) where you want the sidebar to appear.
3. Create a new hidden section named Sidebar. Find out more about adding hidden sections. You can now start adding the content types below to this new section.
Example
Once you have added your hidden Sidebar folder it should look like this:
Adding content to your sidebar
- Call to action button in a sidebar
- Colour block in a sidebar
- Display feed
- Add a document download button in a sidebar
- Link block - sidebar
- News and events manual block sidebar
- Add a thumbnail block in a sidebar
- Twitter feed - sidebar
Please note: if you add a sidebar to a section, it will only appear on that one section. If you want it to appear on its child pages as well, then you need to usee a Shared Sidebar (see below).
Shared Sidebar
If you add content to a page's Sidebar and you want this replicating on children of that page, you can use the Shared Sidebar.
To add a Shared Sidebar section, it's very similar to adding a normal sidebar. When you create the shared sidebar section you must name it 'Shared Sidebar', rather than just 'Sidebar'. Then proceed to add content to it. You can also rename any existing sidebar sections to Shared Sidebar in order to convert it to a shared sidebar.
If you have both a Shared Sidebar and a Sidebar on a particular page, the content you add to the Shared Sidebar will appear above the Sidebar content in your page layout. The Shared Sidebar takes priority.
Example
Once you have added your hidden Shared Sidebar folder it should look like this: