Triangle

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

  1. Bullet 1
  2. Bullet 2
    1. Bullet 2 A
    2. Bullet 2 B
    3. Bullet 2 C
  3. Bullet 3
  4. Bullet 4
  5. 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 1Header 2Header 3Header 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 1Header top 2Header 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 

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

Heading

Content

 

 

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

Heading

Text here