These are used to create more customised layouts, generally link boxes or to group a collection of links together.
Inserting an empty-panel
First you must insert an empty panel for your content and there are a number to choose from depending on what you want:
- H1 intro panel – with an auto generated title it is the panel for the start of a page
- Heading intro text – it has a heading and an intro
- Heading no intro text – just the heading, no intro
- No heading or intro – a pure empty panel, waiting for you to fill it.
You can see them all here (in the same one as above) one after the other:
Once you have your empty panel, you will most likely be putting boxes into it for a landing page, or as containers for a collection of links.
Free boxes
These go into your empty panel and are available in a 3 column layout and a rarely used 2 column layout. The 3 column layout comes with 1-box-only, 2-boxes-only, or all 3-boxes as pictured here:
Each box consist of an image box, a heading link, and room for some copy underneath.
If the heading for a panel is H2 (very likely) then the heading style you apply to the link should be H3 rather than another H2. Headings should always appear sequentially to reflect the structure of the information on the page.
It’s perfectly acceptable to have less than three boxes with this layout, but make sure you choose a different one (eg 1 box in a 3 col layout), rather than leave them empty. Leaving them empty creates unnecessary code, increases download time, and worst of all may be confusing to screen readers for people with visual impairments.
Here’s the 2-column box layout with 2-boxes inserted twice. You would do it this way so all the link boxes are related so you want them to appear in one panel rather than two separate panels:
Link box without the image
These are essentially the same as the free boxes but without the image box, hence the names: 3-col-text-link-with-para-no-image and 2-col-text-link-with-para-no-image. As before they come in 1-box, 2-boxes and 3-boxes (3-col only, obviously). The para underneath can be used or not. Here’s two layers of 3-col-text-link-with-para-no-image:
Here’s without the para, with 3-boxes on one layer and a 1-box under them:
