Footer 12 Instructions

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 12	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 Footer quick links Text statement Footer background image A row of accreditation logos Footer utility links

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
Panel Background Image	2200	685

* The footer logo is set to display with a maximum height of 40px 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 apply the default footer to a specific page:

1. Go to the ’Pages’ panel 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 ‘Footer’ dropdown to ‘TB Footer 12’.
6. Check that the ‘Theme’ dropdown is set to ‘FS Theme Builder’.
7. 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.

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: 

1. Go to the ‘Banners’ panel.
2. Scroll to ‘Footers’ in the left navigation and select ‘TB Footer 12’.
3. 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. 
4. 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. 
5. 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:

1. Click on the ‘folder’ icon button in Composer’s left navigation to access the Resources module. 
2. Click on the ‘Resources’ tab.
3. 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.
4. Click on the ‘Replace Resource’ icon button, which is located in the row of buttons at the top properties panel below the preview thumbnail.
5. Choose from the options available to upload a new logo image.
6. Once the upload is complete, update the following image properties in the resource’s properties panel to reflect the new image:
   • 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.

To upload a new logo image:

1. Click on the ‘folder’ icon button in Composer’s left navigation to access the Resources module. 
2. Click on the ‘Resources’ tab.
3. Create or select an existing folder for your logo within the ‘Public’ directory. 
4. Click on the ‘Add Public Resource’ button at the top right of the Resources interface.
5. Choose from the options available to upload the new logo image.
6. 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.
7. 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:

1. Click on the pink gear icon to access the Location Element settings
2. Expand the Design tab
3. 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.

1. Click on the pink gear icon to access the Location Element settings
2. Expand the Design tab
3. 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:

1. Hover over the ‘Modules’ tab in Composer’s left navigation and select Locations.
2. Click on the ‘Locations’ tab.
3. Select the location profile displaying the logo image you want to update.
4. Scroll to the ‘Thumbnail’ field and click on the ‘Browse’ button.
5. Select the logo image you have uploaded previously in the ‘Pick a Resource’ window.
6. 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:

1. Click on the ‘Modules’ tab in Composer’s left navigation and select Locations.
2. Click on the ‘Locations’ tab.
3. Select the location profile displaying the school name and/or optional tagline you want to update.
4. 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.
5. 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.

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:

1. Go to the ‘Banners’ panel.
2. Scroll to ‘Footers’ in the left navigation and select ‘TB Footer 12’.
3. Scroll to the Location element displaying the contact information in the footer banner interface.
4. Hover over the element and click on the ‘gear’ icon in the top-right corner.
5. Click on ‘+ Content Details’ within the ‘Single’ tab in the ‘Edit Location Element Settings’ window. 
6. Check or uncheck the desired contact fields to show or hide them.
7. Click on the ‘Save’ button.
8. 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:

1. Click on the ‘Modules’ tab in Composer’s left navigation and select Locations.
2. Click on the ‘Locations’ tab.
3. Select the location containing the location information you want to update.
4. 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
5. 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.

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.

1. Go to the ’Pages’ panel.
2. Select the ‘Social Media Links’ branch.
3. Click on the three-dot icon and select ‘New Page’ from the Action menu.
4. Click on the ‘Linked’ tab in the ‘New Page’ window.
5. Click into the ‘Page Name’ field and replace ‘New Page’ with the title of the social platform (for example ‘Facebook’).
6. Tick the ‘Linked Page’ checkbox.
7. 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).
8. Tick the ‘Open in a new Window’ checkbox.
9. Click the ‘Save’ button in the ‘New Page’ window.
10. Drag and drop the page into the desired position within the ‘Social Media Links’ branch.
11. 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 page redirect.

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.

A set of quick links display across multiple columns towards the bottom of the footer. These links provide quick access to pages and resources on your website that are popular with wider segments of your target audience. Some common examples include ‘Calendar’, ‘Employment Opportunities’ and ‘School Store’.

The quick links are powered by a single Navigation element displaying pages from the ‘Footer Links - 8’ 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.

Add a New Quick Link

To add a quick link to the quick links section in the footer:

1. Go to the ’Pages’ panel.
2. Hover over the ‘Footer Links - 8’ branch.
3. Click on the three-dot icon and select ‘New Page’ from the Action menu.
4. Click on the ‘Linked’ tab in the ‘New Page’ window.
5. Click into the ‘Page Name’ field and replace ‘New Page’ with the link title.
6. Check the ‘Linked Page’ checkbox.
7. 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.
8. Click the ‘Save’ button in the ‘New Page’ window.
9. Drag and drop the page into the desired position within the ‘Footer Links - 8’ branch.
10. 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 quick links section in the footer:

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

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

To update the supporting text statement:

1. Go to the ‘Banners’ panel.
2. Scroll to ‘Footers’ in the left navigation and select ‘TB Footer 12’.
3. Scroll to the text statement in the main banner interface.
4. Hover over the Content Element displaying the text statement and click on the ‘Edit Content’ button.
5. 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. 
6. Click on the ‘Save’ button at the bottom of the content editor.
7. 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.

The default footer displays a large image in the background to make the content more visually engaging. This image displays with a semi-transparent overlay in front of it in the website’s primary color to ensure the text is easy to read in the foreground. 

To update the background image, begin by uploading a new image:

1. Click on the ‘folder’ icon button in Composer’s left navigation to access Resources. 
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 upload options available 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 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.
7. Click on the ‘Save’ button at the bottom of the ‘Edit Resource Details’ window.

Image Size: The recommended size for the image in the background of the ‘Upcoming Event’s panel is 2200px (wide) by 685px (high). 

With the image uploaded, add it to the background of the footer:

1. Go to the ‘Banners’ panel.
2. Scroll to ‘Footers’ in the left navigation and select ‘TB Footer 12’.
3. Hover over the first nested Container element towards the top of the banner showing the background image and click on the ‘gear’ icon in the top-right corner. This Container element has the title ‘Footer Top Container’.
4. Click on ‘+ Design’ at the bottom of the ‘Edit Container
5. Click on the ‘Browse’ button under the ‘Background Image’ field.
6. Select the image you have uploaded previously in the ‘Select a Background Image’ window.
7. Click on the ‘Save’ button at the bottom of the ‘Edit Container Element Settings’ window.
8. Click the ‘Publish’ button at the bottom-right of the banner interface.

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:

1. Click on the ‘folder’ icon button in Composer’s left navigation to access Resources. 
2. Click on the ‘Resources’ tab.
3. Create or select an existing folder for your accreditation logos in the ‘Public’ directory.
4. Click on the ‘Add Public Resource’ button at the top right of the Resources interface.
5. Choose from the options available to upload a new accreditation logo.
6. Once the upload is complete, update the following image properties in the ‘Edit Resource Details’ window:
1. 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).
2. 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.
7. 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:

1. Go to the ‘Banners’ panel.
2. Scroll to ‘Footers’ in the left navigation and select ‘TB Footer 12’.
3. Scroll down the banner interface to the Container element displaying the current set of accreditation logos.
4. 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.
5. Select a Resource element from the ‘Standard’ tab in the ‘Add Element’ window.
6. Hover over the new Resource element and click on the ‘gear’ icon in the top-right corner.
7. Click on the ‘Single’ tab at the top of the ‘Edit Resource Element Settings’ window.
8. Click on the blue toggle to the right of the ‘Title’ field to hide the element title.
9. Click on the ‘Browse’ button below the ‘Title’ field.
10. Find and select the logo image you have previously uploaded.
11. Click on ‘+ Link To’ within the ‘Resource Element Settings’ window.
12. Optionally link the logo image 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.
13. Click on the ‘Save’ button.
14. 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:

1. Go to the ‘Banners’ panel.
2. Scroll to ‘Footers’ in the left navigation and select ‘TB Footer 12’.
3. Scroll down the banner interface to the Container element displaying the current set of accreditation logos.
4. 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.
5. 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:

1. Go to the ‘Banners’ panel.
2. Scroll to ‘Footers’ in the left navigation and select ‘TB Footer 12’.
3. Scroll down the banner interface to the Container element displaying the current set of accreditation logos.
4. 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.
5. 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.

A set of utility links displays at the bottom left of the default footer. These provide useful access to information concerning the website itself, including links to 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:

1. Go to the ’Pages’ panel.
2. Hover over the ‘Footer Utility’ branch.
3. Click on the three-dot icon and select ‘New Page’ from the Action menu.
4. Click on the ‘Linked’ tab in the ‘New Page’ window.
5. Click into the ‘Page Name’ field and replace ‘New Page’ with the link title.
6. Tick the ‘Linked Page’ checkbox.
7. Set up 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.
8. If the link redirects to an external webpage, tick the ‘Open in a new Window’ checkbox.
9. Click the ‘Save’ button in the ‘New Page’ window.
10. Drag and drop the page into the desired position within the ‘Footer Utility’ branch.
11. 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.