Structured page
What is a structured page?
A structured page is suitable for very long or dense content that might overwhelm a user if it was put on a single basic page.
Structured pages make content-heavy pages appear less daunting by logically organising them into chunks that improve the user experience.
There are four types of structured page:
- Tabs. These allow users to toggle through different chunks of content while staying in the same place on the page. Users should only ever need one tab at a time – they shouldn't have to switch between tabs to understand content.
- Accordions. These create a stacked set of collapsible headings. Users click headings to reveal or hide content. Users should only have to open one or 2 accordions to find what they need – avoid forcing the user to click every accordion.
- Step by step. This creates a list of numbered headings presented in two columns that a user can click through to follow a process. Each step has a separate URL. This option can be useful for processes with a clear start point and end point.
- Table of contents. This creates a single vertical list of anchor links that jump to a section on the page when clicked. Unlike the Step-by-step option, all content is on the same page.
See a structured page with tabs
Use a structured page when:
- you have a lot of content on a single topic that needs to be split up into sections or steps.
A structured page shouldn't be used for:
- simple or short content – use a Basic page
- time sensitive content such as a news article.
How to create a structured page
Structured pages can be created, edited, and deleted by:
- editors
- site coordinators.
Once you log in to your website:
- Hover over the Drupal 'Content' menu, then go to 'Add content' > ‘Structured page’.
- Enter a title and your introduction.
- Use the ‘View mode selector’ drop-down menu to select your page type.
- Click the ‘Add new paragraph’ button to add the first section to your page.
- Enter a title for the section and enter the section's content in the ‘Body’ field.
- Click the 'Add another paragraph' button to add another section to your page.
- Once you've finished adding sections, click the ‘Publish’ button to save and publish the page.
Best practice
- Use one or 2 words for tab headings.
- Use a maximum of 4 tabs on a single page.
- Use a maximum of 8 steps on a Step-by-step page.
- Do not use more than 9 Accordions in a single page.
Fields
Fill in all required fields and as many optional fields as possible to provide the best user experience.
Field name |
Required field? |
Notes |
---|---|---|
Title |
Yes |
Page title and H1 heading of the structured page. |
Summary |
No |
Provides a short description of the page content that will display in search results. It will also display in teaser and card views. |
Introduction |
No |
Displays before the structured content (for example, above the tabs, table of contents or step-by-step). |
View mode selector |
Yes |
Determines how the structured content fields will display on the page. |
Structured Content |
No |
A section of content formatted by the View mode selector. |
Structured Content > Title |
No |
Heading for a section of content. |
Structured Content > Body |
No |
Content field for a section of content, linked to the attached Title field. |
Teaser image |
No |
Displays image on teaser and card views. |
Hero image |
No |
Replaces the default page header with a hero banner header on the structured page. |
Related content |
No |
Allows other pages on the site to be referenced in a short list on the page. |
Aside |
No |
Used for content that is related to the body content such as reminders or contact details. |
Tags |
No |
Allows the page to be tagged with taxonomy terms. |