Website Instructions

Website Overview

Introduction to Website Instructions

Your Website is built on Finalsite’s Composer Content Management System (CMS).

The following page provides instructions for Composer website administrators on how to update the custom features in this website. This refers to features that have been specifically created for this design and are therefore not covered by other Composer training resources.

These instructions assume a basic knowledge of Composer CMS and its key concepts (such as editing and publishing a page). If you are new to Composer, we recommend starting with the following training resources:

Resource	Description
Finalsite Training	Composer CMS training courses, webinars & live events
Finalsite Support	Composer CMS knowledge base, announcements & downloads

Normal Workflow for Adding Content

The following main steps are required to add new content to a normal interior page on your website:

Login to Composer.
Click on the ‘Composer’ tab in Composer’s left navigation.
Go to the Pages panel.
Create a new page or select an existing page you want to update.
Turn on the ‘Compose’ toggle in the bar at the bottom-left of the page interface.
Refresh the page in your web browser.
Hover over the part of the page you want to add content to and click ‘Add Element’.
Choose an element from the ‘Add Element’ window.
Populate the new element with content and save your updates.
Click on the ‘Publish’ button in the bar at the bottom of the page interface.

This workflow is required for the administration of many of the custom features in your website and we recommend familiarizing yourself with this process.

Important: After turning on the 'Compose' toggle, always refresh the page in your browser before you start making updates. This will clear out any special functionality running on the draft preview of the page and will give you a better experience editing the content.

Content Editor Styles

The following styling options are available in Composer’s content editor to apply special formatting to certain types of content on interior pages as well as some specific treatments on the homepage. Each style is described below with instructions on how to apply it:

Name	Description
citation	Special formatting for the optional citation below a block quote. This is applied by highlighting the desired text and choosing the style from the ‘Styles’ dropdown.
button-1	Small button with a transparent background and a thin border in the website’s main color. This is applied by adding a link and choosing the style from the ‘Class’ dropdown in the ‘Link’ properties window.
button-2	Small button with a transparent background and a thin border in the website’s accent color. This is applied by adding a link and choosing the style from the ‘Class’ dropdown in the ‘Link’ properties window.
button-3	Small button with a transparent background and a thick bottom border in the website’s accent color. This is applied by adding a link and choosing the style from the ‘Class’ dropdown in the ‘Link’ properties window.
button-4	Small button with white text and the website's primary color in the background. This is applied by adding a link and choosing the style from the ‘Class’ dropdown in the ‘Link’ properties window.
button-download	Small button with a download icon, a light gray background and a thick gray border. This is applied by adding a link and choosing the style from the ‘Class’ dropdown in the ‘Link’ properties window.
button-link	Small button with a link icon, a light gray background and a thick gray border. This is applied by adding a link and choosing the style from the ‘Class’ dropdown in the ‘Link’ properties window.
button-large	Large button with the website’s primary color in the background and optional subtext. This is applied by adding a link and choosing the style from the ‘Class’ dropdown in the ‘Link’ properties window.
button-arrow	Small text link in uppercase letters with an arrow icon in the website’s primary color. This is applied by adding a link and choosing the style from the ‘Class’ dropdown in the ‘Link’ properties window.
button-on-dark-1	Small button with a transparent background and white text with a thing white border for use in dark callout boxes. This is applied by adding a link and choosing the style from the ‘Class’ dropdown in the ‘Link’ properties window.
button-on-dark-2	Small button with a white background for use in dark callout boxes. This is applied by adding a link and choosing the style from the ‘Class’ dropdown in the ‘Link’ properties window.
button-on-dark-3	Small button with white text and a darker shadw of the website's primary color in the background for use in dark callout boxes. This is applied by adding a link and choosing the style from the ‘Class’ dropdown in the ‘Link’ properties window.
button-arrow-on-dark	Small text link in uppercase letters with an arrow icon in white for use in dark callout boxes. This is applied by adding a link and choosing the style from the ‘Class’ dropdown in the ‘Link’ properties window.
button-expand	This style can be added as an additional style to the following buttons to display them at full-width within the available space: button-1 button-2 button-3 button-4 button-large The style can be applied when formatting a button by adding ‘button-expand’ as a second class within the ‘Class’ dropdown in the ‘Link’ properties window.
text-callout	Large text with a left border in the website’s accent color to highlight important text statements and excerpts. This is applied by highlighting the desired text and choosing the style from the ‘Styles’ dropdown.
lead-in	Large text for the first paragraph on the page. This is applied by highlighting the desired text and choosing the style from the ‘Styles’ dropdown.
table-styled	Special formatting to display tables with a clear and visually-engaging presentation. This is applied by adding a table and choosing ‘table-styled’ from the ‘Class’ dropdown in the ‘Table Properties’ window.

Please refer to the ‘Homepage Panels’ and ‘Interior Pages & Content Formatting' sections within these instructions for full guidance on where and how to apply these styles.

Element Custom Classes

The following custom classes can be added within the settings of certain Composer elements in order to display them with a special visual presentation on interior pages:

Name	Description
button-dark	Displays a Content Element with a dark background. This is used to demonstrate the set of ‘button-on-dark’ button style on the website Style Guide and is not recommended for use on real pages.
callout-box-dark	Displays a Content Element as a callout box with white text and the website’s main color in the background.
callout-box-light	Displays a Content Element as a callout box with a light gray background and a thick bottom border.
color-1	This can be added as an additional custom class to a Content Element with the ‘callout-box-light’ applied to display the thick border along the bottom of a light callout box in the website’s main color. An empty space must be added between the two custom classes to achieve this formatting (for example: ‘content-box-light color-1’).
color-2	This can be added as an additional custom class to a Content Element with the ‘callout-box-light’ applied to display the thick border along the bottom of a light callout box in the website’s accent color. An empty space must be added between the two custom classes to achieve this formatting (for example: ‘content-box-light color-1’).
hero	Displays a Resource element showing a single image as a full-width hero between the header and the main content area.
nav-sub	Displays a Navigation element in a left or right sidebar with special formatting for linking to pages in the current section.

Important: Many elements on the homepage and within the header and footer banners also have custom classes added to their settings. These classes are required for the features to display with the correct presentation and should not be removed or updated. Please also note these classes have not been built for use on any other pages or panels.

Image & Video Best Practices

The following best practices are recommended when preparing images and videos to achieve the best balance of visual impact, visitor engagement and loading speed:

Images

Resize your images to match the pixel dimensions outlined in each section of these instructions to achieve the best balance of visual quality and loading speed.
Keep the focal point of each image in the center. This safeguards against any automatic cropping of the image that may occur on custom features at certain screen widths to fit within the responsive layout.
Save all images at 72ppi (pixels per inch) with an RGB color profile.
Upload photos and detailed illustrations in the .jpeg file format.
Upload simple logos and vector graphics as .svg, .png, .gif or .jpeg files.
Add descriptive alt text to images to make them accessibility compliant.
Only display a small number of images within slideshows. Please note that slideshows on the homepage have an automatic limit of 20 images.

Videos

Resize your videos to match the pixel dimensions outlined in each section of these instructions to achieve the best balance of visual quality and loading speed.
Use video sparingly to emphasise a key message or show something special
The more you are concerned about load time, the smaller your video files should be.
Add captions to videos with audio information to make them accessibility compliant.
Remove audio tracks from videos without sound to further reduce their file size.
Keep the length of autoplay videos short. Please note that autoplay videos on the homepage are automatically limited to 30 seconds in length.
The recommended file settings for a hero video are:

Property	Recommended Setting
Video Size	1080p (1920px by 1080px)
Video bitrate	2500 Kbps
Frame Rate	30fps or 24fps
Key Frames	None
Duration	20 - 30 seconds
Audio	None
Format	MP4

Tip: For the majority of images and videos, you do not need to lower the quality of the files before you upload them to Composer. The Resources module will automatically compress the files and serve the best version to match the visitor’s screen size or device.

For very large files, however (such as ultra high-resolution photos or 4K videos), these may still be too large to download reliably even after Resources has compressed them. In these instances, please use compression software to reduce the size of the files before you upload them. Some popular free tools to help you do this include Compressor.io for images and Handbrake.fr for videos.

Header 1

Header Overview

Your website has been deployed with one default header that can be used across all the pages in your website. This is constructed using the following two page banners, which are applied in the Page Layout & Appearance settings for each page:

Header Banner

Name	Description
TB Header 1	The header banner displays at the top of the page and consists of the following features: District navigation bar (if you have chosen to enable this feature during the intake phase of your website deployment). Logo, school name & optional tagline. Header utility links, with the flexibility to display additional links in a dropdown menu under each item. Call to action button. ‘Menu’ icon button that opens a slide-out main menu. Please note that on narrower devices, some of these features above may be hidden to optimize the available space and will display in the menu banner instead.

Name

Description

TB Header 1

The header banner displays at the top of the page and consists of the following features:

District navigation bar (if you have chosen to enable this feature during the intake phase of your website deployment).
Logo, school name & optional tagline.
Header utility links, with the flexibility to display additional links in a dropdown menu under each item.
Call to action button.
‘Menu’ icon button that opens a slide-out main menu.

Please note that on narrower devices, some of these features above may be hidden to optimize the available space and will display in the menu banner instead.

Menu Banner

Name	Description
TB Mobile Menu 1	The menu banner displays as a slide-out panel when the visitor clicks on the ‘Menu’ button in the header. It consists of the following features: Website search tool. Main menu displaying all page levels, with subpages nested inside accordion panels. Call to action button (on narrower devices). Header utility links (on narrower devices) with the flexibility to display additional links in accordion panels under each item.

Name

Description

TB Mobile Menu 1

The menu banner displays as a slide-out panel when the visitor clicks on the ‘Menu’ button in the header. It consists of the following features:

Website search tool.
Main menu displaying all page levels, with subpages nested inside accordion panels.
Call to action button (on narrower devices).
Header utility links (on narrower devices) with the flexibility to display additional links in accordion panels under each item.

Header Image Sizes

The following pixel dimensions are recommended for the images uploaded to the Resources module for use in the header. Following these guidelines will help you to achieve an ideal balance of visual quality and loading speed for your content:

Image Area	Width (pixels)	Height (pixels)
Logo image*	512	No min or max

* The header logo is set to display with a maximum height of 60px to ensure a succinct presentation. If the height of the uploaded image exceeds this, the logo will be scaled down automatically to fit in the space available, without becoming squashed or stretched.

Add the Default Header to a Page

To add the default header to a page:

Go to the ’Pages’ panel and select the desired page.
Click the ‘Compose’ toggle in the bar at the bottom of the page interface.
Refresh the page in your web browser.
Click on the ‘Page Layout & Appearance’ icon button to the right of the ‘Compose’ toggle.
Set the ‘Header’ dropdown to ‘TB Header 1’ in the ‘Page Layout and Appearance’ window.
Set the ‘Menu’ dropdown to ‘TB Mobile Menu 1’.
Click on the ‘Save’ button at the bottom of the ‘Page Layout & Appearance’ window.

Update the District Navigation Bar

The district navigation bar is an optional feature that runs along the top of the header. It is designed for school districts and other groups of schools to link to the different websites in their organization. The district navigation bar also supports the display of a language translation tool and a set of social media links.

Note: Once the buildout of your website has started, this feature cannot be added or removed. If you chose to enable the district navigation during the intake phase of your website deployment, please refer to the instructions in this section for how to update it.

Add a Social Media Link

A set of social media icon buttons display on the left of the district navigation bar. These are designed to link your district’s most important external social media pages.

The links are powered by a single Navigation element that displays pages from the ‘Social Media Links’ branch in the ‘Pages’ panel. Each page in this branch represents a different icon button and can be set to redirect to a social media page of your choosing.

To add a social media link:

Go to the ’Pages’ panel.
Select the ‘Social Media Links’ branch.
Click on the three-dot icon and select ‘New Page’ from the Action menu.
Click on the ‘Linked’ tab in the ‘New Page’ window.
Click into the ‘Page Name’ field and replace ‘New Page’ with the title of the social platform you want to link to (for example ‘Facebook’).
Check the ‘Linked Page’ checkbox.
Select the ‘External Redirect’ tab and type the full social media page URL into the ‘Redirect to this page’ field (for example, https://www.facebook.com/yourschool).
Check the ‘Open in a new Window’ checkbox. This is a recommended best practice when linking to external websites.
Click on the ‘Save’ button at the bottom of the ‘New Page’ window.
Return to the ‘Social Media Links’ branch in the ’Pages’ panel and drag and drop the new page into the desired position among the other links.
Click on the ‘Publish’ button at the bottom-right of the page interface.

Once the page has been published, the new social media link will display in the district navigation bar automatically. The icon on show is generated based on the URL of the external page redirect.

Tip: Only display your most important social media links in the district navigation bar. We recommend adding a maximum of 6 links to ensure they display effectively and engage the visitor. If you would like to add further social media links, consider creating a dedicated page to promote these with links to each profile in the main content area.

Update the ‘District Home’ Website Link

A link to the homepage of the district website displays on the right of the district navigation bar.

To update the ‘District Home’ website link:

Go to the ‘Pages’ panel.
Open the ‘District - 2021’ branch and select the ‘District Home’ page.
Click on the ‘gear’ icon in the bar at the bottom-right of the page interface.
Optionally click into the ‘Page Name’ field in the ‘Page Settings’ window and update the title of the ‘District Home’ link.
Click on the ‘Linked’ tab at the top of the ‘Page Settings’ window.
Check the ‘Linked Page’ checkbox.
Select the ‘Internal Redirect’ tab and click the ‘Select Page’ button.
Select the district website’s homepage in the ‘Page Picker’ window.
Click on the ‘Save’ button at the bottom of the ‘Page Settings’ window.
Click the ‘Publish’ button at the bottom-right of the page interface.

Add a Website Link to the ‘Schools’ Slide-out Panel

The ‘Schools’ link on the right of the district navigation bar opens a slide-out panel on click that displays a link to each website in your district or group of schools.

To add a new website link to the ‘Schools’ slide-out panel:

Go to the ’Pages’ panel.
Open the ‘District - 2021’ branch and hover over the ‘Schools’ page.
Click on the three-dot icon and select ‘New Page’ from the Action menu.
Click on the ‘Linked’ tab at the top of the ‘New Page’ window.
Click into the ‘Page Name’ field and replace ‘New Page’ with the school name.
Check the ‘Linked Page’ checkbox.
Select the ‘Internal Redirect’ tab and click on the ‘Select Page’ button.
Select the desired school website homepage in the ‘Page Picker’ window.
Click the ‘Save’ button at the bottom of the ‘New Page’ window.
Return to the ‘District - 2021’ branch in the ’Pages’ panel and drag and drop the new page into the desired position under the ‘Schools’ page.
Click the ‘Publish’ button at the bottom-right of the page interface.

Once the page has been published, the new school website link will display in the ‘Schools’ slide-out panel automatically.

Organize Website Links into Groups Within the ‘Schools’ Slide-out Panel

You can optionally choose to organize the website links in the ‘Schools’ slide-out panel into groups of links that display as accordion panels. This is recommended if you have a large number of schools and they can be grouped into different categories.

To organize a set of website links into a group within the ‘Schools’ slide-out panel, begin by creating a parent page for the group:

Go to the ’Pages’ panel.
Open the ‘District - 2021’ branch and hover over the ‘Schools’ page.
Click on the three-dot icon and select ‘New Page’ from the Action menu.
Click on the ‘Linked’ tab at the top of the ‘New Page’ window.
Click into the ‘Page Name’ field and replace ‘New Page’ with a short title for the group (for example, ‘Elementary Schools’).
Select the ‘Internal Redirect’ tab and click the ‘Select Page’ button.
Select a page in the ‘Page Picker’ window for the group parent page to link to.
Click on the ‘Save’ button at the bottom of the ‘New Page’ window.
Click the ‘Publish’ button at the bottom-right of the page interface.

With the group’s parent page created, set one or more website links as child pages to add them to the group:

Return to the ‘District - 2021’ branch in the ’Pages’ panel.
Click on the ‘Schools’ page to view the existing school website links.
Hover over the first website link you want to move into the new group.
Click on the three-dot icon and select ‘Move to a new parent’ from the Action menu.
Select the group parent page you created previously in the ‘Choose a new parent page’ window.
Optionally repeat steps 1 to 4 to move additional website links into the group.

Once these steps have been completed, the new group of links will display in the ‘Schools’ slide-out panel automatically.

Update the Logo, School Name & Optional Tagline

The logo, school name and optional tagline in the header are powered by two Location elements in the default header banner. The content they display is powered by the location information added to the Locations module.

To update these elements, please follow each set of steps below in the order presented:

Configure the Elements on Display

You may optionally choose to show or hide each element of the logo area within the header, including the logo image, school name and optional tagline. To configure the set of elements on display:

Go to the ‘Banners’ panel.
Scroll to ‘Headers’ in the left navigation and select ‘TB Header 1’.
To show or hide the logo image:
1. Scroll to the section displaying the logo image in the main banner interface.
2. Hover over the Location element displaying the logo image and click on the ‘gear’ icon in the top-right corner.
3. Click on ‘+ Content Details’ within the ‘Single’ tab in the ‘Edit Location Element Settings’ window.
4. Check or uncheck the ‘Show Image’ field to show or hide the logo image.
5. Click on the ‘Save’ button at the bottom of the ‘Edit Location Element Settings’ window.
To show or hide the school name and/or optional tagline:
1. Scroll to the section displaying the school name and optional tagline in the header banner.
2. Hover over the Location element displaying the school name and optional tagline and click on the ‘gear’ icon in the top-right corner.
3. Click on ‘+ Content Details’ within the ‘Single’ tab in the ‘Edit Location Element Settings’ window.
4. Check or uncheck the ‘Location Name’ field to show or hide the school name.
5. Check or uncheck the ‘Motto/Subtitle’ fields to show or hide the optional tagline.
6. Click on the ‘Save’ button at the bottom of the ‘Edit Location Element Settings’ window.
Click the ‘Publish’ button at the bottom-right of the banner interface.

Once the banner has been published, the updated configuration for the logo area in the header will display automatically.

Update the Logo Image

If you have chosen to display the logo image in the header, you can update the image on show in one of two ways:

Replacing the existing logo image using the ‘Replace Resource’ tool in the Resources module
Upload a new image and set this to display in the Locations module.

Note: Using the ‘Replace Resource’ tool to replace the existing logo image will automatically update every instance of that image across the website.

To replace the existing logo image:

Click on the ‘folder’ icon button in Composer’s left navigation to access the Resources module.
Click on the ‘Resources’ tab.
Find and select the current logo image. This will open a new panel on the right of the Resources interface displaying the properties of the file.
Click on the ‘Replace Resource’ icon button, which is located in the row of buttons at the top properties panel below the preview thumbnail.
Choose from the options available to upload a new logo image.
Once the upload is complete, update the following image properties in the resource’s properties panel to reflect the new image:
1. Click into the ‘Title’ field and add a short title for the image. This is for internal use and will not display in the header.
2. Click into the ‘Alt Text’ field and add a short description of the image. This is used to describe the image in situations where the visitor cannot see it and is highly recommended to improve its accessibility.

To upload a new logo image:

Click on the ‘folder’ icon button in Composer’s left navigation to access the Resources module.
Click on the ‘Resources’ tab.
Create or select an existing folder for your logo within the ‘Public’ directory.
Click on the ‘Add Public Resource’ button at the top right of the Resources interface.
Choose from the options available to upload the new logo image.
Once the upload is complete, update the following image properties in the ‘Add Public Resource’ window:
- Click into the ‘Title’ field and add a short title for the image. This is for internal use and will not display in the header.
- Click into the ‘Alt Text’ field and add a short description of the image. This is used to describe the image in situations where the visitor cannot see it and is highly recommended to improve its accessibility.
Click on the ‘Save’ button at the bottom of the ‘Add Public Resource’ window.

Image Size: The recommended width for the school logo in the header is 512px. There is no minimum or maximum height requirement.

Note: The header logo is set to display with a maximum height of 60px to ensure a succinct presentation. If the height of the uploaded image exceeds this, the logo will be scaled down automatically to fit in the space available, without becoming squashed or stretched.

To set the new logo image to display within the header:

Hover over the ‘Modules’ tab in Composer’s left navigation and select Locations.
Click on the ‘Locations’ tab.
Select the location profile displaying the logo image you want to update.
Scroll to the ‘Logo’ field and click on the ‘Browse’ button.
Select the logo image you have uploaded previously in the ‘Pick a Resource’ window.
Click the ‘Update’ button at the bottom-right of the Locations interface.

After clicking the ‘Update’ button, the updated logo image will display in the default header automatically.

Update the School Name and/or Optional Tagline

To update the school name and/or optional tagline:

Click on the ‘Modules’ tab in Composer’s left navigation and select Locations.
Click on the ‘Locations’ tab.
Select the location profile displaying the school name and/or optional tagline you want to update.
Click into the ‘Location name’ field at the top of the location interface and update the text to change the school name. If this field is left empty, the school name will not display in the header.
Click into the ‘Motto/Subtitle’ field and update the text to change the optional school tagline. If this field is left empty, the school tagline will not display in the header.
Click the ‘Update’ button at the bottom-right of the Locations interface.

After clicking the ‘Update’ button, the updated school name and/or optional tagline will display in the default header automatically.

Add a Header Utility Link

A set of header utility links display on the right of the default header. These links provide quick access to popular web pages and resources on the website. Some common examples include:

Secure online portals for current students and staff
Call to actions for prospective families (such as ‘Inquire’, ‘Visit’ and ‘Apply')
Microsite links for other audiences (such as ‘Alumni’, ‘Giving’ or ‘Summer Camps’)

The header utility links are powered by a Navigation element displaying pages from the ‘Header Utility’ branch in the ‘Pages’ panel. Each page in this branch represents a different utility link and can be set to redirect to a page of your choosing.

To add a new header utility link:

Go to the ’Pages’ panel.
Hover over the ‘Header Utility’ branch.
Click on the three-dot icon and select ‘New Page’ from the Action menu.
Click on the ‘Linked’ tab in the ‘New Page’ window.
Click into the ‘Page Name’ field and replace ‘New Page’ with a short title for the new utility link.
Check the ‘Linked Page’ checkbox.
Setup a redirect to the desired webpage:

If the linked page is part of your website, select ‘Internal Redirect’ and click the ‘Select Page’ button to choose the page.
If the page is external to your website, select ‘External Redirect’ and type the full URL of the page into the ‘Redirect to this page’ field.

If the link redirects to an external webpage, check the ‘Open in a new Window’ checkbox. This is a recommended best practice when linking to external websites.
Click on the ‘Save’ button at the bottom of the ‘New Page’ window to create the page.
Return to the ‘Header Utility’ branch in the ’Pages’ panel and drag and drop the new page into its desired position among the other links.
Click the ‘Publish’ button at the bottom-right of the page interface.

Once the page has been published, the new header utility link will display in the default header automatically.

Tip: You can optionally add additional links as child pages to each of the header utility links. Once published, these subpages will display within a dropdown menu when the visitor hovers over the parent utility link.

Format a Header Utility Link as a Call to Action Button

An eye-catching button style can optionally be applied to one or more of the header utility links in the default header.

This formatting option is designed for use with call to action links that guide visitors towards the most important next steps on their journey. Some popular examples of call to action buttons for prospective families include ‘Inquire’, ‘Visit’ and ‘Apply'.

To format a header utility link as a call to action button:

Go to the ’Pages’ panel.
Open the ‘Header Utility’ branch.
Select the page in this branch that you want to format as a call to action button
Click on the ‘gear’ icon in the bar at the bottom-right of the page interface.
Click into the ‘Custom Nav Class’ field near the bottom of the ‘Page Settings’ window.
Type in the custom class ‘button-style’.
Click on the ‘Save’ button at the bottom of the ‘New Page’ window to create the page.
Return to the ’Pages’ panel and drag and drop the new page into its desired position among the other subpages.
Click the ‘Publish’ button at the bottom-right of the page interface.

Once the page has been published, the updated header utility link will display as a call to action button automatically.

Tip: For consistency with the original design, drag and drop any pages with the call to action button formatting applied to the bottom of the ‘Header Utility’ branch in the ’Pages’ panel. This will ensure they display with a well-balanced visual presentation to the right of the header utility links in the default header.

Add a subpage to the Mega Menu

The top level of pages in your main menu can only be added or removed during the intake phase of your website deployment. Once your sitemap has been signed-off and the buildout of your website has started, these pages should not be changed to ensure they display effectively within the header.

Whilst this is the case, you do have full flexibility to add, remove and reorganize subpages under each main menu section.

To add a subpage to a main menu section:

Go to the ’Pages’ panel.
Hover over the parent page in the main menu that you want to add a subpage to.
Click on the three-dot icon and select ‘New Page’ from the Action menu.
Click into the ‘Page Name’ field in the ‘New Page’ window and replace ‘New Page’ with the new page name.
Click the ‘Save’ button at the bottom of the ‘New Page’ window.
Drag and drop the page into the desired position within the chosen section.
Populate the page with the required content.
Click the ‘Publish’ button at the bottom-right of the page interface.

Once the new page has been published it will display within the updated main menu section automatically.

Tip: There are no technical restrictions on how many subpages you can add to a main menu section, but we recommend keeping the number as small as possible (relative to the needs of your content) to make the menu system feel as easy to navigate as possible.

Footer 7

Default Footer Overview

Your website has been deployed with one default footer for use on all pages in your website. This is configured using a footer banner, which is applied in the Page Layout & Appearance settings for each page:

Name	Description
TB Footer 7	The Footer banner displays at the bottom of the page and consists of the following features: Logo & School name School contact details Social media icon links ‘Links & Resources’ quick links ‘Parents & Students’ quick links ‘Faculty & Staff’ quick links Text statement A row of accreditation logos Footer utility links

Name

Description

TB Footer 7

The Footer banner displays at the bottom of the page and consists of the following features:

Logo & School name
School contact details
Social media icon links
‘Links & Resources’ quick links
‘Parents & Students’ quick links
‘Faculty & Staff’ quick links
Text statement
A row of accreditation logos
Footer utility links

Footer Image Sizes

The following pixel dimensions are recommended for the images uploaded to the Resources module for use in the footer. Following these guidelines will help you to achieve an ideal balance of visual quality and loading speed for your content:

Image Area	Width (pixels)	Height (pixels)
School Logo*	512	No min or max
Accreditation Logos	256	No min or max

* The footer logo is set to display with a maximum height of 60px to ensure a succinct presentation. If the height of the uploaded image exceeds this, the logo will be scaled down automatically to fit in the space available, without becoming squashed or stretched.

Apply the Default Footer to a Page

To apply the default footer to a specific page:

Go to the ’Pages’ panel and select the desired page.
Click the ‘Compose’ toggle in the bar at the bottom of the page interface.
Refresh the page in your web browser.
Click on the ‘Page Layout & Appearance’ icon button to the right of the ‘Compose’ toggle.
Set the ‘Footer’ dropdown to ‘TB Footer 7’.
Check that the ‘Theme’ dropdown is set to ‘FS Theme Builder’.
Click on the ‘Save’ button in the ‘Page Layout & Appearance’ window.

Note: The default footer is compatible with all page layout options in the ‘Page Layout & Appearance’ window. Please refer to the ‘Interior Page’ section within these instructions for full guidance on where and how to set up the default interior page layout.

Update the Logo & School Name

The logo and school name in the default footer are powered by two Location elements, with the content they display feeding in from location information added to the Locations module.

Important: The ‘Location Name’ field in the Locations module powers the school name in both the footer and the header. Please check that any updates to this field display effectively in both panels.

Configure the Elements on Display

You can optionally show or hide the logo image or school name within the footer. To configure the set of elements on display:

Go to the ‘Banners’ panel.
Scroll to ‘Footers’ in the left navigation and select ‘TB Footer 7’.
To show or hide the logo image:
1. Scroll to the section displaying the logo image in the main banner interface.
2. Hover over the Location element displaying the logo image and click on the ‘gear’ icon in the top-right corner.
3. Click on ‘+ Content Details’ within the ‘Single’ tab in the ‘Edit Location Element Settings’ window.
4. Check or uncheck the ‘Show Image’ field to show or hide the logo image.
5. Click on the ‘Save’ button at the bottom of the ‘Edit Location Element Settings’ window.
To show or hide the school name :
1. Scroll to the section displaying the school name in the main banner interface.
2. Hover over the Location element displaying the school name and click on the ‘gear’ icon in the top-right corner.
3. Click on ‘+ Content Details’ within the ‘Single’ tab in the ‘Edit Location Element Settings’ window.
4. Check or uncheck the ‘Location Name’ field to show or hide the school name.
5. Click on the ‘Save’ button at the bottom of the ‘Edit Location Element Settings’ window.
Click the ‘Publish’ button at the bottom-right of the banner interface.

Once the banner has been published, the updated configuration will display in the footer automatically.

Update the Logo Image

If you have chosen to display the logo image in the footer, you can update the image on show in one of two ways:

Replacing the existing logo image using the ‘Replace Resource’ tool in the Resources module
Upload a new image and set this to display in the Locations module.

Note: Using the ‘Replace Resource’ tool to replace the existing logo image will automatically update every instance of that image across the website.

To replace the existing logo image:

Click on the ‘folder’ icon button in Composer’s left navigation to access the Resources module.
Click on the ‘Resources’ tab.
Find and select the current logo image. This will open a new panel on the right of the Resources interface displaying the properties of the file.
Click on the ‘Replace Resource’ icon button, which is located in the row of buttons at the top properties panel below the preview thumbnail.
Choose from the options available to upload a new logo image.
Once the upload is complete, update the following image properties in the resource’s properties panel to reflect the new image:
1. Click into the ‘Title’ field and add a short title for the image. This is for internal use and will not display in the header.
2. Click into the ‘Alt Text’ field and add a short description of the image. This is used to describe the image in situations where the visitor cannot see it and is highly recommended to improve its accessibility.

To upload a new logo image:

Click on the ‘folder’ icon button in Composer’s left navigation to access the Resources module.
Click on the ‘Resources’ tab.
Create or select an existing folder for your logo within the ‘Public’ directory.
Click on the ‘Add Public Resource’ button at the top right of the Resources interface.
Choose from the options available to upload the new logo image.
Once the upload is complete, update the following image properties in the ‘Add Public Resource’ window:
1. Click into the ‘Title’ field and add a short title for the image. This is for internal use and will not display in the header.
2. Click into the ‘Alt Text’ field and add a short description of the image. This is used to describe the image in situations where the visitor cannot see it and is highly recommended to improve its accessibility.
Click on the ‘Save’ button at the bottom of the ‘Add Public Resource’ window.

Adjusting the height of the Logo Image

Note: The footer logo is set to display with a maximum height of 40px by default. If the height needs to be adjusted, a custom class can be added to this Location Element.

Adding a custom class to increase or decrease the height of the logo:

Click on the pink gear icon to access the Location Element settings
Expand the Design tab
In the Custom Class field, one of the following classes can be added:
1. height-xsmall (this is also the default height of 40px)
2. height-small (this increases the height to 60px)
3. height-medium (this increases the height to 80px)
4. height-large (this increases the height to 100px)
5. height-xlarge (this increases the height to 120px)

Adding a white background to the Logo Image

If your image needs to display against a solid color background and you don't have access to edit your logo with image editing software, you can add a white background to your image by adding a custom class to this Location Element.

Click on the pink gear icon to access the Location Element settings
Expand the Design tab
In the Custom Class field, add logo-bg

This can be used along with the custom classes for height, separated by a space. For example:
Custom Class: logo image height-medium logo-bg

Note: The footer logo is set to display with a maximum height of 60px to ensure a succinct presentation. If the height of the uploaded image exceeds this, the logo will be scaled down automatically to fit in the space available, without becoming squashed or stretched.

To set the new logo image to display within the footer:

Hover over the ‘Modules’ tab in Composer’s left navigation and select Locations.
Click on the ‘Locations’ tab.
Select the location profile displaying the logo image you want to update.
Scroll to the ‘Thumbnail’ field and click on the ‘Browse’ button.
Select the logo image you have uploaded previously in the ‘Pick a Resource’ window.
Click the ‘Update’ button at the bottom-right of the Locations interface.

After clicking the ‘Update’ button, the updated logo image will display in the default footer automatically.

Update the School Name

To update the school name:

Click on the ‘Modules’ tab in Composer’s left navigation and select Locations.
Click on the ‘Locations’ tab.
Select the location profile displaying the school name and/or optional tagline you want to update.
Click into the ‘Location name’ field at the top of the location interface and update the text to change the school name. If this field is left empty, the school name will not display in the header or footer.
Click the ‘Update’ button at the bottom-right of the Locations interface.

After clicking the ‘Update’ button, the updated school name will display in the default footer automatically.

Update the Contact Details

By default, the contact details on display in the footer include the postal address (excluding country), phone number and email address. These details are powered by a single Location element, which can optionally be configured to show or hide a range of contact fields.

Configure the Set of Contact Details on Display

The following contact details can optionally be set to display in the footer panel:

Address fields
Phone
Fax
Email

To configure the contact details on display:

Go to the ‘Banners’ panel.
Scroll to ‘Footers’ in the left navigation and select ‘TB Footer 7’.
Scroll to the Location element displaying the contact information in the footer banner interface.
Hover over the element and click on the ‘gear’ icon in the top-right corner.
Click on ‘+ Content Details’ within the ‘Single’ tab in the ‘Edit Location Element Settings’ window.
Check or uncheck the desired contact fields to show or hide them.
Click on the ‘Save’ button.
Click the ‘Publish’ button at the bottom-right of the banner interface.

Once published, the chosen set of contact details will display in the footer automatically.

Update the Contact Details in the Locations Module

To update the contact details on display in the footer:

Click on the ‘Modules’ tab in Composer’s left navigation and select Locations.
Click on the ‘Locations’ tab.
Select the location containing the location information you want to update.
Click into one or more of the following fields displaying contact details (based on the specific details showing in your footer) and update the existing information:
- Address 1
- Address 2
- City/town
- State/Province
- Postal Code
- Country
- Phone Number
- Fax Number
- Email
Click the ‘Update’ button at the bottom-right of the Locations interface.

After clicking the ‘Update’ button, the updated contact details will display in the footer of each page automatically.

Update the Social Media Icon Links

The social media icon links in the footer are powered by a Navigation element displaying pages from the ‘Social Media Links’ branch in the ‘Pages’ panel. Each page in this branch represents a different link and can be set to redirect to the social media page of your choice.

Add a New Social Media Icon Link

To add a new social media icon link:

Go to the ’Pages’ panel.
Select the ‘Social Media Links’ branch.
Click on the three-dot icon and select ‘New Page’ from the Action menu.
Click on the ‘Linked’ tab in the ‘New Page’ window.
Click into the ‘Page Name’ field and replace ‘New Page’ with the title of the social platform (for example ‘Facebook’).
Tick the ‘Linked Page’ checkbox.
Select ‘External Redirect’ and type the full social media page URL into the ‘Redirect to this page’ field (for example https://www.facebook.com/yourschool).
Tick the ‘Open in a new Window’ checkbox.
Click the ‘Save’ button in the ‘New Page’ window.
Drag and drop the page into the desired position within the ‘Social Media Links’ branch.
Click the ‘Publish’ button at the bottom-right of the page interface.

Once the page has been published, the new social media icon link will display in the footer automatically. The correct icon for the social media platform is generated based on the URL of the external redirect link.

Tip: Only display your most important social media links in the footer. We recommend adding a maximum of 5 links to ensure they fit in one row (on narrow mobile screens) and make a strong individual impact. If you would like to highlight additional social media links, consider creating a dedicated page on which to promote these.

Remove a Social Media Icon Link

To remove a social media icon link from the footer:

Go to the ’Pages’ panel.
Click on the ‘Social Media Links’ branch to open it.
Hover over the page representing the social media icon link you want to remove.
Click on the three-dot icon and select ‘Delete’ from the Action menu.
Confirm you want to delete the page in the ‘Delete Page’ validation window.

Update the 'Links & Resources' Quick Links

A list of quick links with the title ‘Links & Resources’ displays in the first column of links in the default footer layout. These links provide quick access to the most important pages and resources on your website for prospective families and the wider community.

The links are powered by a single Navigation element displaying pages from the ‘Footer Links’ branch in the ‘Pages’ panel. Each page in this branch represents a different quick link and can be set to redirect to a webpage of your choosing.

Update the Title Displaying Above the Quick Links

To update the title displaying at the top the ‘Links & Resources’ quick links section:

Go to the ‘Banners’ panel.
Scroll to ‘Footers’ in the left navigation and select ‘TB Footer 7’.
Scroll to the ‘Links & Resources’ quick links section.
Hover over the Navigation element displaying the quick links and click on the ‘gear’ icon in the top-right corner.
Click into the ‘Title’ field in the ‘Edit Navigation Element Settings’ window and update the title text.
Click on the ‘Save’ button at the bottom of the ‘Edit Navigation Element Settings’ window.
Click the ‘Publish’ button at the bottom-right of the banner interface.

Once the banner has been published, the new title will display in the footer automatically.

Add a New Quick link

To add a new quick link to the ‘Links & Resources’ quick links section:

Go to the ’Pages’ panel.
Hover over the ‘Footer Links’ branch.
Click on the three-dot icon and select ‘New Page’ from the Action menu.
Click on the ‘Linked’ tab in the ‘New Page’ window.
Click into the ‘Page Name’ field and replace ‘New Page’ with the link title.
Check the ‘Linked Page’ checkbox.
Setup a redirect to the desired webpage:
1. If the page is part of your website, select ‘Internal Redirect’ and click the ‘Select Page’ button to choose the page.
2. If the page is external to your website, select ‘External Redirect’ and type the full URL into the ‘Redirect to this page’ field.
Click the ‘Save’ button in the ‘New Page’ window.
Drag and drop the page into the desired position within the ‘Footer Links’ branch.
Click the ‘Publish’ button at the bottom-right of the page interface.

Once the page has been published, the new quick link will display in the footer automatically.

Remove a Quick Link

To remove a quick link from the ‘Links & Resources’ quick links section:

Go to the ’Pages’ panel.
Click on the ‘Footer Links’ branch to open it.
Hover over the page representing the quick link you want to remove.
Click on the three-dot icon and select ‘Delete’ from the Action menu.
Confirm you want to delete the page in the ‘Delete Page’ validation window.

Update the ‘Parents & Students’ Quick Links

A list of quick links with the title ‘Parents & Students’ displays in the first column of links in the default footer layout. These links provide quick access to the most important pages and resources on your website for current parents and students.

The links are powered by a single Navigation element displaying pages from the ‘Footer Links - Parents/Students’ branch in the ‘Pages’ panel. Each page in this branch represents a different quick link and can be set to redirect to a webpage of your choosing.

Update the Title Displaying Above the Quick Links

To update the title displaying at the top the ‘Parents & Students’ quick links section:

Go to the ‘Banners’ panel.
Scroll to ‘Footers’ in the left navigation and select ‘TB Footer 7’.
Scroll to the ‘Parents & Students’ quick links section.
Hover over the Navigation element displaying the quick links and click on the ‘gear’ icon in the top-right corner.
Click into the ‘Title’ field in the ‘Edit Navigation Element Settings’ window and update the title text.
Click on the ‘Save’ button at the bottom of the ‘Edit Navigation Element Settings’ window.
Click the ‘Publish’ button at the bottom-right of the banner interface.

Once the banner has been published, the new title will display in the footer automatically.

Add a New Quick link

To add a new quick link to the ‘Parents & Students’ quick links section:

Go to the ’Pages’ panel.
Hover over the ‘Footer Links - Parents/Students’ branch.
Click on the three-dot icon and select ‘New Page’ from the Action menu.
Click on the ‘Linked’ tab in the ‘New Page’ window.
Click into the ‘Page Name’ field and replace ‘New Page’ with the link title.
Check the ‘Linked Page’ checkbox.
Setup a redirect to the desired webpage:
1. If the page is part of your website, select ‘Internal Redirect’ and click the ‘Select Page’ button to choose the page.
2. If the page is external to your website, select ‘External Redirect’ and type the full URL into the ‘Redirect to this page’ field.
Click the ‘Save’ button in the ‘New Page’ window.
Drag and drop the page into the desired position within the ‘Footer Links - Parents/Students’ branch.
Click the ‘Publish’ button at the bottom-right of the page interface.

Once the page has been published, the new quick link will display in the footer automatically.

Remove a Quick Link

To remove a quick link from the ‘Parents & Students’ quick links section:

Go to the ’Pages’ panel.
Click on the ‘Footer Links - Parents/Students’ branch to open it.
Hover over the page representing the quick link you want to remove.
Click on the three-dot icon and select ‘Delete’ from the Action menu.
Confirm you want to delete the page in the ‘Delete Page’ validation window.

Update the ‘Faculty & Staff’ Quick Links

A list of quick links with the title ‘Faculty & Staff’ displays in the first column of links in the default footer layout. These links provide quick access to the most important pages and resources on your website for current faculty and staff.

The links are powered by a single Navigation element displaying pages from the ‘Footer Links - Faculty/Staff’ branch in the ‘Pages’ panel. Each page in this branch represents a different quick link and can be set to redirect to a webpage of your choosing.

Update the Title Displaying Above the Quick Links

To update the title displaying at the top the ‘Faculty & Staff’ quick links section:

Go to the ‘Banners’ panel.
Scroll to ‘Footers’ in the left navigation and select ‘TB Footer 7’.
Scroll to the ‘Parents & Students’ quick links section.
Hover over the Navigation element displaying the quick links and click on the ‘gear’ icon in the top-right corner.
Click into the ‘Title’ field in the ‘Edit Navigation Element Settings’ window and update the title text.
Click on the ‘Save’ button at the bottom of the ‘Edit Navigation Element Settings’ window.
Click the ‘Publish’ button at the bottom-right of the banner interface.

Once the banner has been published, the new title will display in the footer automatically.

Add a New Quick link

To add a new quick link to the ‘Faculty & Staff’ quick links section:

Go to the ’Pages’ panel.
Hover over the ‘Footer Links - Faculty/Staff’ branch.
Click on the three-dot icon and select ‘New Page’ from the Action menu.
Click on the ‘Linked’ tab in the ‘New Page’ window.
Click into the ‘Page Name’ field and replace ‘New Page’ with the link title.
Check the ‘Linked Page’ checkbox.
Setup a redirect to the desired webpage:

If the page is part of your website, select ‘Internal Redirect’ and click the ‘Select Page’ button to choose the page.
If the page is external to your website, select ‘External Redirect’ and type the full URL into the ‘Redirect to this page’ field.

Click the ‘Save’ button in the ‘New Page’ window.
Drag and drop the page into the desired position within the ‘Footer Links - Faculty/Staff’ branch.
Click the ‘Publish’ button at the bottom-right of the page interface.

Once the page has been published, the new quick link will display in the footer automatically.

Remove a Quick Link

To remove a quick link from the ‘Faculty & Staff’ quick links section:

Go to the ’Pages’ panel.
Click on the ‘Footer Links - Faculty/Staff’ branch to open it.
Hover over the page representing the quick link you want to remove.
Click on the three-dot icon and select ‘Delete’ from the Action menu.
Confirm you want to delete the page in the ‘Delete Page’ validation window.

Update the Text Statement

A short text statement displays towards the bottom of the footer to showcase further information about your school, such as a short promotional message or a legal disclaimer. This is powered by a single Content Element.

To update the supporting text statement:

Go to the ‘Banners’ panel.
Scroll to ‘Footers’ in the left navigation and select ‘TB Footer 1’.
Scroll to the text statement in the main banner interface.
Hover over the Content Element displaying the text statement and click on the ‘Edit Content’ button.
Update the text within the content editor. We recommend adding a single paragraph with a maximum of 50 words to maintain consistency with the original design.
Click on the ‘Save’ button at the bottom of the content editor.
Click the ‘Publish’ button at the bottom-right of the banner interface.

Tip: You can optionally remove the text statement from the footer by deleting the existing text from the content editor during step 5. To reinstate a text statement that has been removed previously, follow the same set of steps above, but add a new paragraph of text to the empty Content Element during step 5.

Add a New Accreditation Logo

A row of accreditation logos displays towards the bottom of the footer showcasing important awards and accreditations your school has received. Each logo can optionally be linked to a corresponding webpage with further information.

This section of the footer is powered by a Container element, which contains an individual Resource element for each of the logos inside of it.

Add a New Accreditation Logo

To add an accreditation logo, begin by uploading a logo image:

Click on the ‘folder’ icon button in Composer’s left navigation to access Resources.
Click on the ‘Resources’ tab.
Create or select an existing folder for your accreditation logos in the ‘Public’ directory.
Click on the ‘Add Public Resource’ button at the top right of the Resources interface.
Choose from the options available to upload a new accreditation logo.
Once the upload is complete, update the following image properties in the ‘Edit Resource Details’ window:
- Click into the ‘Title’ field and add a short title for your image (this is for internal use and will not be seen by the visitor).
- Click into the ‘Alt Text’ field and add a short description explaining the contents of the image. This is used by screen reading software to describe the image for visitors who are unable to see it.
Click on the ‘Save’ button at the bottom of the ‘Edit Resource Details’ window.

Image Size: The recommended width for an accreditation logo is 256px. There is no minimum or maximum height.

With the image uploaded, add it to the row of accreditation logos in the footer:

Go to the ‘Banners’ panel.
Scroll to ‘Footers’ in the left navigation and select ‘TB Footer 7’.
Scroll down the banner interface to the Container element displaying the current set of accreditation logos.
Hover over the Resource element displaying the logo that should precede the new logo you want to add and click on the ‘Add Element’ button.
Select a Resource element from the ‘Standard’ tab in the ‘Add Element’ window.
Hover over the new Resource element and click on the ‘gear’ icon in the top-right corner.
Click on the ‘Single’ tab at the top of the ‘Edit Resource Element Settings’ window.
Click on the blue toggle to the right of the ‘Title’ field to hide the element title.
Click on the ‘Browse’ button below the ‘Title’ field.
Find and select the logo image you have previously uploaded.
Click on ‘+ Link To’ within the ‘Resource Element Settings’ window.
Optionally link the logo image to the desired webpage::
- If the page is part of your website, select ‘Internal Redirect’ and click the ‘Select Page’ button to choose the page.
- If the page is external to your website, select ‘External Redirect’ and type the full URL into the ‘Redirect to this page’ field.
Click on the ‘Save’ button.
Click the ‘Publish’ button at the bottom-right of the banner interface.

Once the banner has been published, the new logo will display in the footer automatically.

Tip: Only display your most important accreditation logos in the footer. We recommend adding a maximum of 8 logos to ensure they fit in one row (on desktop screens) and have a strong visual impact. If you want to show additional logos, consider creating a dedicated interior page for them and showing them in a Resources grid or slideshow.

Reorder an Accreditation Logo

The order of the accreditation logos is determined by the order of the Content Elements inside the Container element that powers this section of the footer.

To reorder an accreditation logo:

Go to the ‘Banners’ panel.
Scroll to ‘Footers’ in the left navigation and select ‘TB Footer 7’.
Scroll down the banner interface to the Container element displaying the current set of accreditation logos.
Hover over the Resource element displaying the accreditation logo you want to move and click down on the ‘Move element’ icon in the top-right corner.
Drag and drop the Resource element into the desired new position, making sure it is still inside the Container element that powers the panel.

Remove an Accreditation Logo

To remove an accreditation logo, delete the Resource element that powers it:

Go to the ‘Banners’ panel.
Scroll to ‘Footers’ in the left navigation and select ‘TB Footer 7’.
Scroll down the banner interface to the Container element displaying the current set of accreditation logos.
Hover over the Resource element displaying the logo you want to remove and click down on the ‘Delete element’ icon in the top-right corner.
Confirm you want to delete the Resource element in the ‘Delete Resource Element’ validation window.

Note: Removing the Resource element will stop the accreditation logo from displaying in the footer, but the logo image will still exist in theResources module in case you want to add it again in the future or display it in another part of the website.

Add a Footer Utility Link

A set of utility links displays at the bottom left of the default footer. These provide visitors with links to useful information concerning the website itself, including legal policies and accessibility-related pages.

The footer utility links are powered by a single Navigation element displaying pages from the ‘Footer Utility’ branch in the ‘Pages’ panel. Each page in this branch represents a different utility link and can be set to redirect to a webpage of your choosing.

To add a new utility link to the footer:

Go to the ’Pages’ panel.
Hover over the ‘Footer Utility’ branch.
Click on the three-dot icon and select ‘New Page’ from the Action menu.
Click on the ‘Linked’ tab in the ‘New Page’ window.
Click into the ‘Page Name’ field and replace ‘New Page’ with the link title.
Tick the ‘Linked Page’ checkbox.
Set up a redirect to the desired webpage:

If the page is part of your website, select ‘Internal Redirect’ and click the ‘Select Page’ button to choose the page.
If the page is external to your website, select ‘External Redirect’ and type the full URL into the ‘Redirect to this page’ field.

If the link redirects to an external webpage, tick the ‘Open in a new Window’ checkbox.
Click the ‘Save’ button in the ‘New Page’ window.
Drag and drop the page into the desired position within the ‘Footer Utility’ branch.
Click the ‘Publish’ button at the bottom-right of the page interface.

Once the page has been published, the new link will display in the footer automatically.

Homepage Panels

Slideshow 14

Panel Overview

The ‘Slideshow’ panel displays a slideshow of full-width images and/or videos to provide the visitor with a visually-engaging introduction to your school or district. This is supported by a row of eye-catching icon buttons.

The panel consists of the following key features housed within a single Container element:

Slideshow: A autoplay slideshow of large images and/or videos powered by a single Resource element with arrow buttons and a play/pause button toggle. This is set to display resources from the ‘Home Hero Slideshow Panel’ gallery by default.

Each slide within the slideshow includes a supporting text area displaying an optional title and description (inclusive of an optional button). This content provides further insights into your key messages and encourages the visitor to find out more.

Icon Buttons: a row of up to 6 icon buttons linking to important pages and resources on your website. Each button consists of a customizable icon in gray (that can be selected from an icon library uploaded to your website) and a supporting text label.

The icon buttons are powered by a single Navigation element displaying pages from the ‘Font Icons’ branch in the ‘Pages’ panel. Each page in this branch represents a different icon button and can be set to redirect to a page of your choosing.

The elements in this panel are configured with the following settings:

Container Element

Element Setting	Value
Title	Off
Design	Custom Class: slideshow-14 hero

Resource Element

Element Setting	Value
Format	Slideshow
Title	Off
Browse	[This setting displays your chosen Resources Gallery]
Display Resource Type(s)	Image, Video
Gallery	Name: Unchecked Description: Unchecked
All	To show the title and description for each photo and/or video: Display Resource: Title Display Title: Below Resource Description: Checked To hide the title and description for each photo and/or video: Display Resource: None Description: Unchecked
Audio	Autoplay: Unchecked Closed Captions: Unchecked
Video	Resolution up to: HD (1080p) Show/Hide Controls: Hide Controls Closed Captions: Unchecked
Controls	Scrolling: Horizontal User Control Type: Arrows Autoplay: Checked Play/Pause Button: Checked Show each slide for: 10 seconds [this setting can optionally be changed] Show: 1 item per slide Transition effect: Fade [this setting can optionally be changed]
Formatting	Order Resources/Gallery by: Gallery Order (Default) [this setting can optionally be changed] Display Resources: Inline
Advanced	Ignore URL Parameters: Unchecked
Link To	Popup/Page/Element: Popup Display slideshow controls in pop-up: Unchecked
Design	Custom Class: slideshow-14 hero Background Image: No image set Scale Media On Load: Checked

Icon Buttons Container Element

Element Setting	Value
Title	Off
Design	Custom Class: icon-panel-container icon-panel-10

Navigation Element

Element Setting	Value
Format	List
Title	Off
Starts/Ends	Starts 1 Levels Below Selected Page Selected Page/Branch: [This setting displays your chosen branch of pages] Ends 1 Levels Below Starting Level
Content Details	Page Description: Unchecked Page Thumbnail: Unchecked Display Inaccessible Pages to UnAuthenticated Users: Checked Display Inaccessible Pages to Authenticated Users: Unchecked
Advanced	Accessibility Level: No Value
Design	Custom Class: nav-icons Background Image: No Image Set Scale Media On Load: Checked

Important: When updating the elements in the ‘Slideshow’ panel, please only update the settings recommended across these instructions. All other settings have been configured to ensure the panel displays with the correct presentation and functionality.

Panel Image & Video Sizes

The following pixel dimensions are recommended for the images and videos uploaded to the Resources module for this panel. Please follow these guidelines to achieve an ideal balance of high visual quality and efficient loading times with your content:

Image Area	Width (pixels)	Height (pixels)
Slideshow image or video	2200	759

Change the Gallery of Resources on Display in the Slideshow

The slideshow in the ‘Slideshow’ panel is powered by a single Resource element. By default, this has been set to show resources all resources from the ‘Home Hero Slideshow Panel’ gallery.

To change the gallery of resources on display within the slideshow:

Go to the ’Pages’ panel and select the homepage.
Turn on the ‘Compose’ toggle in the bar at the bottom of the page interface.
Refresh the page in your web browser.
Scroll to the ‘Slideshow’ panel.
Hover over the Resource element displaying the slideshow and click on the ‘gear’ icon in the top-right corner.
With the ‘Slideshow’ tab selected in the ‘Edit Resource Element Settings’ window, click on the ‘Browse’ button directly below the ‘Title’ field.
Select the desired gallery to display in the ‘Select a Gallery’ window.
Click on the ‘Save’ button at the bottom of the ‘Edit Resource Element Settings’ window.

Important: When updating this Resource element, please only update the settings recommended in these instructions. All of the other settings have been configured to ensure the slideshow displays with the correct presentation.

Note: These instructions detail the steps required to display an existing gallery of resources within the Slideshow panel. To learn more about adding galleries in Composer please read our Knowledge Base article on how to organize resources into Galleries.

Show or Hide the Title and Description within each Slide in the Slideshow

By default, the title and description for each image and/or video in the slideshow will display automatically along the bottom-left of each slide. You may optionally show or hide this title and description.

To hide the title and description within each slide:

Go to the ’Pages’ panel and select the homepage.
Turn on the ‘Compose’ toggle in the bar at the bottom of the page interface.
Refresh the page in your web browser.
Scroll to the ‘Slideshow’ panel.
Hover over the Resource element displaying the current image or video and click on the ‘gear’ icon in the top-right corner.
Click on ‘+ All’ in the ‘Edit Resource Element Settings’ window.
To hide the title for each slide, set the ‘Display Resource’ field to ‘None’.
To hide the description for each slide, uncheck the ‘Description’ checkbox.
Click on the ‘Save’ button at the bottom of the ‘Edit Resource Element Settings’’ window.

To show the title and description within each slide if it has previously been hidden:

Go to the ’Pages’ panel and select the homepage.
Turn on the ‘Compose’ toggle in the bar at the bottom of the page interface.
Refresh the page in your web browser.
Scroll to the ‘Slideshow’ panel.
Hover over the Resource element displaying the current image or video and click on the ‘gear’ icon in the top-right corner.
Click on ‘+ All’ in the ‘Edit Resource Element Settings’ window.
To show the title for each slide, set the ‘Display Resource’ field to ‘Title’.
Make sure the ‘Display Title’ field is set to ‘Below Resource’.
To show the description for each slide, check the ‘Description’ checkbox.
Click on the ‘Save’ button at the bottom of the ‘Edit Resource Element Settings’’ window.

Add an Image or Video to the Slideshow

To add a new slide to the slideshow in the ‘Slideshow’ panel, begin by uploading an image or video for it to the Resources module:

Click on the ‘folder’ icon button in Composer’s left navigation to access Resources.
Click on the ‘Resources’ tab.
Select the folder containing your slideshow images and videos in the ‘Public’ directory.
Click on the ‘Add Public Resource’ button at the top right of the Resources interface
Choose from the upload options available and upload a new image or video.

Image Size: The recommended size for images and videos in the slideshow panel is 2200px (wide) by 759px (high).

Once the upload is complete, update the following properties in the ‘Edit Resource Details’ window to populate the supporting text area within the slide and to add an ‘Alt text’ value for the image or video thumbnail:

Optionally click into the ‘Title’ field to add a short title for the image or video. This will display as a large title at the top of the supporting text area (if this has been set to display in the slideshow).
Optionally click into the content editor within the ‘Description’ field and type in a short text description for your image or video. This will display below the title in the support text area (if this has been set to display in the slideshow). We recommend adding a single paragraph with a maximum of 25 words to ensure that it displays effectively within the slide.
Optionally add a styled button below the description text:
1. Please your cursor at the end of the description within the content editor in the ‘Description’ field and press the return key.
2. Type in a short label for the button.
3. Highlight the button label with your cursor.
4. Click on the ‘Link’ icon button in the content editor toolbar.
5. Choose ‘Add Link’ from the dropdown list
6. Select a link type from the top of the ‘Link’ properties window.
7. Configure the link settings and make sure that the ‘Open link in a new tab’ checkbox is checked if the link opens a document or a page on an external website.
8. Click on the ‘Class’ dropdown within the ‘Link’ properties window and select one of the button styles described in the table below.
9. Click on the ‘OK’ button at the bottom of the ‘Link’ properties window.
10. Click on the ‘Save’ button at the bottom of the ‘Edit Content Element Settings’ window.

Name	Purpose
button-on-dark-1	Small button with a transparent background and white text with a thin white border for use in dark callout boxes.
button-on-dark-2	Small button with a white background for use in dark callout boxes.
button-on-dark-3	Small button with white text and a darker shade of the website's primary color in the background for use in dark callout boxes.
button-arrow-on-dark	Small text link in uppercase letters with an arrow icon in white for use in dark callout boxes.

If you are uploading an image, click into the ‘Alt Text’ field and add a short description of the image. This is used to describe the image in situations where the visitor cannot see it and is highly recommended to improve the image’s accessibility. If you are uploading a video, add a short description to the ‘Thumbnail Alt Text’ field.
Click on the ‘Save’ button at the bottom of the ‘Edit Resource Details’ window.

Finally, add the new image or video to the Resources Gallery powering the slideshow:

Click on the ‘folder’ icon button in Composer’s left navigation to access Resources.
Click on the ‘Galleries’ tab.
Select the Resource Gallery powering your slideshow under ‘Public Galleries’.
Click on the ‘Add Public Resource' button at the top-right of the gallery interface.
Select the image or video you have previously uploaded and add it to the gallery.
Optionally drag and drop the image or video within the gallery interface to reorder its position within the slideshow.
Click the ‘Update’ button at the bottom-right of the Gallery interface.

Once the gallery has been updated, the new image or video will display in the slideshow panel automatically.

Note: To optimize loading speeds, the slideshow will display a maximum of 20 slides on the homepage. Videos set to autoplay are also limited to 30 seconds in length, at which point the slideshow will advance to the next slide.

To learn more about image and video best practices, please refer to the ‘Image & Video Best Practices’ sections in the ‘Website Overview’ section.

Reorder the Slides in the Slideshow

The order of the slides within the slideshow in the ‘Slideshow’ panel is based on the order of the images and/or videos within the Resources Gallery that powers this content.

To reorder the slides:

Click on the ‘folder’ icon button in Composer’s left navigation to access Resources.
Click on the ‘Galleries’ tab.
Select the Resource Gallery powering your slideshow under ‘Public Galleries’.
Drag and drop the image or video within the gallery interface to reorder its position within the slideshow.
Click the ‘Update’ button at the bottom-right of the gallery interface.

Once the gallery has been updated, the images and/or videos you have reordered will display in the updated order.

Remove an Image or video from the Slideshow

To remove an existing image or video from the slideshow in the ‘Slideshow’ panel:

Click on the ‘folder’ icon button in Composer’s left navigation to access Resources.
Click on the ‘Galleries’ tab.
Select the Resource Gallery powering your slideshow under ‘Public Galleries’.
Hover over the image or video you want to remove and click on the ‘check’ icon. This will select the file and open the ‘Resources Selected’ panel on the right of the gallery interface.
Click the ‘Remove from Gallery’’ button in the ‘Resources Selected’ panel.
Click the ‘Update’ button at the bottom-right of the gallery interface.

Once the gallery has been updated, the images and/or videos you have removed from the Resources Gallery will no longer display in the slideshow.

Note: Removing images or videos from a Resources Gallery will remove them from the ‘Slideshow’ panel, but the files themselves will still exist in the Resources module in case you want to use them again in the future.

Add an Icon Button to the row of Icon Buttons

To add a new icon button to the row of Icon Buttons, begin by choosing an icon for it:

Open the Finalsite Icon Library webpage in your browser.
Choose an icon from this library and make a note of the name directly below it.

Next create a new page for the icon button:

Return to the ‘Pages’ panel.
Hover over the ‘Font Icons’ branch and click on the three-dot icon.
Select ‘New Page’ from the Action menu.
Click on the ‘Linked’ tab in the ‘New Page’ window.
Click into the ‘Page Name’ field and replace ‘New Page’ with a short title for the icon button.
Check the ‘Linked Page’ checkbox.
Setup a redirect link to the desired webpage:

If the page you want to link the button to is part of your website, select ‘Internal Redirect’ and click the ‘Select Page’ button to select the page.
If the page you want to link the button to is external to your website, select ‘External Redirect’ and type the full URL of the page into the ‘Redirect to this page’ field.

If the link redirects to an external webpage, check the ‘Open in a new Window’ checkbox. This is a recommended best practice when linking to external websites.
Click the ‘Save’ button in the ‘New Page’ window to create the page.

With the new page selected in the ‘Pages’ panel, complete the process by hiding it from search engines, applying the icon and choosing the position of the icon button within the icon panel:

Click on the ‘gear’ icon in the bar at the bottom-right of the page interface.
Check the following checkboxes under the ‘General’ tab in the ‘Page Settings’ window to prevent the icon button itself from displaying as a page in search results:

Hide from internal site search
Hide from external search engines

Click into the ‘Custom Nav Class’ field towards the bottom of the ‘Page Settings’ window.
Type the icon custom class that you noted earlier into the ‘Custom Nav Class’ field. Please follow the exact format specified with all characters in lowercase with a hyphen between words (for example, ‘icon-apple’).
Click the ‘Save’ button in the ‘Page Settings’ window.
Click the ‘Publish’ button at the bottom-right of the page interface.

Once the page has been published, the new icon button will display in the icon panel automatically.

Important: The icon panel supports a maximum of 6 icon buttons. Adding more than this may result in the panel displaying incorrectly.

Update an Existing Icon Button

To update an existing icon button in the Row of Icon Buttons, begin by choosing a new icon for it:

Open the Finalsite Icon Library webpage in your browser.
Choose an icon from this library and make a note of the name directly below it.

With your new icon selected, next update the title and link destination for the icon button:

Go to the ‘Pages’ panel.
Open the ‘Font Icons’ branch and select the page representing the icon button you want to update.
Click on the ‘gear’ icon in the bar at the bottom of the page interface.
Click into the ‘Page Name’ field and update the title for the icon button.
Click on the ‘Linked’ tab at the top of the ‘Page Settings’ window.
Check the ‘Linked Page’ checkbox.
Setup a redirect link to the desired webpage:
1. If the linked page is part of your website, select ‘Internal Redirect’ and click the ‘Select Page’ button to choose the page.
2. If the page is external to your website, select ‘External Redirect’ and type the full URL of the page into the ‘Redirect to this page’ field.
If the link redirects to an external webpage, check the ‘Open in a new Window’ checkbox. This is a recommended best practice when linking to external websites.

With the ‘Page Settings’ window still open, apply your new icon:

Click into the ‘Custom Nav Class’ field towards the bottom of the ‘Page Settings’ window and delete the current class.
Type the icon custom class that you noted earlier into the ‘Custom Nav Class’ field. Please follow the exact format specified with all characters in lowercase with a hyphen between words (for example, ‘icon-apple’).
Click the ‘Save’ button in the ‘Page Settings’ window.
Click the ‘Publish’ button at the bottom-right of the page interface.

Once the page has been published, the updated icon button will display automatically.

Reorder an Icon Button

The order of the buttons in the row of Icon Buttons is determined by the order of the pages within the 'Font Icons’' branch in the 'Pages' panel.

To reorder an icon button:

Go to the ’Pages’ panel.
Open the ‘Font Icons’ branch.
Drag and drop the page representing the icon button you want to move into the desired new position.

Once the page has been moved, the icon buttons will display in the updated order automatically.

Remove an Icon Button

To remove a button from the row of Icon Buttons you can either delete the page representing it from the ‘Font Icons’ branch (to remove it permanently) or set the page to be hidden from Navigation elements (in case you want to display it again in the future).

To delete the page representing the icon button:

Go to the Pages panel.
Open the ‘Font Icons’ branch.
Hover over the page representing the icon button you want to remove.
Click on the three-dot icon and select ‘Delete’ from the Action menu.
Confirm you want to delete the page in the ‘Delete Page’ validation window.

To hide the page representing the icon button:

Go to the Pages panel.
Open the ‘Font icons’ branch.
Select the page representing the button you want to hide.
Click on the ‘gear’ icon in the bar at the bottom-right of the page interface.
Check the ‘Hide from navigation elements’ checkbox within the ‘General’ tab in the ‘Page Settings’ window.
Click the ‘Save’ button in the ‘Page Settings’ window.
Click the ‘Publish’ button at the bottom-right of the page interface.

Once the page representing the icon button has been published with the updated settings applied, the icon button will be removed from the icon panel automatically.

Note: To display an icon button that has been hidden previously, follow the same set of steps above, but uncheck the ‘Hide from navigation elements’ checkbox during step 5.

Mission Statement 3

Mission Statement Panel Overview

Panel Image Sizes

The following pixel dimensions are recommended for the images uploaded to the Resources module for use in this panel. Following these guidelines will help you to achieve an ideal balance of visual quality and loading speed for your content:

Image Area	Width (pixels)	Height (pixels)
Mission Statement Image	800	712

Update the Panel Title

To update the title of the ‘Mission Statement’ panel:

Go to the ’Pages’ panel and select the homepage.
Turn on the ‘Compose’ toggle in the bar at the bottom of the page interface.
Refresh the page in your web browser.
Scroll to the ‘Mission Statement’ panel.
Hover over the Resource element displaying the panel content and click on the ‘gear’ icon in the top-right corner.
Click into the ‘Title’ field in the ‘Edit Resource Element Settings’ window.
Update the title text or alternatively click on the blue toggle to the right of the ‘Title’ field to hide the panel title.
Click on the ‘Save’ button at the bottom of the ‘Edit Content Element Settings’ window.

Update the Mission Statement

The text area in the ‘Mission Statement’ panel consists of an optional subheading, a single paragraph of text and an optional button linking to a page with further information about your school’s mission.

To update the mission statement, begin by updating the optional subheading:

Go to the ’Pages’ panel and select the homepage.
Turn on the ‘Compose’ toggle in the bar at the bottom of the page interface.
Refresh the page in your web browser.
Scroll to the ‘Mission Statement’ panel.
Hover over the Resource element displaying the panel content and click on the ‘gear’ icon in the top-right corner.
Click on ‘+ Design’ at the bottom of the ‘Edit Resource Element Settings’ window.
Click into the ‘Header Content’ content editor.
Update the subheading text.

Note: To remove the optional subheading, delete the existing subheading text as part of step 8. If the subheading has been removed previously and you want to add a new one, follow the same set of steps above and type in a new subheading as part of step 8.

With the ‘Resource Element Settings’ window still open, next update the paragraph of text:

Click into the ‘Footer Content’ content editor at the bottom of the ‘+ Design’ section
Update the existing paragraph text. We recommend adding a single paragraph with a maximum of 50 words to maintain consistency with the original design.
Update the text in the existing link below the paragraph of text, making sure not to remove the link applied to it.

Finally, update the optional button:

Locate the link below the paragraph text in the ‘Footer Content’ content editor. This link represents the optional button.
Update the existing link text to change the button label, making sure not to remove the link already applied to it.
Right-click on the link and choose ‘Edit Link’ from the action menu.
Select the desired link type from the top of the ‘Link’ properties window.
Update the link settings to setup a new link destination for the button. Make sure not to remove the ‘button-1’ class from the ‘Class’ dropdown.
Check the ‘Open link in a new tab’ checkbox if the updated link opens a page that is external to your webpage.
Click on the ‘OK’ button at the bottom of the ‘Link’ properties window.
Click on the ‘Save’ button at the bottom of the ‘Edit Resource Element Settings’ window.

Note: To remove the optional button, delete the existing link in the ‘Footer Content’ content editor as part of step 8. If the button has been removed previously and you want to add a new one, place your cursor after the paragraph text in the ‘Footer Content’ content editor and then follow the normal steps to ‘Add a Button’ which can be found on the ‘Interior Page’ page of the ‘Instructions’ branch of your website.

Update the Supporting Image

To update the supporting image, begin by uploading the new image to the Resources module:

Click on the ‘folder’ icon button in Composer’s left navigation to access Resources.
Click on the ‘Resources’ tab.
Create or select an existing folder for your image in the ‘Public’ directory
Click on the ‘Add Public Resource’ button at the top right of the Resources interface.
Choose from the upload options available and upload the new image.
Once the upload is complete, update the following image properties in the ‘Edit Resource Details’ window:

Click into the ‘Title’ field and add a short title for the image. This is for internal use and will not display on the homepage.
Click into the ‘Alt Text’ field and add a short description of the image. This is used to describe the image in situations where the visitor cannot see it and is highly recommended to improve its accessibility.

Click on the ‘Save’ button at the bottom of the ‘Edit Resource Element Settings’ window.

Image Size: The recommended upload size for the supporting image is 800px (wide) by 712px (high).

With the image uploaded, set it to display within the ‘Mission Statement’ panel:

Turn on the ‘Compose’ toggle in the bar at the bottom of the page interface.
Refresh the page in your web browser.
Scroll to the ‘Mission Statement’ panel.
Hover over the Resource element displaying the panel content and click on the ‘gear’ icon in the top-right corner.
Click on the ‘Browse’ button directly below the ‘Title’ field in the ‘Edit Resource Element Settings’ window.
Select the image you have uploaded previously in the ‘Pick a Resource’ window.
Click on the ‘Save’ button at the bottom of the ‘Edit Resource Element Settings’’ window.

Infographics 3

Infographics Panel Overview

Update the Panel Title

To update the title of the ‘Infographics’ panel:

Go to the ’Pages’ panel and select the homepage.
Turn on the ‘Compose’ toggle in the bar at the bottom of the page interface.
Refresh the page in your web browser.
Scroll to the ‘Infographics’ panel.
Hover over the Container element displaying the panel title and click on the ‘gear’ icon in the top-right corner.
Click into the ‘Title’ field in the ‘Edit Container Element Settings’ window.
Update the text or click on the blue toggle to the right of the ‘Title’ field to hide the element title.
Click on the ‘Save’ button at the bottom of the ‘Edit Container Element Settings’ window.

Add an Infographic Fact

To add an infographic fact to the slideshow, begin by choosing an icon for it:

Go to the ‘Pages’ panel.
Navigate to the ‘Icon for Panels’ page in your website’s ‘Font Icon’ branch
Choose an icon from the library available on this page
Make a note of the custom class provided.

With your new icon selected, begin by adding a title for the infographic fact:

Go to the ’Pages’ panel and select the homepage.
Turn on the ‘Compose’ toggle in the bar at the bottom of the page interface.
Refresh the page in your web browser.
Scroll to the Infographics panel.
Hover over the Content Element displaying the infographic fact you want to update and click on the ‘gear’ icon in the top-right corner of the element.
Click into the ‘Title’ field in the ‘Edit Content Element Settings’ window and update the title text. This should be one short statement.

With the ‘Content Element Settings’ window still open, apply your chosen icon:

Click on ‘+ Design’ at the bottom of the ‘Edit Content Element Settings’ window.
Click into the ‘Custom Class’ field and delete the current text on display.
Type in the custom class that you noted earlier for your chosen icon. Please follow the exact format specified with all characters in lowercase with a hyphen between words (for example, ‘icon-apple’).
Click on the ‘Save’ button at the bottom of the ‘Edit Content Element Settings’ window.

Finally, add the supporting text statement that will display below the infographic title:

Hover over the Content element once again and click on the ‘Edit Content’ button.
Update the supporting text statement in the content editor. We recommend restricting this to one short sentence and maintaining a similar length across each fact so that they display consistently across the grid.
Click on the ‘Save’ button at the bottom right of the content editor.

Update an Existing Infographic Fact

To update an existing infographic fact, begin by choosing a new icon for it:

Go to the ‘Pages’ panel.
Navigate to the ‘Icon for Panels’ page in your website’s ‘Font Icon’ branch
Choose an icon from the library available on this page
Make a note of the custom class provided.

With your new icon selected, begin by updating the title for your chosen infographic fact:

Go to the ’Pages’ panel and select the homepage.
Turn on the ‘Compose’ toggle in the bar at the bottom of the page interface.
Refresh the page in your web browser.
Scroll to the Infographics panel.
Hover over the Content Element displaying the infographic fact you want to update and click on the ‘gear’ icon in the top-right corner of the element.
Click into the ‘Title’ field in the ‘Edit Content Element Settings’ window and update the title text. This should be one short statement.

With the ‘Content Element Settings’ window still open, apply your chosen icon:

Click on ‘+ Design’ at the bottom of the ‘Edit Content Element Settings’ window.
Click into the ‘Custom Class’ field and delete the current text on display.
Type in the custom class that you noted earlier for your chosen icon. Please follow the exact format specified with all characters in lowercase with a hyphen between words (for example, ‘icon-apple’).
Click on the ‘Save’ button at the bottom of the ‘Edit Content Element Settings’ window.

Finally, update the supporting text that displays below the infographic title:

Hover over the Content element once again and click on the ‘Edit Content’ button.
Update the supporting text statement in the content editor. We recommend restricting this to one short sentence and maintaining a similar length across each fact so that they display consistently across the grid.
Click on the ‘Save’ button at the bottom right of the content editor.

Reorder an Infographic Fact

The order of the infographic facts in the slideshow is determined by the order of the individual Content Elements inside the Container element that powers this panel.

To reorder the infographic facts:

Go to the ’Pages’ panel and select the homepage.
Turn on the ‘Compose’ toggle in the bar at the bottom of the page interface.
Refresh the page in your web browser.
Scroll to the Infographics panel.
Hover over the Content Element displaying the infographic fact you want to move and click down on the ‘Move’ icon.
Drag and drop the infographic fact into the desired new position, making sure it stays inside the Container element powering this panel.

Remove an Infographic Fact

To remove an existing infographic fact from the slideshow:

Go to the Pages panel and select the homepage.
Turn on the ‘Compose’ toggle in the bar at the bottom of the page interface.
Refresh the page in your web browser.
Scroll to the ‘Infographics’ panel.
Hover over the Content Element displaying the infographic fact you want to remove and click on the ‘Delete’ icon button.
Confirm you want to delete the page in the ‘Delete Content Element’ validation window.

News & Calendar 5

Panel Overview

The ‘News & Events’ panel displays a selection of latest news stories and upcoming events taking place within your school or district. It consists of the following key features added inside a Container element:

‘Latest News’ List: A list of two latest news stories and/or announcements powered by a single Post element. Each story displays a thumbnail image, the story title, a short text summary and a ‘Read this Article’ link. The visitor can click on a story to view further story details in a pop-up.

‘Upcoming Events’ Slideshow: A slideshow of upcoming events feeding in from one or more school calendars. This is powered by a single Calendar element. Each event in the slideshow displays the event title, its date and time, the event location and a ‘Read More’ link. The visitor can click on an event title or ‘Read More’ link to view further details about it in a pop-up.

‘View All News’ Button: A button at the bottom of the panel that takes the visitor to the page on your website displaying all news stories.

‘View Full Calendar’ Button: A button at the bottom of the panel that takes the visitor to the page on your website displaying the full calendar.

Panel Image Sizes

The following pixel dimensions are recommended for the images uploaded to the Resources module for this panel. Following these guidelines will help you to achieve an ideal balance of visual quality and loading speed for your content:

Image Area	Width (pixels)	Height (pixels)
'Latest News' Story Thumbnail	800	867

Update the Panel Title

To update the title of the ‘News & Calendar’ panel:

Go to the ’Pages’ panel and select the homepage.
Turn on the ‘Compose’ toggle in the bar at the bottom of the page interface.
Refresh the page in your web browser.
Scroll to the ‘News & Calendar’ panel.
Hover over the Container element displaying the panel title and click on the ‘gear’ icon in the top-right corner.
Click into the ‘Title’ field in the ‘Edit Container Element Settings’ window.
Update the text or click on the blue toggle to the right of the ‘Title’ field to hide the element title.
Click on the ‘Save’ button at the bottom of the ‘Edit Container Element Settings’ window.

Configure the Stories on Display in the 'Latest News' List

The ‘Latest News’ list is powered by a single Post element displaying the latest 2 posts from one or more selected boards in the Posts module.

To reconfigure the set of posts on display in the ‘Latest News’ list:

Go to the ’Pages’ panel and select the homepage.
Turn on the ‘Compose’ toggle in the bar at the bottom of the page interface.
Refresh the page in your web browser.
Scroll to the ‘News & Calendar’ panel.
Hover over the Post element displaying the ‘Latest News’ list and click on the ‘gear’ icon in the top-right corner.
Click on ‘+ Content Filters’ in the ‘Edit Post Element Settings’ window.
Click on the ‘Select Board’ button and choose one or more boards that you want to feed into the slideshow.
Click on ‘+ Formatting’ to optionally update the number of posts on display.
Click on the ‘Save’ button at the bottom of the ‘Edit Post Element Settings’ window.

Note: When updating this Post element, please only update the settings recommended in these instructions. All of the other settings have been configured to ensure the posts display with the correct presentation.

Configure the Content on Display in the ‘Latest News’ List Post Pop-up

When the visitor clicks on the title of a story in the ‘Latest News’ list, the full details of that story will open in a pop-up. By default this pop-up will display the following content:

Post Title
Author
Publish Date
Publish Time
Categories
Summary
Body
Tags
Thumbnail

To reconfigure the details shown in the story pop-up:

Go to the ’Pages’ panel and select the homepage.
Turn on the ‘Compose’ toggle in the bar at the bottom of the page interface.
Refresh the page in your web browser.
Scroll to the ‘News & Calendar’ panel.
Hover over the Post element displaying the ‘Latest News’ list and click on the ‘gear’ icon in the top-right corner.
Click on ‘+ Pop-up Details’ in the ‘Edit Post Element Settings’ window.
Check the feature options you want to show in the story pop-up. You may choose to include any of the options available.
Click on ‘+ Formatting’ in the ‘Edit Post Element Settings’ window.
Optionally update the display settings in the ‘Popup Thumbnail’ section to modify its size, shape and alignment within the pop-up.
Click on the ‘Save’ button at the bottom of the ‘Edit Post Element Settings’ window.

Note: The content displayed in the story pop-up includes categories and tags by default, but adding these details to a post is entirely optional. The categories and tags will only show in the story pop-up if they have been added to the specific post in the Posts module.

Add a New Story to the 'Latest News' List

To add a new story to the ‘Latest News’ list, begin by uploading the post thumbnail:

Click on the ‘folder’ icon button in Composer’s left navigation to access Resources.
Click on the ‘Resources’ tab.
Create or select an existing folder for your new thumbnail in the ‘Public’ directory
Click on the ‘Add Public Resource’ button at the top right of the Resources interface.
Choose from the upload options available and upload the new image.
Once the upload is complete, update the following image properties in the ‘Edit Resource Details’ window:

Click into the ‘Title’ field and add a short title for your image (this is for internal use and will not be seen by the visitor).
Click into the ‘Alt Text’ field and add a short description explaining the contents of the image. This is used by screen reading software to describe the image for visitors who are unable to see it.

Click on the ‘Save’ button at the bottom of the ‘Edit Resource Details’ window.

Image Size: The recommended image size for the post thumbnail is 800px (wide) by 867px (high).

With the post thumbnail uploaded, add the new post to the Posts module:

Click on the ‘Modules’ tab in Composer’s left navigation and select Posts.
Click on the ‘Boards’ tab.
Select the board that has been configured to display the latest news stories. If you have configured the ‘Latest News’ list to display stories from multiple boards, select the most suitable board for the content in your post.
Click on the ‘Create Post’ button at the top right of the Board interface.
Add the content for your new post:

Click into the ‘Title’ field and add a short title for your story.
Click into the ‘Body Content’ content editor and add the full content of the story.
Open the ‘Summary’ panel and type a short description in the content editor to introduce visitors to the story. We recommend adding a maximum of 15 words here to maintain consistency with the original design.
Open the ‘Thumbnail & Resource’ panel and click on the ‘Browse’ button to select the image you have uploaded for the thumbnail.

Click on the ‘Save’ button at the bottom right of the Post interface.
Click on ‘Yes’ in the ‘Publish Now’ window to publish the post immediately.

Once the post has been published, it will display in the ‘Latest News’ list automatically as long as it is one of the 3 most recent posts (based on its publish date) within the board or boards that have been configured to display in this Post element.

Tip: To learn more about adding posts in Composer please read our Knowledge Base article on how to make a new post.

Configure the Events on Display in the Calendar List

The ‘Upcoming Events’ slideshow in the ‘News & Calendar’ panel is powered by a single Calendar element that displays up to 8 upcoming events taking place within the next 30 days from one or more selected calendars in the Calendar Manager.

To reconfigure the calendars on display in the Calendar list:

Go to the ’Pages’ panel and select the homepage.
Turn on the ‘Compose’ toggle in the bar at the bottom of the page interface.
Refresh the page in your web browser.
Scroll to the ‘News & Calendar’ panel.
Hover over the Calendar element displaying the ‘Upcoming Events’ slideshow and click on the ‘gear’ icon in the top-right corner.
Click on ‘+ General Settings’ in the ‘Edit Calendar Element Settings’ window.
Click on the ‘Calendars’ dropdown and select the calendars that you want to feed into the slideshow.
Optionally update the fields specifying the number of items to display and the date range this should be restricted to.
Click on the ‘Save’ button at the bottom of the ‘Edit Calendar Element Settings’ window.

Note: When updating this Calendar element, please only update the settings recommended in these instructions. All of the other settings have been configured to ensure the calendar displays with the correct presentation.

Tip: To learn how to add new events to a calendar, please visit the Knowledge base article on Uploading Calendar Events.

Update the ‘View All News’ & ‘View Full Calendar’ Buttons

To update the ‘View All News’ and/or ‘View Full Calendar’ button at the bottom of the ‘News & Calendar’ panel:

Go to the ’Pages’ panel and select the homepage.
Turn on the ‘Compose’ toggle in the bar at the bottom of the page interface.
Refresh the page in your web browser.
Scroll to the ‘News & Calendar’’ panel.
Hover over the Container element displaying the panel title and click on the ‘gear’ icon in the top-right corner.
Click on ‘+ Design’ at the bottom of the ‘Edit Content Element Settings’ window.
Click into the ‘Footer’ Content’ content editor.
Update the existing text for the button you want to update, making sure not to remove the link already applied to it.
Right-click on the same link and choose ‘Edit Link’ from the action menu.
Select the desired link type from the top of the ‘Link’ properties window.
Update the link settings to set up a new link destination for the button.
Check the ‘Open link in a new tab’ checkbox if the updated link opens a page that is external to your webpage.
Click on the ‘OK’ button at the bottom of the ‘Link’ properties window.
Click on the ‘Save’ button at the bottom of the ‘Edit Content Element Settings’ window.

Interior Pages & Content Formatting

Interior Pages

Setup the Default Interior Page

The default setup for interior pages on your website includes the following features:

Header
Hero (single image)
Wide main content area
Right sidebar showing the sub-navigation and supporting content
Footer

To apply the default layout to a page:

Go to the Pages panel and select the desired page.
Turn on the ‘Compose’ toggle in the bar at the bottom of the page interface.
Refresh the page in your web browser.
Click on the ‘Page Layout & Appearance’ icon to the right of the ‘Compose’ toggle.
Apply the page layout settings below in the ‘Page Layout & Appearance’ window.
Click on the ‘Save’ button.

Setting	Value
Header	Your website’s default header banner
Left Banner	None
Right Banner	None
Footer	Your website’s default footer banner
Menu	Your website’s default menu banner
Layout	Wide main content area with narrow right sidebar
Theme	Your website’s default theme

Note: A new page will automatically inherit the standard interior page layout if its parent page already has these settings applied. You can also clone an existing page with these settings and then update the content to skip the initial setup process.

Interior Page Image & Video Sizes

The following pixel dimensions are recommended for images and videos uploaded to the Resources module for the interior pages on your website. Following these guidelines will help you to achieve an ideal balance of visual quality and loading speed for your content:

Image Area	Width (pixels)	Height (pixels)
Hero image	2200	840
Main content area image or video	1200	No min or max
Sidebar image or video	800	No min or max
Callout box image	1200	No min or max

There are several ways of preparing an image or video to match these sizes:

Use photo editing software such as Adobe Photoshop or video editing software such as Adobe Premiere to scale and/or crop your file before uploading it to Composer.

If you need to crop an image, upload it to the Resources module, select it and click on the ‘Crop’ icon button towards the top of the Resource details panel. This will open Composer’s inbuilt image editor where you can crop the file.

If you need to resize a video and you do not have access to video editing software, download a free video transcoder tool such as Handbrake.fr to create a copy of the file with adjusted dimensions and quality settings.

Add a Hero Image

The default interior page layout includes an optional full-width hero panel at the top of the page for displaying a single image. This is recommended for promotional pages to provide a visually engaging introduction to the content.

Upload a new Hero Image

Begin by uploading the hero image to the Resources module:

Click on the ‘folder’ icon button in Composer’s left navigation to access Resources.
Click on the ‘Resources’ tab.
Create or select an existing folder within the ‘Public’ directory for your hero images.
Click on the ‘Add Public Resource’ button at the top right of the Resources interface.
Choose from the upload options available and upload the new image.
Once the upload is complete, update the following image properties in the ‘Edit Resource Details’ window:

Click into the ‘Title’ field and add a short title for your image (this is for internal use and will not be seen by the visitor).
Click into the ‘Alt Text’ field and add a short description explaining the contents of the image. This is used by screen reading software to describe the image for visitors who are unable to see it.

Click on the ‘Save’ button at the bottom of the ‘Edit Resource Details’ window.

Note: The recommended size for a hero image on the interior page is 2200px (wide) by 840px (high).

Please also note that Resource captions are not compatible with the hero image on interior pages and should be set to ‘None’ within the ‘Image’ section in the ‘Resource Element Settings’ window.

Once the hero image has been uploaded to the Resources module, there are two different options for adding it to the website:

Add a unique hero image to an individual page
Add a hero image to a group of pages

Add a Unique Hero Image to an Individual Page

A hero image for an individual page should be added directly to the page itself and have your website’s default header banner applied in Page layout & appearance settings.

To add a hero image to an individual page:

Go to the ’Pages’ panel and select the desired page.
Add a Resource element to the very top of the main content area.
Hover over the element and click on the ‘gear’ icon in the top-right corner.
Click on the ‘Single’ tab in the ‘Edit Resource Element Settings’ window.
Click on the blue toggle to the right of the ‘Title’ field to hide the element title.
Click on the ‘Browse’ button.
Find and select the image you want to display in the ‘Pick a Resource’ window.
Click on ‘+ Design’ near the bottom of the ‘Edit Resource Element Settings’ window.
Click into the ‘Custom Class’ field and type in hero.
Click on the ‘Save’ button.

Tip: We recommend working with your Project Manager to set up the first hero image you add to an interior page as a shared element. This will allow you to reuse the element on other interior pages very easily and shorten the setup process for new individual hero images with the ‘Orphan and Edit’ functionality.

Add a Hero Image to a Group of Pages

A hero image required to display on multiple pages can be added to a new header banner, which can then be set to display on all of the pages it is required on within the Page layout & appearance settings.

To create the new header banner:

Go to the ‘Banners’ panel.
Scroll to ‘Headers’ in the left navigation and select your default header banner.
Click on the ‘Clone’ icon at the bottom-right corner of the banner interface.
Type a name for the new header into the title field in the ‘Clone Banner’ window (for example, ‘Academic Header’ if the new header is for pages in the ‘Academic’ section).
Click on the ‘Clone Banner’ button.
With the cloned banner selected, scroll to the very bottom of the banner interface and add a new Resource element.
Hover over the element and click on the ‘gear’ icon in the top-right corner.
Click on the ‘Single’ tab at the top of the ‘Edit Resource Element Settings’ window.
Click on the blue toggle to the right of the ‘Title’ field to hide the element title.
Click on the ‘Browse’ button.
Find and select the image you want to display in the ‘Pick a Resource’ window.
Click on ‘+ Design’ near the bottom of the ‘Edit Resource Element Settings’ window.
Click into the ‘Custom Class’ field and type in ‘hero’.
Click on the ‘Save’ button.
Click the ‘Publish’ button at the bottom-right of the banner interface.

To apply the new header banner to a page:

Go to the ’Pages’ panel
Select one of the pages you want to update
Click the ‘Compose’ toggle in the bar at the bottom of the page interface.
Refresh the page in your web browser.
Click on the ‘Page Layout & Appearance’ icon button to the right of the ‘Compose’ toggle.
Set the ‘Header Banner’ dropdown to your new header banner
Click on the ‘Save’ button in the ‘Page Layout & Appearance’ window.

Tip: If the new header has been added to a parent page that has child pages, you can optionally display it on all of these child pages through a single bulk styling update:

Go to the ’Pages’ panel.
Hover over a parent page with the new header already applied
Click on the three-dot icon and select ‘Bulk Style’ from the Action menu.
Tick the ‘Header’ checkbox in the ‘Bulk Style’ window.
Click the ‘Apply’ button.

Setup the Default Sidebar Structure

The default interior page layout consists of a wide main content area and a narrow right sidebar. This is recommended for consistency with the original theme design, but can optionally be changed to show a left sidebar, no sidebar or one of the other standard layout options that best suit the needs of your content.

To apply the default interior page layout to a page:

Go to the ’Pages’ panel and select the desired page.
Click the ‘Compose’ toggle in the bar at the bottom of the page interface.
Refresh the page in your web browser.
Click on the ‘Page Layout & Appearance’ icon button to the right of the ‘Compose’ toggle.
Set the ‘Left Banner’ dropdown to ‘None’.
Set the ‘Right Banner’ dropdown to ‘None’.
Select the page layout thumbnail showing a wide main content area and a narrow right sidebar. This is the fourth option in the top row.
Click on the ‘Save’ button in the ‘Page Layout & Appearance’ window.

Note: For consistency with the default interior page layout, we recommend adding a sub-navigation to the top of the sidebar to display the pages in the current section. For further information on how to achieve this, please refer to the instructions in this section on how to add a sub-navigation to the sidebar.

Add the Same Sidebar to a Group of Pages

If you would like the same sidebar content to display on multiple pages, this should be set up as a left or right Page Banner that is applied to a page with a single column layout within the Page Layout & Appearance settings.

This configuration will display to visitors in exactly the same way as the default interior page layout, but it will allow you to maintain the sidebar in one place within Composer and automatically apply any updates across all required pages.

To achieve this configuration, begin by creating a new sidebar banner and populating it with content:

Go to the ‘Banners’ panel.
Scroll to the ‘Left Banner’ section in the left navigation if you would like a left sidebar or the ‘Right Banner’ section if you would like a right sidebar.
Click on the green plus icon at the top of the chosen section to add a new banner.
Click into the ‘Banner Name’ field and type in a suitable title for the banner within the ‘New Left Banner’ or ‘New Right Banner’ window (for example, ‘Admissions Sidebar’ for a sidebar that should display on all pages within the ‘Admissions’ section of your website).
Populate the new banner with at least one element.
Click the ‘Publish’ button at the bottom-right of the banner interface.

Note: When updating a left or right banner within the ‘Banners’ panel, the content will display with the default Composer visual styling, however, once the banner has been added to a page, the content will inherit the visual styling of your website’s theme automatically.

Now apply your new sidebar banner to a page:

Go to the ’Pages’ panel.
Select one of the pages that you would like to apply the sidebar banner on.
Click the ‘Compose’ toggle in the bar at the bottom of the page interface.
Refresh the page in your web browser.
Click on the ‘Page Layout & Appearance’ icon button to the right of the ‘Compose’ toggle.
Set the ‘Left Banner’ or ‘Right Banner’ dropdown to the banner you created previously.
Click on the ‘Save’ button at the bottom of the ‘Page Layout & Appearance’ window.

Tip: If the new sidebar has been added to a parent page that has child pages, you can optionally display it on all of these child pages through a single bulk styling update:

Go to the ’Pages’ panel.
Hover over a parent page with the new header already applied
Click on the three-dot icon and select ‘Bulk Style’ from the Action menu.
Tick the ‘Left Banner’ or ‘Right Banner’ checkbox based on the banner you have created previously in the ‘Bulk Style’ window.
Click on the ‘Apply’ button.

Tip: Once a sidebar banner has been applied to at least one page, we recommend updating its content on the page itself as you would with any other element when the ‘Compose’ toggle is enabled. When working within this interface, the banner will inherit the visual styling of your website theme, which will provide a clearer impression of how its content will look once published.

Add a Sub-Navigation to the Sidebar

The default interior page layout includes a sub-navigation at the top of the right sidebar. This feature is highly recommended for interior pages to provide visitors with easy access to subpages throughout the current section.

To add the sub-navigation to a right sidebar:

Add a Navigation element to the top of the right sidebar.
Hover over the element and click on the ‘gear’ icon in the top-right corner.
Click on the blue toggle to the right of the ‘Title’ field in the ‘Edit Navigation Element Settings’ window to hide the element title.
Update the level setting options to match the following:
- Starts 2 levels below Current Branch
- Ends 5 levels below Starting Level
Click on ‘+ Design’ towards the bottom of the ‘Edit Resource Element Settings’ window.
Click into the ‘Custom Class’ field and type in ‘nav-sub’.
Click on the ‘Save’ button at the bottom of the ‘Edit Resource Element Settings’ window.

Tip: We recommend working with your Project Manager to make the sub-navigation on interior pages a shared element. This will allow you to reuse the element on other interior pages with a similar layout very easily.

Content Formatting

Add a Lead-in

A ‘lead in’ is a short paragraph at the start of a page with a bold presentation. It is designed to catch the visitor’s attention and ‘lead in’ to the content that follows.

To format the first paragraph on a page as a lead in:

Add or edit a Content element to the top of the main content area.
Type in a short paragraph of text.
Highlight the text with your cursor.
Click on the ‘Styles’ drop-down in the content editor toolbar.
Select ‘lead-in’ from the dropdown list.

Tip: Lead ins are recommended on every interior page with a text-based introduction to establish a consistent flow to the content throughout your website.

Lead-in Example

Maecenas faucibus mollis interdum. Praesent commodo cursus magna vel scelerisque nisl consectetur et.

Insert a Link

A link is recommended instead of a button when it forms part of a sentence or paragraph in your content. Links display in the website’s primary color with an underline.

To insert a link:

Add or edit a Content element.
Type in a word or short phrase describing the link.
Highlight this text with your cursor.
Click on the ‘Link’ icon button in the content editor toolbar.
Choose ‘Add Link’ from the dropdown list
Select a link type from the top of the ‘Link’ properties window.
Configure the link settings and make sure that the ‘Open link in a new tab’ checkbox is only ticked if the link opens an external webpage.
Click on the ‘OK’ button at the bottom of the ‘Link’ properties window.

Important: When inserting a link, choose a meaningful title that clearly identifies its purpose without the need for any additional context. This ensures it is clear and accessible to visitors. Avoid non-descriptive titles such as ‘click here’ or ‘read more’.

Link Example

Hyperlink

Add a Heading

Headings are recommended to break up pages into concise chunks so that the content is easy to follow. Heading titles should be short and descriptive to help visitors find what they are looking for on the page.

To add a heading:

Add or edit a Content element.
Type in a word or short phrase for the heading title.
Highlight this text with your cursor.
Click on the ‘Paragraph Format’ icon button in the content editor toolbar.
Choose the desired heading tag from the dropdown list.

Note: When choosing a heading tag it is important to follow a logical HTML heading structure. This is beneficial for Search Engine Optimization (SEO) and ensures that your heading is accessibility compliant.

Heading Examples

Heading Two

Nullam quis risus eget urna mollis ornare vel eu leo. Sed posuere consectetur est at lobortis. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo.

Heading Three

Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean lacinia bibendum nulla sed consectetur. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Heading Four

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula ut id elit.

Heading Five

Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo.

Heading Six

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Duis mollis, est non commodo luctus, nisi erat porttitor.

Add a Blockquote with an Optional Citation

A block quote is recommended for presenting a quote or testimonial in your content with a bold and visually engaging presentation. This can optionally include a citation for the author.

To add a block quote:

Add or edit a Content element.
Type in the text for your quotation (one or more paragraphs).
To add an optional citation, press the space key at the end of the quote and type in the author’s name.
Highlight both the quote and the citation with your cursor.
Click on the ‘Block quote’ icon button in the content editor toolbar.
Deselect the highlighted text and then highlight the author’s name specifically with your cursor.
Click on the ‘Styles’ drop-down in the content editor toolbar.
Select ‘citation’ from the dropdown list.

Tip: If you cannot see the ‘Block quote’ icon button in the content editor toolbar, click on the arrow toggle at the far right of the toolbar to display the full set of controls available.

Block Quote Example

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Author Citation

Add a Text Callout

A text callout is a short paragraph or text excerpt with a bold presentation. It is designed to highlight an important message on the page.

To add a text callout:

Add or edit a Content element.
Type in the callout text (one or more paragraphs).
Highlight the text with your cursor.
Click on the ‘Styles’ drop-down in the content editor toolbar.
Select ‘callout-content’ from the dropdown list.

Content Callout Example

Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Praesent commodo cursus magna vel scelerisque.

Add a Callout Box

A callout box is a Content element that displays as a visually engaging box for highlighting an important message on the page. It displays text content with an optional image at the top and is available in dark and light color treatments.

To add a callout box with an image, begin by uploading the image to the Resources module:

Click on the ‘folder’ icon button in Composer’s left navigation to access Resources.
Click on the ‘Resources’ tab.
Create or select an existing folder for your image in the ‘Public’ directory
Click on the ‘Add Public Resource’ button at the top right of the Resources interface.
Choose from the upload options available and upload the new image.
Once the upload is complete, update the following image properties in the ‘Edit Resource Details’ window:
- Click into the ‘Title’ field and add a short title for your image (this is for internal use and will not be seen by the visitor).
- Click into the ‘Alt Text’ field and add a short description explaining the contents of the image. This is used by screen reading software to describe the image for visitors who are unable to see it.
Click on the ‘Save’ button at the bottom of the ‘Edit Resource Details’ window.

Image Size: The recommended width for a callout box image is 1200px. There is no minimum or maximum height requirement.

To add a callout box to a page:

Add or edit a Content element.
Type in the text for the callout box (such as a ‘Heading Two’ title, one or more normal paragraphs and links to further information).
Hover over the element and click on the ‘gear’ icon in the top-right corner.
Click on ‘+ Design’ in the ‘Edit Content Element Settings’ window.
Click into the ‘Custom Class’ field and type in one of the following custom class combinations to apply the desired callout box treatment:

Class Name	Description
callout-box-dark	Callout box with white text and the website’s primary color in the background.
callout-box-light color-1	Callout box with a light gray background and a thick bottom border in the website’s primary color.
callout-box-light color-2	Callout box with a light gray background and a thick bottom border in the website’s accent color.

With the ‘Edit Content Element Settings’ window still open, optionally add an image to the top of the callout box. If an image is not required, please proceed directly to step four in the following instructions:

Click into the ‘Header Content’ content editor.
Click on the ‘Image’ icon button in the content editor toolbar.
Select the image uploaded previously in the ‘Pick a Resource’ window.
Click on the ‘Save’ button in the ‘Edit Content Element Settings’ window.

Important: When setting up a light callout box, an empty space must be added between the ‘callout-box-light’ class and your chosen color class to ensure that it displays with the correct presentation (for example: ‘content-box-light color-1’).

Note: Dark callout boxes are only compatible with the following types of content, which will display in white automatically:

Headings
Regular paragraphs
Normal links
Bulleted/unordered lists
Links with an arrow icon
Buttons with the ‘button on dark’ style applied.

Callout Box Example

Custom Class: callout-box-dark

Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec id elit non mi porta gravida at eget metus. Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Add a Styled Table

Styled table formatting is recommended for all tables in your website to display tabular data with a clear and visually-engaging presentation.

To add a styled table:

Add or edit a Content element.
Click on the ‘Table’ icon button in the content editor toolbar.
Update the ‘Rows’ and ‘Columns’ fields based on your requirements.
Type ‘100%’ into the ‘Width’ field.
Optionally set the ‘Headers’ dropdown to ‘First Row’. This will apply distinctive styling to the first row of your table, in which to display the title of each column.
Click on the ‘Class’ drop-down and select ‘table-styled’.
Click on the ‘OK’ button in the ‘Table Properties’ window.
Type in the content for each table cell.

Important: Always apply the ‘table-styled’ style using the ‘Class’ dropdown in the ‘Table Properties’ window. Avoid using the ‘Styles’ dropdown in the content editor toolbar to achieve this because it may apply the style to the wrong part of the table and could result in an incorrect presentation.

Note: Tables must only be used for tabular data and are not recommended for laying out content. Please use the Layout element for this instead to ensure the content displays effectively on all devices.

Tip: To update the settings of a table that already exists, right-click on the table within the content editor and select ‘Table Properties’ from the action menu.

Styled Table Example

Table Header	Table Header	Table Header
Table Data	Table Data	Table Data
Table Data	Table Data	Table Data
Table Data	Table Data	Table Data
Table Data	Table Data	Table Data

Add a Button

A button is an eye-catching link with a bold presentation for directing the visitor to important web pages and resources. Multiple button styles are available and large buttons support an optional description below the title.

To add a button:

Add or edit a Content element.
Type in the button label.
For the large button only, optionally type in a short sub-description directly after the label (without pressing the return key) and format this description in italics.
Highlight the button label (and description if you have one) with your cursor.
Click on the ‘Link’ icon in the content editor toolbar.
Choose ‘Add Link’ from the dropdown list.
Select a link type from the top of the ‘Link’ properties window.
Configure the link settings and make sure that the ‘Open link in a new tab’ checkbox is only ticked if the link opens an external website.
Click on the ‘Class’ drop-down in the ‘Link’ properties window and select one of the button styles described in the table below to apply the desired button style.
Click on the ‘OK’ button at the bottom of the ‘Link Properties’ window.

Name	Purpose
button-1	Small button with a transparent background and a thin gray border.
button-2	Small button with a transparent background and a thin border in the website's primary color.
button-3	Small button with a transparent background and a thick bottom border in the website's accent color.
button-4	Small button with white text and the website's primary color in the background.
button-download	Small button with a download icon, a light gray background and a thick gray border.
button-link	Small button with a link icon, a light gray background and a thick gray border.
button-large	Large button with the website's primary color in the background and optional subtext.
button-arrow	Small text link in uppercase letters with an arrow icon in the website's primary color.
button-on-dark-1	Small button with a transparent background and white text with a thin white border for use in dark callout boxes.
button-on-dark-2	Small button with a white background for use in dark callout boxes.
button-on-dark-3	Small button with white text and a darker shade of the website's primary color in the background for use in dark callout boxes.
button-arrow-on-dark	Small text link in uppercase letters with an arrow icon in white for use in dark callout boxes.

By default, the width of a button is determined by the length of its text label. Button treatments that include a border as part of their styling can optionally be set to display at the full-width of the available space with the following updates:

Edit a Content element containing the button you want to update.
Right-click on the button link and choose ‘Edit Link’ from the action menu.
Click on the ‘Class’ drop-down in the ‘Link’ properties window and select ‘button-expand’ as an additional class.
Click on the ‘OK’ button at the bottom of the ‘Link Properties’ window.

Note: The ‘button-expand’ class is compatible with all button styles with the exception of the ‘button-arrow’ and ‘button-on-dark’, which do not include a styled border.

Button Examples

button 1

Button 2

button 3

button Largewith an optional description

button-download

button-link

Buttons on Dark Background

Add an Image with a Description

When adding an image to a page, you can optionally display a supporting description below it to provide the visitor with additional information.

Begin by uploading the image to Composer:

Click on the ‘folder’ icon button in Composer’s left navigation to access Resources.
Click on the ‘Resources’ tab.
Create or select an existing folder for your image in the ‘Public’ directory.
Click on the ‘Add Public Resource’ button at the top right of the Resources interface.
Choose from the upload options available and upload the new image.
Once the upload is complete, update the content in the ‘Edit Resource Details’ window:
- Click into the ‘Title’ field and add a title for your image (this is for internal use and will not be seen by the visitor).
- Click into the ‘Description’ content editor and add a short sentence (no maximum length).
- Click into the ‘Alt Text’ field and add a short description explaining the contents of the image for visitors who are unable to see it.
Click on the ‘Save’ button at the bottom of the ‘Edit Resource Details’ window.

With the image uploaded, add the image and its description to a page:

Go to the ’Pages’ panel and select the desired page.
Add or edit a Resource element.
Hover over the element and click on the ‘gear’ icon in the top-right corner.
Click on the ‘Single’ tab at the top of the ‘Edit Resource Element Settings’ window.
Click on the ‘Browse’ button
Select the uploaded image in the ‘Pick a Resource’ window.
With the ‘Edit Resource Element Settings’ window still open, click on ‘+ Image’.
Click on the ‘Default Description’ to show the description text added when you uploaded the image to the Resources module. Alternatively click on ‘Custom’ and type in a new description that will only display for this specific element.
Click on the ‘Save’ button at the bottom of the ‘Edit Resource Element Settings’ window.

Image Size: The recommended width for images is 1200px in the main content area and 800px in the sidebar. There are no minimum or maximum height requirements.

There are no resources or collections to display

Add a Calendar of Events

The Calendar element lets you display event information from the Calendar Manager on the pages in your website.

If you don’t have any events in the Calendar manager, we recommend adding one or more events first. To learn how to do this, please read our Knowledge Base article on Uploading Calendar Events.

To add add a list calendar to a page:

Click on ‘Add Element’ and add a Calendar element from the ‘Module’ tab in the ‘Add Element’ window.
Hover over the new element and click on the ‘gear’ icon in the top-right corner.
Click on the ‘List’ tab at the top of the ‘Edit Calendar Element Settings’ window.
Add a new title to the ‘Title’ field. If a title is not required, click on the blue toggle to the right of the field to hide it.
Click on ‘+ General Settings’.
Click on the ‘Calendars’ dropdown and select the desired calendars.
Optionally update the field specifying the number of event items to display.
Click on the ‘Save’ button at the bottom of the ‘Edit Calendar Element Settings’ window.

Tip: The Calendar element has a wide range of content options and display settings. We recommend trying out different combinations to find the best fit for your needs.

Calendar List Example

There are no events to display

Add a List of Posts

The Post element lets you display posts from boards and/or collections in the Posts module on the pages in your website.

If you don’t have any posts in the Posts module, we recommend adding one or more posts first. To learn how to do this, please read our Knowledge Base article on how to Getting Started with Posts.

To add a list of posts to a page:

Add a Post element from the ‘Module’ tab in the ‘Add Element’ window.
Hover over the new element and click on the ‘gear’ icon in the top-right corner.
Click on the ‘List’ tab at the top of the ‘Edit Post Element Settings’ window.
Add a new title to the ‘Title’ field. If a title is not required, click on the blue toggle to the right of the field to hide it.
Click on ‘+ Content Filters’.
Click on the ‘Select Board’ button and choose one or more boards that you want to display in this Post list.
Click on ‘+ Content Details’.
Tick the checkboxes for the content you want to display for each post in the list.
Click on ‘+ Pop-up Details’ in the ‘Edit Post Element Settings’ window.
Tick the content details you would like to include in the post pop-up or page that displays when the visitor clicks on the post to read more.
Click on ‘+ Formatting’.
Optionally update the field specifying the number of posts on display in the list.
Click on the ‘Save’ button at the bottom of the ‘Edit Post Element Settings’ window.

Note: By default, the full content of a post will open in a pop-up, but you also have the option to open each post on a dedicated page. This makes it easier to link to and is also beneficial for Search Engine Optimization (SEO). Learn more about how to set up a Post page in our Knowledge Base article on how to Build a Posts Page.

Tip: The Posts element offers a wide range of options and display settings to suit your needs. We recommend testing out different combinations to find the best fit for your content.

Posts List Example

No post to display.

Add an Accordion Element

The Accordion element lets you organize large amounts of content over a series of vertically-stacked panels that can be shown or hidden by the visitor. Splitting information using this element makes it easier for the visitor to explore.

To add an Accordion element:

Add an Accordion element from the ‘Layout’ section in the ‘Add Element’ window. This will insert an accordion with one panel that has the title ‘New Panel’.
Hover over the panel title and click on the ‘gear’ icon to the right of it.
Click into the ‘Title’ field in the ‘Edit Panel Element Settings’ window to add a new title for your panel and click on the ‘Save’ button.
Click on the panel title displaying on the page to open the panel content area
Populate the panel with new content. This can include one or more elements of any type and includes an empty Content element by default to get you started.
Click on the ‘Add Panel’ button at the bottom of the Accordion element to add a second panel.
Repeat steps 2 to 6 for each panel required.

Note: To learn more about the Accordion element, please read our Knowledge Base article on how to Customise an Accordion or Tabs Element.

Tip: Accordions are best suited to content that can be divided up easily with the flexibility for longer titles. A good example of this could be a set of questions and answers on a ‘Frequently Asked Questions’ page. They will also work well in narrower spaces.

Accordion Example

Accordion Panel One Title

Accordion Panel Two Title

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio Nam ut convallis diam. Cras urna arcu, vulputate eu blandit sed, porttitor et lorem. Nunc ac laoreet diam. Proin maximus id neque vel placerat. Morbi euismod ullamcorper sapien at luctus. Morbi vel mauris sollicitudin, blandit magna quis, varius nulla. Etiam lobortis ut tortor vel lobortis. Vestibulum lobortis dolor gravida.

Accordion Panel Three Title

Nam eget nisl eget nisi maximus semper. Praesent vel dui viverra, egestas leo at, venenatis tellus. Maecenas non metus sit amet risus dictum ultrices. Quisque eu tortor elit. Cras eget tortor tempor, aliquet justo vel, euismod nibh. Duis nisi nibh, ornare et dolor sit amet, semper semper tellus. Nulla tempor, eros vel malesuada laoreet, lorem arcu mollis arcu, eget consectetur sapien odio sit amet eros.

Add a Tabs Element

The Tabs element lets you organize a large amount of content into a series of panels that occupy the same space on the page. Splitting up information using this element makes it easier for the visitor to explore.

To add a Tabs element:

Add a Tabs element from the ‘Layout’ section in the ‘Add Element’ window. This will insert a tabs element with one panel that has the title ‘New Panel’.
Hover over the panel title and click on the ‘gear’ icon to the right of it.
Click into the ‘Title’ field in the ‘Edit Panel Element Settings’ window to add a new title for your panel and click on the ‘Save’ button.
Populate the panel with new content. This can include one or more elements of any type and includes an empty Content element by default to get you started.
Click on the ‘Add Tab’ button to add a second panel to the set of tabs.
Repeat steps 2 to 6 for each panel required.

Tip: Tabs are best suited to content split over a smaller number of panels with short titles. If the number of tabs exceeds one row on desktop screen resolutions, consider using an Accordion element to organize the content instead.

Note: Tabs will automatically display as accordions on mobile phones and other narrow devices to improve ease of use for the visitor.

To learn more about the Tabs element, please read our Knowledge Base article on how to Customise an Accordion or Tabs Element.