Legacy Pages

All pages that have been created with Legacy Components will continue to function as they did previously. You will not be able to create new pages using the Legacy Components.

A page cannot have both the legacy and new components. To update a page to the new Layouts and Components, you would need to remove all Legacy Components and save the page as a draft, re-editing the page will now show all the new components.

If you require assistance in converting a page, please submit a request using the Drupal Support form.

Page Templates

Page Templates are pre-built pages containing predefined layouts and components. They provide a starting point for creating a page without having to build its structure from scratch.

When you create a page from a template, the template’s layouts, components and content are copied to your new page. You can then edit, add or remove content and components as required without affecting the original template.

Creating a Page from a Page Template

1. From the Dashboard, select Add Page.
2. Click Create from template.
3. Browse the available templates. Use the Preview link to view a template before selecting it.
4. Click Use this template to create your page from the selected template.
5. Edit the page content, layouts and components as required.
6. Save the page when you have finished making your changes.

Adding a Page Template

If you have created a page that you think would be useful as a page template, please submit a request using the Drupal Support form to have it considered for addition to Page Templates.

Layout Components

The Layout Component is used to organise other components into columns on a page. It controls the structure and visual presentation of a section, with options for column layouts, background colours and images, and full-width display.

Add a Layout Component

1. Scroll to the Layout Components section
    

   

2. Click Add Section
3. Select the required layout from the modal that appears.

Each layout grid contains:

• A preceding 1|1 full-width row.
• Your selected column layout, such as 1|1, ½|½ or ¾|¼.
• A following 1|1 full-width row.

The following settings are available on a Section:

• Layout options: Adds an administrative label to help identify the section.
• Background colour: Sets the background colour and its opacity for the section.
• Full width: Controls whether the section spans the standard content area or the full-page container.
• Background image: Adds an image behind the section’s content.
• Custom Column Classes: Provides advanced control over individual columns. We recommend that this setting only be used by advanced users.
• Wrapper classes:
• Hide Paragraph: Hides the Layout Component and all components contained within it from the live page.

Layout Component controls

Hover over an existing Layout Component to access its controls:

• Drag handle / Up and Down arrows: Move the section above or below another Layout Component.
• Pencil: Edit the section’s settings, including its background and visibility.
• Duplicate: Creates a copy of the section and all components within it.
• Delete: Removes the section and all components within it. This cannot be undone.

Hovering over a Layout Component also displays Add Section controls above and below it, allowing you to insert a new section in the required position.

Add a Component to a Column

The Layout Component displays an outline of the available columns.

1. Hover over the column where you want to add the component.
2. Click the Plus (+)

3. Select the component you want to add.
    

   

Component Updates

General changes to Components:

When adding a new component, the settings for the component will open in a modal, instead of directly in the layout section.

When editing a component hovering over the component will bring up the edit toolbar.

The Hide Paragraph toggle is available on individual components, allowing you to hide specific components on the live page. This toggle is also available on components within the legacy Layout Component.

FAQ Content Type

The FAQ Content Type is used to create individual questions and answers that can be displayed using the FAQ Component.

Each FAQ can be categorised using Categories, Tags, and Audience. These fields allow FAQ Components to dynamically select and display relevant FAQs.

Adding an FAQ

1. Add a new FAQ content item.
2. Under the Content tab:
   • Question: Enter the FAQ question.
   • Answer: Enter the answer to the question.
3. Under the Categorization tab:
   • Categories: Select the categories that apply to the FAQ.
   • Tags: Select the relevant tags.
   • Audience: Select the audiences for whom the FAQ is intended.

These fields are used by the FAQ Component when using the Dynamic query type to determine which FAQs should be displayed.

1. Complete the additional settings as required:
   • Review date: Set a date by which the FAQ should be reviewed to ensure that its information is still accurate and up to date.
   • Send to all affiliates: Allows the FAQ to be shared with other sites.

FAQ Component

FAQ Component

The FAQ Component is used to display content created using the FAQ content type.

FAQs can be displayed as a standard list or as an accordion. You can either manually select the FAQs to display or dynamically display FAQs based on their Tag, Audience, and Category fields.

Adding an FAQ Component

1. From the component list, select FAQ.
2. Choose an FAQ Query Type:

Selection

• Begin typing an FAQ title. The field will automatically search for matching FAQs.
• Use Add to include additional FAQs or Remove to remove existing selections.
• Drag the selected FAQs to change the order in which they are displayed.

Dynamic

• Select terms in the FAQ Tag, FAQ Audience, and FAQ Categories
• Only FAQs matching the selected criteria across all three fields will be displayed.

1. Choose an FAQ Display:

Default

• Displays each FAQ question followed by its answer.

Accordion

• Displays the FAQ questions as an accordion. Users can expand each question to view its answer.

Component Library

The Component Library provides reusable, pre-populated components that can be added to a page. These components allow commonly used content and settings to be reused without having to recreate them each time.

By default, a component added from the library remains linked to the reusable component. If you need to customise it for a particular page, you can select Unlink from library. This creates an editable version of the component that can be changed independently.

Adding a Component from the Library

1. When adding a component, select From library.
2. Click Select Reusable Component.
3. Find the component you want to use by:
4. Filtering by Label; or
5. Filtering by Component type.
6. Select the checkbox next to the component you want to add.
7. Click Select Reusable Component to add it to the page.
8. Save the page when you have finished making your changes.

Unlinking a Component from the Library

If you need to customise the component, select Unlink from library. Once unlinked, the component’s settings and content can be edited independently.

You can unlink the component when you first add it or at a later stage by hovering over the component, clicking the Pencil icon and selecting Unlink from library.

Adding a Component to the Library

If you have created a component that you think would be useful as a reusable component, please submit a request using the Drupal Support form to have it considered for addition to the Component Library.

Using an article as a carousel slide

An Article can also be used as a slide in a carousel. It can be displayed as a standalone slide containing a title, image and short description, or it can link to other content, such as a website, webpage or media item.

To create a carousel slide:

1. Create an Article as normal. You do not need to add any body copy.
2. Add the text you want displayed on the slide to the Summary field.
3. Add the image you want to display on the slide.
4. On the Title and setup tab:
   • For a standalone slide with no link, check Override default CTA link.
   • To link the slide to other content, leave Override default CTA link unchecked and use the CTA URL field to enter a URL or reference another node.
5. For either option, check Exclude from automatic feeds. This prevents the carousel slide from appearing in places where Articles are automatically listed.
6. Save the Article.

The Article can now be selected for use within a carousel.