A handful of content layouts are available to enhance the look and feel of your content. Some can be created within the editor, others can be dropped in your page from /SharedResources/MiniTemplates/ContentLayouts
Headings
Your page should have one Heading 1, which tells you what the page is about. For example, this page's Heading 1 is 'Content layouts'. Heading 2 should be used for any subheadings on the page. Heading 3 should be used for a subsection within a Heading 2 section, and so on. Headings should be used in a logical order - don't use a Heading 3 because you like how it looks, only use it if it's subheading for a section that has a Heading 2.
You apply these to your text from the Format dropdown on the main toolbar.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
You can add a blue background to your headings to make sections stand out where required. First apply your heading style as above. Then to apply the blue background, go to the Styles dropdown on the main toolbar and find headingBackground.
Heading 1 with background
Heading 2 with background
Heading 3 with background
Lists
You can use bulleted or numbered lists to break up your content and make it more readable. The options for these are on the top toolbar. You can get a subsection within a list, like below, by indenting the relevant bullets - this is next to the bulletpoint option on the toolbar.
Unordered list
- Bullet 1
- Bullet 2
- Bullet 2 A
- Bullet 2 B
- Bullet 2 C
- Bullet 3
- Bullet 4
- Bullet 5
Ordered list
- Bullet 1
- Bullet 2
- Bullet 2 A
- Bullet 2 B
- Bullet 2 C
- Bullet 3
- Bullet 4
- Bullet 5
Tables
Tables should be used for tabular data, not to lay out content. You can insert a table from the top toolbar and select the options you require there, like the numbers of rows and columns. Ensure your table has a caption explaining what it is for, for accessibility.
One you have inserted your table, you can right click on it to get further options, for example, to add another row.
Horizontal table caption
| Header 1 | Header 2 | Header 3 | Header 4 |
|---|
| Cell 1 A |
Cell 2 A |
Cell 3 A |
Cell 4 A |
| Cell 1 B |
Cell 2 B |
Cell 3 B |
Cell 4 B |
Vertical and horizontal table caption
| | Header top 1 | Header top 2 | Header top 3 |
|---|
| Header left 1 |
Cell 1 1 |
Cell 1 2 |
Cell 1 3 |
|---|
| Header left 2 |
Cell 1 2 |
Cell 2 2 |
Cell 3 2 |
|---|
| Header left 3 |
Cell 1 3 |
Cell 2 3 |
Cell 3 3 |
|---|
Show/hides
Show/hides are useful for where a user doesn't need to view all the content. A good example of this is the CELE site, where the user just needs to look at the section that is relevant to the IELTS score they need.
If you need to use a lot of show/hides because you have too much content, consider if there is a better way to display it, for example, by cutting down the content or creating a subpage.
You can find the show/hide mini-template at /SharedResources/MiniTemplates/ContentLayouts/ShowHide-1
Here's a show/hide title
And a bit of text to entice you to click to read more.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam est tellus, tristique quis velit id, ornare blandit est. Maecenas ut arcu ut quam aliquet sollicitudin. Mauris in pharetra eros. Sed sed eleifend enim. Cras urna tortor, fringilla ut nibh in, mollis egestas ipsum. Nam sit amet ultricies leo, id lacinia turpis. Phasellus eu sapien vel dui interdum molestie sed viverra nibh. Etiam gravida, augue semper accumsan laoreet, quam nisl pulvinar velit, ut laoreet justo lectus ut justo. In hac habitasse platea dictumst. Suspendisse vel purus risus.
Sed sit amet tortor ex. Integer id faucibus libero. Praesent a felis sodales, ultricies eros eu, interdum orci. Cras eget nisi nec justo semper porta vel in ligula. Mauris hendrerit commodo scelerisque.
Frequently asked questions
This layout shows a Q and A icon for your FAQs section. There is an open answer option and one that you click to reveal the answer.
Question
Answer
You can find this FAQ mini-template at /SharedResources/MiniTemplates/ContentLayouts/FrequentlyAskedQuestion
Question
Answer
You can find this FAQ mini-template at /SharedResources/MiniTemplates/ContentLayouts/FrequentlyAskedQuestions-Show-Hide
Boxes
Boxes can be used to draw attention to a specific section on your page. There are a few different options. See which works best for your content.
Dark background
Praesent non vehicula neque, at ornare tortor. Etiam eleifend tincidunt efficitur. Donec blandit risus erat, sed finibus orci porttitor a. Fusce a ligula felis. Nulla ipsum quam, condimentum suscipit diam et, malesuada convallis mi.
You can find this mini-template at /SharedResources/MiniTemplates/ContentLayouts/boxWithDarkBackground
Dotted border
Praesent non vehicula neque, at ornare tortor. Etiam eleifend tincidunt efficitur. Donec blandit risus erat, sed finibus orci porttitor a. Fusce a ligula felis. Nulla ipsum quam, condimentum suscipit diam et, malesuada convallis mi.
You can find this mini-template at /SharedResources/MiniTemplates/ContentLayouts/boxWithDotted-Border
Grey background
Praesent non vehicula neque, at ornare tortor. Etiam eleifend tincidunt efficitur. Donec blandit risus erat, sed finibus orci porttitor a. Fusce a ligula felis. Nulla ipsum quam, condimentum suscipit diam et, malesuada convallis mi.
You can find this mini-template at /SharedResources/MiniTemplates/ContentLayouts/boxWithGreyBackground
Light grey background
Praesent non vehicula neque, at ornare tortor. Etiam eleifend tincidunt efficitur. Donec blandit risus erat, sed finibus orci porttitor a. Fusce a ligula felis. Nulla ipsum quam.
You can find this mini-template at /SharedResources/MiniTemplates/ContentLayouts/boxWithLightGreyBackground
Important information
You can use this template to highlight something important. You can find this mini-template at /SharedResources/MiniTemplates/ContentLayouts/ImportantInformation
Important information here
Blue info block
This template has a section for a heading and a section for content. You can find this mini-template at /SharedResources/MiniTemplates/Content-Blocks/BlueFullInfoBlock
Box with border and centred content
This template has a border and the content is centred. Paragraphs of content should not use this template as centred text is harder for users to read. You can find this mini-template at /SharedResources/MiniTemplates/Content-Blocks/BoxWithBorderAndCentredContent