Header 12 Instructions

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 12

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. ‘Search’ icon button that opens a website search panel.  A horizontal main menu where each top level page displays a dropdown on hover. This contains the section’s level 2 subpages (split over 2 columns) with a set of featured links and an image on the left. Please note that on narrower devices, some of these features may be hidden to optimize the available space and 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.

Logos should be large enough to ensure that they will not degrade in quality. Each school’s logo can vary with different widths and heights as there is no “one size fits all” solution to ensure that every logo fits comfortably inside the site’s header.

There are two things to take into consideration with how you would like the logo to fit within the header space - the width and the height of how you would like the logo to display. The following information will help you decide which size to choose for your website.

When providing logos to use in the header of your theme, a horizontal format will work best in the header options provided. There are 2 ways to display your logo in the header:

Option 1: Small image logo that displays to the left, with text-based school name and/or tagline (optional)
(this format is displayed in the demo headers)

The default height that will display in the browser is 60px, the maximum height to display is 120px. Size recommended is an approximate aspect ratio of 1:1 or something similar (square-ish). For example, if a logo size has a 1:1 aspect ratio, your image could be 200px x 200px, or 500px x 500px because the width is the same as the height. It’s best to create your logo at least 2 or 3x larger, for optimal quality.

Option 2: Image based logo that incorporates the image with the school name, no text-based school name or tagline

This format will most likely be displayed at larger width sizes since it is an image that includes text and the text will need to be legible. The aspect ratio will most likely be more of a rectangle shape where the width is greater than the height. The default height that will display in the browser is 60px, the maximum height to display is 120px. It’s best to create your logo at least 2 or 3x larger, for optimal quality.

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)
Mega menu image	512	480

To add the default header to a 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 ‘Header’ dropdown to ‘TB Header 12’ in the ‘Page Layout and Appearance’ window.
6. Set the ‘Menu’ dropdown to ‘TB Mobile Menu 1’.
7. Click on the ‘Save’ button at the bottom of the ‘Page Layout & Appearance’ window.

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:

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 you want to link to (for example ‘Facebook’).
6. Check the ‘Linked Page’ checkbox.
7. 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).
8. Check the ‘Open in a new Window’ checkbox. This is a recommended best practice when linking to external websites.
9. Click on the ‘Save’ button at the bottom of the ‘New Page’ window.
10. 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.
11. 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 determined by the URL of the external page redirect.

Tip: Only include 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:

1. Go to the ‘Pages’ panel.
2. Open the ‘District - 2021’ branch and select the ‘District Home’ page.
3. Click on the ‘gear’ icon in the bar at the bottom-right of the page interface.
4. Optionally click into the ‘Page Name’ field in the ‘Page Settings’ window and update the title of the ‘District Home’ link.
5. Click on the ‘Linked’ tab at the top of the ‘Page Settings’ window.
6. Check the ‘Linked Page’ checkbox.
7. Select the ‘Internal Redirect’ tab and click the ‘Select Page’ button.
8. Select the district website’s homepage in the ‘Page Picker’ window.
9. Click on the ‘Save’ button at the bottom of the ‘Page Settings’ window.
10. 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:

1. Go to the ’Pages’ panel.
2. Open the ‘District - 2021’ branch and hover over the ‘Schools’ page.
3. Click on the three-dot icon and select ‘New Page’ from the Action menu.
4. Click on the ‘Linked’ tab at the top of the ‘New Page’ window.
5. Click into the ‘Page Name’ field and replace ‘New Page’ with the school name.
6. Check the ‘Linked Page’ checkbox.
7. Select the ‘Internal Redirect’ tab and click on the ‘Select Page’ button.
8. Select the desired school website homepage in the ‘Page Picker’ window.
9. Click the ‘Save’ button at the bottom of the ‘New Page’ window.
10. 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.
11. 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 it’s possible to separate them into groups.

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:

1. Go to the ’Pages’ panel.
2. Open the ‘District - 2021’ branch and hover over the ‘Schools’ page.
3. Click on the three-dot icon and select ‘New Page’ from the Action menu.
4. Click on the ‘Linked’ tab at the top of the ‘New Page’ window.
5. Click into the ‘Page Name’ field and replace ‘New Page’ with a short title for the group (for example, ‘Elementary Schools’).
6. Select the ‘Internal Redirect’ tab and click the ‘Select Page’ button.
7. Select a page in the ‘Page Picker’ window for the group parent page to link to.
8. Click on the ‘Save’ button at the bottom of the ‘New Page’ window.
9. 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: 

1. Return to the ‘District - 2021’ branch in the ’Pages’ panel.
2. Click on the ‘Schools’ page to view the existing school website links.
3. Hover over the first website link you want to move into the new group.
4. Click on the three-dot icon and select ‘Move to a new parent’ from the Action menu.
5. Select the group parent page you created previously in the ‘Choose a new parent page’ window.
6. 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.

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: 

1. Go to the ‘Banners’ panel.
2. Scroll to ‘Headers’ in the left navigation and select ‘TB Header 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 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. 
5. 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:

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

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 header logo is set to display with a maximum height of 60px 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 decreases the height to 40px)
   2. height-small (this is also the default height of 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

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

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 ‘Logo’ 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 header automatically.

Update the School Name and/or Optional Tagline

To update the school name and/or optional tagline:

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.
5. 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.
6. 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.

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:

1. Go to the ’Pages’ panel.
2. Hover over the ‘Header 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 a short title for the new utility link.
6. Check the ‘Linked Page’ checkbox.
7. Setup a redirect 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.
8. 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.
9. Click on the ‘Save’ button at the bottom of the ‘New Page’ window to create the page.
10. 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.
11. 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.

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:

1. Go to the ’Pages’ panel.
2. Open the ‘Header Utility’ branch.
3. Select the page in this branch that you want to format as a call to action button
4. Click on the ‘gear’ icon in the bar at the bottom-right of the page interface.
5. Click into the ‘Custom Nav Class’ field near the bottom of the ‘Page Settings’ window.
6. Type in the custom class ‘button-style’.
7. Click on the ‘Save’ button at the bottom of the ‘New Page’ window to create the page.
8. Return to the ’Pages’ panel and drag and drop the new page into its desired position among the other subpages.
9. 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.

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:

1. Go to the ’Pages’ panel.
2. Hover over the parent page in the main menu that you want to add a subpage to. 
3. Click on the three-dot icon and select ‘New Page’ from the Action menu.
4. Click into the ‘Page Name’ field in the ‘New Page’ window and replace ‘New Page’ with the new page name.
5. Click the ‘Save’ button at the bottom of the ‘New Page’ window.
6. Drag and drop the page into the desired position within the chosen section.
7. Populate the page with the required content.
8. 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.

Each of the top level pages in the main menu displays a dropdown on hover (if the visitor is using a desktop device) with a supporting image.

To update the supporting image in a main menu dropdown, begin by uploading the new image to the Resources module:

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:
   1. 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.
   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 the image’s accessibility.
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 512px (wide) by 480px (high). 

With the new image uploaded, set it to display within the chosen main menu dropdown:

1. Go to the ’Pages’ panel.
2. Select the parent page from the main menu that displays the dropdown you want to update.
3. Click on the ‘gear’ icon in the bar at the bottom-right of the page interface.
4. Click on the ‘Nav Info’ tab in the ‘Page Settings’ window.
5. Click on the ‘Browse’ button within the ‘Page Thumbnail’ field and select the image you have uploaded previously within the ‘Select a Page Thumbnail’ window.
6. Click on the ‘Save’ button at the bottom of the ‘Page Settings’ window.

Tip: You can optionally remove the supporting image from a main menu dropdown by clicking on the ‘Remove’ icon button at the bottom right of the selected image preview after step 4. If no image is selected when the page settings are saved, the list of subpages and set of featured links will fill the width of the dropdown.

If you choose to remove the supporting image from a main menu dropdown, we recommend removing the supporting images from across all of main menu dropdowns to provide the visitor with a consistent navigation experience.

Each of the top level pages in the main menu displays a dropdown on hover (if the visitor is using a desktop device). This includes the display of up to two optional featured links promoting important pages in the section. Each featured link consists of a title, a short text description and a link with an arrow icon.

To add a featured link to a main menu dropdown:

1. Go to the ’Pages’ panel.
2. Select the parent page from the main menu that displays the dropdown you want to update.
3. Click on the ‘gear’ icon in the bar at the bottom-right of the page interface.
4. Click on the ‘Nav Info’ tab in the ‘Page Settings’ window.
5. Click into the content editor in the ‘Description’ field.
6. Type in a short title for the featured link.
7. Highlight this title with your cursor.
8. Click on the ‘Paragraph Format’ icon button in the content editor toolbar and select ‘Heading 3’ from the dropdown list.
9. Press the return key and type in a short description about the featured link. We recommend adding a single sentence with a maximum of 10 words to ensure the description displays effectively within the dropdown.
10. Press the return key once more and type in a short title for the link. We recommend choosing a short, generic title that will work well across each dropdown (for example, ‘Read More’ or ‘Find out More’.)
11. Highlight the link title with your cursor.
12. Click on the ‘Link’ icon button in the content editor toolbar.
13. Select ‘Add Link’ from the dropdown menu.
14. Select a link type from the top of the ‘Link’ properties window.
15. 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.
16. Click on the ‘Class’ drop-down in the ‘Link’ properties window and select the ‘button-arrow-on-dark’ class.
17. Click on the ‘OK’ button at the bottom of the ‘Link Properties’ window.
18. Click on the ‘Save’ button at the bottom of the ‘Page Settings’ window.

Tip: You can optionally remove the featured links from a main menu dropdown by removing all the content from the content editor in the ‘Description’ field within the ‘Page Settings’ window after step 5.

If you choose to remove the featured links from a main menu dropdown, we recommend removing them across dropdowns to provide the visitor with a consistent navigation experience.