Page layout in SiteBuilder
Laying out your page logically makes it easy to scan, helping your audience to locate the information they want quickly, and improves the accessibility of your content for all users.
Important: As a public institution, the University has a legal obligation to comply with accessibility legislation in its web content, making our website and mobile apps more accessible so they follow the principles of being ‘perceivable, operable, understandable and robust’. Our Accessibility statement is published at warwick.ac.uk/accessibility.
For more information about how to meet these requirements, see our accessibility guide.
Break up sections of text with layout blocks, headings and sub-headings, lists and logical groups of related content. Start your page with an introduction - like this one - that summarises the content of the page.
In this article:
Layout blocks
The basic building block of page layouts in SiteBuilder's Components Editor, you can use layout blocks to create rows and columns, helping you group content together or break sections up in a way that makes it easy for visitors to understand which parts of your page relate to each other.
Select a style for a block from the standard presets (automatically generated based on the current site style) or use CSS to define your own custom styles.
Tip: To help you get started, we offer a range of Ready-made page layouts that you can use in your Components Editor pages.
Headings
Use headings to break up sections of continuous text within a page, making the content easier to scan so visitors can find what they're looking for quickly. Combine headings with link anchors to create in-page navigation like the "In this article" list above.
Lists
Ordered and unordered lists are another way to make pages scannable and break up continuous text. For example:
- Facts in lists are more straightforward to comprehend or memorise.
- The whitespace around an indented list helps the reader pause when scanning a page.
- Ordered lists are ideal for instructions.
Apply lists to text by selecting the Lists button in the SiteBuilder toolbar:
Other ways to present information
Combine text with images, audio or video clips and other presentation options to vary your content and make your page dynamic and interesting.
Some of the options you can find in SiteBuilder are:
- Image carousel: Automatically cycle through multiple images, with or without overlaid text.
- Horizontal scroller: Provide multiple slides of content that your visitors can explore at their own pace
- Tabs/accordion: Present content sections either as selectable tabs or in a collapsible accordion, enabling you to add more content to your page while taking up less space.
- Hero section: A high-impact option which enables you to use an exciting background image as part of a page or section header.
Any of these options can be mixed, matched and rearranged to create the layout you want.
Tip: Use visual elements carefully and reserve them for important content. For example, a large button carries more visual weight (i.e., is more noticeable) than a few words of text. Be sparing, however - If you highlight too much, important content can get missed because visitors won't know where to look.