Instructions

The homepage of your website consists of the following main sections: 

• Header with a drop-down mega menu navigation
• Hero slideshow displaying images and/or videos, each with an optional supporting title, description and button link. 
• ‘Welcome’ panel displaying a short text introduction with a supporting image.
• One of the following two panel options*:
  • ‘Featured Slideshow’ panel displaying a slideshow of image buttons linking to important pages
  • Social Media Feeds
• ‘News & Events’ panel displaying news and events highlights 
• Footer displaying contact details, useful links and a supporting text statement
• A row of accreditation logos if you have chosen to enable this feature during the intake phase of your website deployment

* Please note the desired panel option is chosen during the intake phase of your website deployment and cannot be changed once the buildout of your website has started.

Important: The homepage has a fully custom design and is only compatible with these specific features. Please follow the instructions for this section closely when updating the homepage to ensure the content displays correctly.

The hero displays a visually-engaging slideshow of full-width images and/or videos to introduce visitors to your school. This is powered by a single .

Each slide in the slideshow can optionally display a supporting title, description and link overlaying the chosen hero media. This content is populated through the properties of the image or video in the and can be used to highlight a key differentiator and/or promote an important page on your website.

Begin by uploading the image or video to the :

1. Click on the ‘folder’ icon button in Composer’s to access . 
2. Click on the ‘Resources’ tab.
3. for your hero media within the ‘Public’ directory. 
4. Click on the ‘Add Public Resource’ button at the top right of the Resources interface
5. Choose from the and upload a new image or video.

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

Once the upload is complete, update the properties in the ‘Edit Resource Details’ window to configure the information on display for the optional supporting content that overlays the panel and to make the file accessibility-compliant:

1. Click into the ‘Title’ field and add a short title for the image or video. This will display as large text overlaying the bottom-left of the hero.
2. Click into the ‘Description’ content editor to add a text statement and button link. This will display in a smaller text below the title overlaying the bottom-left of the hero:
   1. Type in a short text statement describing the image (25 words maximum). 
   2. Press the return key and type in a title for a link.
   3. Highlight this title 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. and make sure that the ‘Open link in a new tab’ checkbox is only ticked if the link opens an external webpage.
   8. Click on the ‘Class’ drop-down in the ‘Link’ properties window and select the ‘button on dark’ class.
   9. Click on the ‘OK’ button at the bottom of the ‘Link Properties’ window.
3. If you are uploading an image, 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. If you are uploading a video, apply the same update for the ‘Thumbnail Alt Text’ field.
4. Click on the ‘Save’ button at the bottom of the ‘Edit Resource Details’ window.

Finally, add the image or video to the Homepage hero :

1. Click on the ‘folder’ icon button in Composer’s to access . 
2. Click on the ‘Galleries’ tab.
3. Select ‘Windsor Home Hero’ under ‘Public Galleries’.
4. Click on the ‘Add Public Resource' button at the top-right of the gallery interface.
5. Select the image or video you have uploaded to add it to the gallery.
6. Optionally drag and drop the image or video within the gallery to reorder the slides.
7. 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 homepage hero slideshow automatically.

Note: Please note that to optimize loading speeds, the hero slideshow has an automatic limit of 20 images on the homepage. Autoplay videos are also limited to 30 seconds in length, at which point they will advance to the next slide. 

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

The order of the slides in the hero slideshow is based on the order of the images and/or videos within the that powers this content.

To reorder the slides:

1. Click on the ‘folder’ icon button in Composer’s to access . 
2. Click on the ‘Galleries’ tab.
3. Select ‘Windsor Home Hero’ under ‘Public Galleries’.
4. Drag and drop the image or video within the gallery to reorder the slides.
5. Click the ‘Update’ button at the bottom-right of the gallery interface.

Once the gallery has been updated, the images and/or in the homepage hero slideshow will display in the updated order.

To remove an existing image or video from the hero slideshow:

1. Click on the ‘folder’ icon button in Composer’s to access . 
2. Click on the ‘Galleries’ tab.
3. Select ‘Windsor Home Hero’ under ‘Public Galleries’.
4. Hover over the image or video you want to remove and click on the ‘tick’ icon. This will select the file and open the ‘Resources Selected’ panel on the right of the gallery interface.
5. Click the ‘Remove from Gallery’’ button in the ‘Resources Selected’ panel.
6. Click the ‘Update’ button at the bottom-right of the gallery interface.

Once the gallery has been updated, images or videos that have been removed from the will no longer display in the slideshow.

Note: Removing images or videos from a will remove them from the pages this gallery is set to display on, but the files themselves will still exist in the in case you want to use them again.

The ‘Welcome’ panel displays a short text-based welcome message from the school principal, with a supporting image alongside it.

The welcome message consists of a title, a subtitle highlighting the name of the principal, a succinct text area for the principal’s introduction to the website and an optional button link to further information. 

To update the welcome message:

1. Go to the and select the homepage.
2. Turn on the ‘Compose’ toggle in the bar at the bottom of the page interface.
3. Refresh the page in your web browser.
4. Scroll to the ‘Welcome’ panel.
5. Hover over the displaying the welcome message and click on the ‘gear’ icon in the top-right corner.
6. Click into the ‘Title’ field in the ‘Edit Content Element Settings’ window.
7. Update the text displaying the title of the welcome message.
8. Click on ‘+ Design’ to view additional element settings.
9. Click into the ‘Header Content’ content editor and update the text displaying the name of the principal, making sure to keep the ‘Heading 6’ formatting applied.
10. Click into the ‘Footer Content’ content editor and , making sure to keep the ‘button 2’ class applied. If you would prefer not to display a button, you can optionally delete this link
11. Click on the ‘Save’ button at the bottom of the ‘Edit Content Element Settings’ window.
12. Hover over the displaying the welcome message once more and click on the ‘Edit Content’ button.
13. Update the welcome text. To maintain consistency with the original design, we recommend restricting this to a maximum of 45 words.
14. Click on the ‘Save’ button at the bottom of the content editor.

Note: If you would prefer not to include a button in the welcome message, you can optionally delete this link within the ‘Footer Content’ content editor during step 10.

Begin by uploading the new image to the :

1. Click on the ‘folder’ icon button in Composer’s to access . 
2. Click on the ‘Resources’ tab.
3. Create or select an existing folder for your image in the ‘Public’ directory 
4. Click on the ‘Add Public Resource’ button at the top right of the Resources interface.
5. Choose from the and upload the new image.
6. 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 logo. This is for internal use and will not display in the logo area.
   • 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.
7. Click on the ‘Save’ button at the bottom of the ‘Edit Resource Element Settings’ window.

Image Size: The recommended size for images in the mega menu navigation is 1200px (wide) by 1200px (high). 

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

1. Turn on the ‘Compose’ toggle in the bar at the bottom of the page interface.
2. Refresh the page in your web browser.
3. Scroll down to the ‘Welcome’ section.
4. Hover over the displaying the welcome message and click on the ‘gear’ icon in the top-right corner.
5. Click on the ‘Browse’ button directly below the ‘Title’ field in the ‘Edit Resource Element Settings’ window and select the image uploaded previously from the ‘Pick a Resource’ window.
6. Click on the ‘Save’ button at the bottom of the ‘Edit Resource Element Settings’’ window.

‘Featured Slideshow’ is one of two panel options that are available to choose from on the homepage during the intake phase of your website deployment. 

The panel consists of a title, followed by a large slideshow of visually-engaging image buttons promoting up to ten important differentiators about your school. Each image button displays a title, a short text summary, a supporting image and a ‘Read More’ link that opens a pop-up with more information on click.

Please note that once the buildout of your website has started, this panel cannot be changed. If your website has the ‘Featured Slideshow’ panel, please refer to the instructions in this section on how to update it.

1. Go to the and select the homepage.
2. Turn on the ‘Compose’ toggle in the bar at the bottom of the page interface.
3. Refresh the page in your web browser.
4. Scroll to the ‘Featured Slideshow’ panel.
5. Hover over the and click on the ‘gear’ icon in the top-right corner.
6. Click into the ‘Title’ field in the ‘Edit Feeds Element Settings’ window.
7. Update the title text.
8. Click on the ‘Save’ button at the bottom of the ‘Edit Post Element Settings’ window.

Each image button in this panel is set up as an individual post within the ‘Windsor hp Featured Slideshow‘ board in the . To add a new post, begin by uploading the background image for the button:

1. Click on the ‘folder’ icon button in Composer’s to access . 
2. Click on the ‘Resources’ tab.
3. for your image in the ‘Public’ directory 
4. Click on the ‘Add Public Resource’ button at the top right of the Resources interface.
5. Choose from the and upload the new image.
6. Once the upload is complete, click into the ‘Title’ field in the ‘Edit Resource Details’ window and add a title for your image (this is for internal use and will not be seen by the visitor).
7. 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.
8. 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 1600px (wide) by 814px (high).

With the image uploaded, create a new post:

1. Click on the ‘Modules’ tab in Composer’s and select .
2. Click on the ‘Boards’ tab.
3. Select the ‘Windsor HP Featured Slideshow’ board.
4. Click on the ‘Create Post’ button at the top right of the Board interface
5. Add the content for your new post:
   • Click into the ‘Title’ field and add a short title. This will display as large text overlaying the bottom-left of the image button.
   • Click into the ‘Body Content’ content editor and add the content for the pop-up that displays when the visitor clicks on the ‘Read More’ button. Alternatively, you can click on the ‘External Redirect URL’ tab and link the Post to a different webpage.
   • Click on the ‘Summary’ panel and type a short description into the content editor (20 words maximum). This will display in a smaller text below the title overlaying the bottom-left of the image button.
   • Click on the ‘Thumbnail & Resource’ panel.
   • Click on the ‘Browse’ button and select the uploaded image from the ‘Pick a Resource’ window. This will display in the background of the image button.
6. Click on the ‘Save’ button at the bottom right of the Post interface.
7. Click on ‘Yes’ in the ‘Publish Now’ window to publish the post immediately.

Once the post has been published, it will display in the image button slideshow automatically as long as it is one of the ten most recent posts in the board. The posts are set to display in date order.

Note: To learn more about adding posts please read our Knowledge Base article on how to .

To reorder an image button within the image button slideshow, update the start date of the post displaying this content in the . The image buttons display in date order by default:

1. Click on the ‘Modules’ tab in Composer’s and select .
2. Click on the ‘Boards’ tab.
3. Select the ‘Windsor HP Featured Slideshow’ board.
4. Select the post that you want to reorder
5. Click into the ‘Start Date’ field and update the date setting. If the start date is more recent than that of another post, the image button will display before it in the slideshow. If the start date is older than another post, the image button will display after it.
6. Click on the ‘Update’ button at the bottom of the post interface.

To remove an image button, delete the post displaying this content from the :

1. Click on the ‘Modules’ tab in Composer’s and select .
2. Click on the ‘Boards’ tab.
3. Select the ‘Windsor HP Featured Slideshow’ board.
4. Select the post that you want to remove.
5. Click on the ‘Delete’ icon button at the bottom of the post interface.
6. Confirm you want to delete the post in the ‘Delete Post’ validation window.

‘Social Media Feed’’ is one of two panel options that are available to choose from on the homepage during the intake phase of your website deployment. It features a three column grid of live with a button to ‘Load more’.

Please note that once the buildout of your website has started, this panel cannot be changed. If your website has the ‘Social Media Feed’ panel, please refer to the instructions in this section on how to update it.

1. Go to the and select the homepage.
2. Turn on the ‘Compose’ toggle in the bar at the bottom of the page interface.
3. Refresh the page in your web browser.
4. Scroll to the ‘Social Media Feed’ panel.
5. Hover over the and click on the ‘gear’ icon in the top-right corner.
6. Click into the ‘Title’ field in the ‘Edit Feeds Element Settings’ window.
7. Update the title text.
8. Click on the ‘Save’ button at the bottom of the ‘Edit Feeds Element Settings’’ window.

The grid of social media feeds is powered by a single and can be set to display content from multiple social media sources:

1. Go to the and select the homepage.
2. Turn on the ‘Compose’ toggle in the bar at the bottom of the page interface.
3. Refresh the page in your web browser.
4. Scroll to the ‘Social Media Feed’ panel.
5. Hover over the and click on the ‘gear’ icon in the top-right corner.
6. Click on the ‘Sources’ dropdown and select the desired social media sources.
7. Click on the ‘Save’ button at the bottom of the ‘Edit Feeds Element Settings’ window.

Tip: To learn more about adding posts please read our Knowledge Base article on .

The ‘News & Events’ panels displays a selection of recent news articles and upcoming event highlights with the following key features:

• ‘Featured’ News Stories Slideshow: A large slideshow displaying a selection of important news stories or announcements. Each slide consists of the story title, a short text summary, a thumbnail image and a ‘Read More’ button. The visitor can click on a story to view further story details in a pop-up.

• ‘Latest News’ List: A list of three recent news stories, each displaying the story title and a ‘Read This Article’ link. The visitor can click on a story to view further story details in a pop-up or click on an ‘View All News’ button at the top right of the list to view the full latest news page. 
• ‘Calendar’ List: A list of three upcoming events from the school calendar. Each event consists of the event date, title, time and location. The visitor can click on an event to view further details in a pop-up or click on a ‘View Full Calendar’ link at the top right of the list to access the full school calendar.

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

1. Go to the and select the homepage.
2. Turn on the ‘Compose’ toggle in the bar at the bottom of the page interface.
3. Refresh the page in your web browser.
4. Scroll to the ‘News & Events’ panel.
5. Hover over the displaying the ‘Featured’ news stories slideshow and click on the ‘gear’ icon in the top-right corner.
6. Click into the ‘Title’ field in the ‘Edit Post Element Settings’ window.
7. Update the title text.
8. Click on the ‘Save’ button at the bottom of the ‘Edit Post Element Settings’ window.

The ‘Featured’ news stories slideshow is powered by a single that is set to show the latest 5 posts from one or more selected boards in the .

To configure the posts that display in the list:

1. Go to the and select the homepage.
2. Turn on the ‘Compose’ toggle in the bar at the bottom of the page interface.
3. Refresh the page in your web browser.
4. Scroll to the ‘News & Events’ panel.
5. Hover over the displaying the ‘Featured’ news stories slideshow and click on the ‘gear’ icon in the top-right corner.
6. Click on ‘+ Content Filters’ in the ‘Edit Post Element Settings’ window.
7. Click on the ‘Select Board’ button and choose one or more boards that you want to feed into this Post list.
8. Click on ‘+ Formatting’ to optionally update the number of posts on display.
9. Click on the ‘Save’ button at the bottom of the ‘Edit Post Element Settings’ window.

Note: When updating this , 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.

The stories in the ‘Featured’ news stories slideshow are powered by posts added to the . To add a new post, begin by uploading the image thumbnail for the post:

1. Click on the ‘folder’ icon button in Composer’s to access . 
2. Click on the ‘Resources’ tab.
3. for your news thumbnail in the ‘Public’ directory
4. Click on the ‘Add Public Resource’ button at the top right of the Resources interface.
5. Choose from the and upload the new image.
6. 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 logo (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 for visitors who are unable to see it.
7. Click on the ‘Save’ button at the bottom of the ‘Edit Resource Details’ window.

Image Size: The recommended image size for the news story thumbnail is 800px (wide) by 686px (high).

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

1. Click on the ‘Modules’ tab in Composer’s and select .
2. Click on the ‘Boards’ tab.
3. Select the board or boards on your website powering the ‘Featured’ news stories slideshow. In the default setup for this theme, this is the ‘Featured News’ board.
4. Click on the ‘Create Post’ button at the top right of the Board interface
5. Add the content for your new post:
   • Click into the ‘Title’ field and add a short headline for your story.
   • Click into the ‘Body Content’ content editor and add the full content of the news story.
   • Open the ‘Summary’ panel and type a short description in the content editor to introduce visitors to the story. This content will only display below the Post title in the ‘Featured’ news stories slideshow on the homepage. To maintain consistency with the original design, we recommend restricting this to a maximum of 45 words.
   • Open the ‘Thumbnail & Resource’ panel and click on the ‘Browse’ button to select the image you have uploaded for the thumbnail.
6. Click on the ‘Save’ button at the bottom right of the Post interface.
7. Click on ‘Yes’ in the ‘Publish Now’ window to publish the post immediately.

Once the post has been published, it will display in the ‘Featured’ slideshow automatically. The posts are set to display in date order.

Tip: To learn more about adding posts please read our Knowledge Base article on how to .

1. Go to the and select the homepage.
2. Turn on the ‘Compose’ toggle in the bar at the bottom of the page interface.
3. Refresh the page in your web browser.
4. Scroll to the ‘News & Events’ panel.
5. Hover over the displaying the ‘Latest News’ list and click on the ‘gear’ icon in the top-right corner.
6. Click into the ‘Title’ field in the ‘Edit Post Element Settings’ window.
7. Update the title text.
8. Click on the ‘Save’ button at the bottom of the ‘Edit Post Element Settings’ window.

The Latest News List is powered by a single that is set to show the latest 3 posts from one or more selected boards in the .

To configure the posts that display in the list:

1. Go to the and select the homepage.
2. Turn on the ‘Compose’ toggle in the bar at the bottom of the page interface.
3. Refresh the page in your web browser.
4. Scroll to the ‘News & Events’ panel.
5. Hover over the displaying the ‘Latest News’ list and click on the ‘gear’ icon in the top-right corner.
6. Click on ‘+ Content Filters’ in the ‘Edit Post Element Settings’ window.
7. Click on the ‘Select Board’ button and choose one or more boards that you want to feed into this Post list.
8. Click on the ‘Save’ button at the bottom of the ‘Edit Post Element Settings’ window.

Note: When updating this , 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.

The list of Latest News stories are powered by posts added to the . To add a new post:

1. Click on the ‘Modules’ tab in Composer’s and select .
2. Click on the ‘Boards’ tab.
3. Select the board or boards on your website powering the list of ‘Latest News’ stories.
4. Click on the ‘Create Post’ button at the top right of the Board interface
5. Click into the ‘Title’ field and add a short headline for your story.
6. Click into the ‘Body Content’ content editor and add the full content of the news story.
7. Click on the ‘Save’ button at the bottom right of the Post interface.
8. 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. The posts are set to display in date order.

Tip: To learn more about adding posts please read our Knowledge Base article on how to .

1. Go to the and select the homepage.
2. Turn on the ‘Compose’ toggle in the bar at the bottom of the page interface.
3. Refresh the page in your web browser.
4. Scroll to the ‘News & Events’ panel.
5. Hover over the displaying the ‘Latest News’ list click on the ‘gear’ icon in the top-right corner.
6. Click on ‘+ Design’ at the bottom of the ‘Edit Post Element Settings’ window.
7. Click into the ‘Header Content’ content editor.
8. Update the existing link text, making sure not to remove the link applied to it.
9. Right click on the link and choose ‘Edit Link’ from the action menu.
10. Select a link type from the top of the ‘Link’ properties window.
11. and make sure that the ‘Open link in a new tab’ checkbox is only ticked if the link opens a page on an external webpage.
12. Make sure the ‘link-arrow-style’ class is applied in the ‘Class’ field.
13. Click on the ‘OK’ button at the bottom of the ‘Link’ properties window.
14. Click on the ‘Save’ button at the bottom of the ‘Edit Post Element Settings’ window.

1. Go to the and select the homepage.
2. Turn on the ‘Compose’ toggle in the bar at the bottom of the page interface.
3. Refresh the page in your web browser.
4. Scroll to the ‘News & Events’ panel.
5. Hover over the and click on the ‘gear’ icon in the top-right corner.
6. Click into the ‘Title’ field in the ‘Edit Calendar Element Settings’ window.
7. Update the title text.
8. Click on the ‘Save’ button at the bottom of the ‘Edit Calendar Element Settings’ window.

The ‘Calendar’ list is powered by a that is set to display up to 3 upcoming events taking place within the next 30 days from one or more selected calendars in the .

To update the events on display in the list:

1. Go to the and select the homepage.
2. Turn on the ‘Compose’ toggle in the bar at the bottom of the page interface.
3. Refresh the page in your web browser.
4. Scroll to the ‘News & Events’ panel.
5. Hover over the and click on the ‘gear’ icon in the top-right corner.
6. Click on ‘+ General Settings’ in the ‘Edit Calendar Element Settings’ window.
7. Click on the ‘Calendars’ dropdown and select the desired calendars.
8. Optionally update the fields specifying the number of items to display and the date range this should be restricted to.
9. Click on the ‘Save’ button at the bottom of the ‘Edit Calendar Element Settings’ window.

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

Note: When updating this , 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.

1. Go to the and select the homepage.
2. Turn on the ‘Compose’ toggle in the bar at the bottom of the page interface.
3. Refresh the page in your web browser.
4. Scroll to the ‘News & Events’ panel.
5. Hover over the and click on the ‘gear’ icon in the top-right corner.
6. Click on ‘+ Design’ at the bottom of the ‘Edit Calendar Element Settings’ window.
7. Click into the ‘Header Content’ content editor.
8. Update the existing link text, making sure not to remove the link applied to it.
9. Right click on the link and choose ‘Edit Link’ from the action menu.
10. Select a link type from the top of the ‘Link’ properties window.
11. and make sure that the ‘Open link in a new tab’ checkbox is only ticked if the link opens a page on an external webpage.
12. Make sure the ‘link-arrow-style’ class is applied in the ‘Class’ field.
13. Click on the ‘OK’ button at the bottom of the ‘Link’ properties window.
14. Click on the ‘Save’ button at the bottom of the ‘Edit Calendar Element Settings’ window.

The default interior page layout includes an optional full-width hero section 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 :

1. Click on in Composer’s . 
2. Click on the ‘Resources’ tab.
3. within the ‘Public’ directory for your hero images. 
4. Click on the ‘Add Public Resource’ button at the top right of the Resources interface.
5. Choose from the and upload the new image.
6. Once the upload is complete, click into the ‘Title’ field in the ‘Edit Resource Details’ window and type in a title for your image (this is for internal use and will not be seen by the visitor).
7. 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.
8. 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 , 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 with the default header banner (Windsor v5 - Locations Header) applied in settings:

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

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

Add a Hero Image to a Group of Pages

A hero image required to display on multiple pages should be added to a new header banner, which can then be displayed on the pages it is required on within the settings.

To create the new header banner:

1. Go to the .
2. Scroll to ‘Headers’ in the and select ‘Windsor v5 - Locations Header’.
3. Click on the ‘Clone’ icon at the bottom-right corner of the banner interface.
4. 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).
5. Click on the ‘Clone Banner’ button.
6. With the cloned banner selected, scroll to the very bottom of the banner interface and add a new .
7. Hover over the element and click on the ‘gear’ icon in the top-right corner.
8. Click on the ‘Single’ tab at the top of the ‘Edit Resource Element Settings’ window.
9. Click on the blue toggle to the right of the ‘Title’ field to hide the element title.
10. Click on the ‘Browse’ button.
11. Find and select the image you want to display in the ‘Pick a Resource’ window.
12. Click on ‘+ Design’ near the bottom of the ‘Edit Resource Element Settings’ window.
13. Click into the ‘Custom Class’ field and type in ‘hero’.
14. Click on the ‘Save’ button.
15. Click the at the bottom-right of the banner interface.

To apply the new header banner to a page:

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

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

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

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 to best suit your content needs.

Setup the Default Sidebar Structure

To apply the default interior page layout to a page:

1. Go to the and select the desired page.
2. Click the ‘Compose’ toggle in the bar at the bottom of the page interface.
3. Refresh the page in your web browser.
4. Click on the ‘Page Layout & Appearance’ icon button to the right of the ‘Compose’ toggle.
5. Set the ‘Left Banner’ dropdown to ‘None’.
6. Set the ‘Right Banner’ dropdown to ‘None’.
7. 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.
8. 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. 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 setup as a left or right that is applied to a page with a single column layout within the settings.

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

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

1. Go to the .
2. Scroll to the ‘Left Banner’ section in the if you would like a left sidebar or the ‘Right Banner’ section if you would like a right sidebar.
3. Click on the green plus icon at the top of the chosen section to add a new banner.
4. 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, ‘Academic Sidebar’ for a sidebar that will be used throughout the ‘Academic’ section).
5. Populate the new banner with at least one element. 
6. Click the at the bottom-right of the banner interface.

Note: When updating a left or right banner within the , 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 automatically. 

Now apply your new sidebar banner to a page:

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

If the new sidebar banner has been applied to a parent page, you can optionally apply it to all of its child pages using the ‘Bulk Style’ option:

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

Tip: Once a sidebar banner has been applied to a page, we recommend updating its content within the page, like you would with any other element when the ‘Compose’ toggle is enabled. When working in this view, the banner will inherit the visual styling of your , which provides a clearer impression of how the feature will look once published.

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:

1. Add a to the top of the right sidebar.
2. Hover over the element and click on the ‘gear’ icon in the top-right corner.
3. Click on the blue toggle to the right of the ‘Title’ field in the ‘Edit Navigation Element Settings’ window to hide the element title.
4. Update the level setting options to match the following:
   • Starts 2 levels below Current Branch
   • Ends 5 levels below Starting Level
5. Click on ‘+ Design’ towards the bottom of the ‘Edit Resource Element Settings’ window.
6. Click into the ‘Custom Class’ field and type in ‘nav-sub’.
7. 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 . This will allow you to reuse the element on other interior pages with a similar setup very easily.

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:

1. Add or edit a to the top of the main content area.
2. Type in a short paragraph of text.
3. Highlight the text with your cursor.
4. Click on the ‘Styles’ drop-down in the content editor toolbar.
5. 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.

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 main color with an underline.

To insert a link:

1. Add or edit a .
2. Type in a word or short phrase describing the link.
3. Highlight this text 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. and make sure that the ‘Open link in a new tab’ checkbox is only ticked if the link opens an external webpage.
8. 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

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:

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

Note: When choosing a heading tag it is important to follow a . This is beneficial for 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.

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

To add a block quote:

1. Add or edit a .
2. Type in the quote text (one or more paragraphs).
3. To add an optional citation, press the space key at the end of the quote and type in the author’s name.
4. Highlight both the quote and the citation with your cursor.
5. Click on the ‘Block quote’ icon button in the content editor toolbar.
6. Deselect the highlighted text and then highlight the author’s name specifically with your cursor.
7. Click on the ‘Styles’ drop-down in the content editor toolbar.
8. 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

A content callout is a short paragraph or text excerpt with a bold presentation for highlighting an important message on the page.

To add a content callout:

1. Add or edit a .
2. Type in the callout text (one or more paragraphs).
3. Highlight the text with your cursor.
4. Click on the ‘Styles’ drop-down in the content editor toolbar.
5. 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.

A callout box is a that displays as a visually-engaging box to highlight an important message on the page. It may include text content with an optional image at the top and is available in a dark or light color treatment.

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

1. Click on in Composer’s
2. Click on the ‘Resources’ tab.
3. for your image in the ‘Public’ directory.
4. Click on the ‘Add Public Resource’ button at the top right of the Resources interface.
5. Choose from the and upload the new image.
6. Once the upload is complete, click into the ‘Title’ field in the ‘Edit Resource Details’ window and add a title for your image (this is for internal use and will not be seen by the visitor).
7. 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.
8. 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:

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

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:

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

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

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

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:

1. Add or edit a .
2. Click on the ‘Table’ icon button in the content editor toolbar.
3. Update the ‘Rows’ and ‘Columns’ fields based on your requirements.
4. Type ‘100%’ into the ‘Width’ field.
5. 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.
6. Click on the ‘Class’ drop-down and select ‘table - styled’.
7. Click on the ‘OK’ button in the ‘Table Properties’ window.
8. 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 and other forms of content. Please use the for this instead to ensure the content displays effectively on all devices.

Tip: To update the setting 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

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:

1. Click on in Composer’s .
2. Click on the ‘Resources’ tab.
3. for your image in the ‘Public’ directory.
4. Click on the ‘Add Public Resource’ button at the top right of the Resources interface.
5. Choose from the and upload the new image.
6. 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.
7. 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:

1. Go to the and select the desired page.
2. Add or edit a .
3. Hover over the element and click on the ‘gear’ icon in the top-right corner.
4. Click on the ‘Single’ tab at the top of the ‘Edit Resource Element Settings’ window.
5. Click on the ‘Browse’ button
6. Select the uploaded image in the ‘Pick a Resource’ window.
7. With the ‘Edit Resource Element Settings’ window still open, click on ‘+ Image’.
8. Click on the ‘Default Description’ to show the description text added when you uploaded the image to the . Alternatively click on ‘Custom’ and type in a new description that will only display for this specific element.
9. 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.

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:

1. Add or edit a .
2. Type in the button label. 
3. 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.
4. Highlight the button label (and description if you have one) with your cursor.
5. Click on the ‘Link’ icon in the content editor toolbar.
6. Choose ‘Add Link’ from the dropdown list.
7. Select a link type from the top of the ‘Link’ properties window.
8. and make sure that the ‘Open link in a new tab’ checkbox is only ticked if the link opens an external website.
9. 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.
10. Click on the ‘OK’ button at the bottom of the ‘Link Properties’ window.

By default, the width of a button is based on the length of its 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:

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

Note: The ‘button - expand’ class is compatible with all buttons with the exception of the ‘link-arrow-style’, which does not include a styled border.

Important: When adding a button, please follow these steps in the exact order described to ensure that it displays with the correct presentation.

Button Examples

Button Small 1

Button Small 2

Button Large 1 with an optional description

Button - Download

Button - Link

The lets you display event information from the 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 .

To add add a list calendar to a page:

1. Click on ‘Add Element’ and add a from the ‘Module’ tab in the ‘Add Element’ window. 
2. Hover over the new element and click on the ‘gear’ icon in the top-right corner. 
3. Click on the ‘List’ tab at the top of the ‘Edit Calendar Element Settings’ window.
4. 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.
5. Click on ‘+ General Settings’.
6. Click on the ‘Calendars’ dropdown and select the desired calendars.
7. Optionally update the field specifying the number of event items to display.
8. Click on the ‘Save’ button at the bottom of the ‘Edit Calendar Element Settings’ window.

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

The lets you display posts from boards and/or collections in the 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 .

To add add a list of posts to a page:

1. Add a from the ‘Module’ tab in the ‘Add Element’ window. 
2. Hover over the new element and click on the ‘gear’ icon in the top-right corner.
3. Click on the ‘List’ tab at the top of the ‘Edit Post Element Settings’ window.
4. 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.
5. Click on ‘+ Content Filters’.
6. Click on the ‘Select Board’ button and choose one or more boards that you want to display in this Post list.
7. Click on ‘+ Content Details’.
8. Tick the checkboxes for the content you want to display for each post in the list.
9. Click on ‘+ Pop-up Details’ in the ‘Edit Post Element Settings’ window.
10. 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.
11. Click on ‘+ Formatting’.
12. Optionally update the field specifying the number of posts on display in the list.
13. 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 . Learn more about how to set up a Post page in our Knowledge Base article on how to Build a .

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.

The 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:

1. Add an from the ‘Layout’ section in the ‘Add Element’ window. This will insert an accordion with one panel that has the title ‘New Panel’.
2. Hover over the panel title and click on the ‘gear’ icon to the right of it.
3. 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. 
4. Click on the panel title displaying on the page to open the panel content area
5. 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.
6. Click on the ‘Add Panel’ button at the bottom of the Accordion element to add a second panel.
7. 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 .

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.

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

To add a Tabs element:

1. Add a from the ‘Layout’ section in the ‘Add Element’ window. This will insert a tabs element with one panel that has the title ‘New Panel’.
2. Hover over the panel title and click on the ‘gear’ icon to the right of it.
3. 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. 
4. 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.
5. Click on the ‘Add Tab’ button to add a second panel to the set of tabs.
6. 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 .