A default interior page on the website should include a set of banners, and a theme. These banners can be added from the Page Layouts and Appearance menu which can be accessed by clicking the Page Layout icon located next to the Compose button. From the pop up menu, selections can be made from the dropdown menus. 

An optional Hero Image can be added to any interior page.

1. Add a Resource Element to a page
2. Adjust the settings to Single
3. Click Browse to select an Image
   
   Note: image should be saved out at 1920 x 804 pixels, saved for web.
4. Click +Design and add the custom class, hero
5. Save and Publish

Once the page is published, the the image will snap to the banner.

An optional Hero Video can be added to any interior page.

1. Add a Resource Element to a page
2. Adjust the settings to Single
3. Click Browse to select a Video
   
   Note: video should be saved out at 1920 x 804 pixels
4. Click +Design and add the custom class, hero
5. Save and Publish

Once the page is published, the the video will snap to the banner.

The Utility - Header and Popular Searches branches are used to update links in the top banner of the website. Typically, these pages are redirects to pages in the interior pages of your website. To update these pages:

1. Go to the branch and click on the desired page
2. Click on the page settings
3. Click the Linked tab to update the link to the desired location
4. Save

The Utility - Footer, Call to Action buttons, Accreditation and Social branches are used to update links in the bottom banner of the website. Typically, these pages are redirects to pages in the Utility Pages Branch or other interior pages of your website. Links in the Social Media Branch are redirected to the proper source. To update these pages:

1. Go to the branch and click on the desired page
2. Click on the page settings
3. Click the Linked tab to update the link to the desired location
4. Save

Utility Pages Branch

The Utility Pages branch contains pages that contain standard website information  like the school's Privacy and Accessibility policies. If you do not yet have a Privacy Policy, and need assistance creating one, please check out the article in the Knowledge Base. Information about creating an accessibility policy exists on the page. Some of the pages in the Footer Utility branch also link back to pages in this branch of your website.

To update the school address

1. Go to the Banners section of Composer 
2. Select the default footer 2022 from the Footers
3. Click into the content element and update the text within the content elements. 
4. Save the banner when the edits are complete.

To change the image

1. Hover over the resource element and click on the ‘Settings’ cog.
2. Click Browse to select a Image
3. Save and Publish

Tip: Since there is a significant amount of code used to format the address, it's often helpful to update this information from the html </> option in the editor. Once in the html, simply update the black text. 

Adding image to main navigation dropdown

1. Navigate to the desired level 1 page (e.g; Our School, Admissions)
2. Click the settings cog at the bottom of the page
3. Click Nav Info
4. Update the image, images in this area should be uploaded at 200px by 200px, saved for web.
5. Save & Publish

The three sticky buttons are managed in the Call to Action Buttons branch and have the option of being updated and having the icon library to change icons if needed.

Updating Call to Action Buttons

1. Located the Call to Action Buttons branch, click on one of the 3 buttons
2. Go to the Page Settings
   1. Update Page Title to change button title
   2. At bottom of setting update Custom Class to change icon, us Icon Library to see icons to chose from and source the new custom class to add
   3. Go to Link Tab to set button destination
3. Save changes
4. Publish Page

To add the styling for the divisional page styles you will follow the standard page set up and appearance however in the theme dropdown you will see additional options for the divisional styling. This is applied at the page level, there are the following to choose from;

The Style Guide, within the production branch of your website, is a reference page with examples of the available styles on your website. Some elements will be styled properly when added directly to a page; other styles will require that you take extra steps so that they can be viewed properly. For that purpose, each element on your site includes a design panel which allows you to: 

1. add a custom class (a custom class applies extra CSS and Javascript to an element to make it look or function differently.)
2. add a background image
3. add a header content
4. add footer content

To fully style the elements listed below as well as the elements included on your homepage and enhancements, you may need to access this panel.

PRO TIP: The blue 'Edit content' button allows editing in the main body of an element. If text, buttons or images on an element don't appear to be editable, check the Design tab in the element settings. 

The first paragraph in the main content area should be formatted as lead-in text to create a visually engaging introduction to the page copy:

1. Add or edit a Content element at the top of the main content area..
2. Type in a short text paragraph.
3. Highlight the text with your cursor.
4. Click on the ‘Styles’ drop-down in the content editor toolbar.
5. Select ‘2022 lead in’ from the dropdown list.
6. Save the element updates.

This is example 'Lead-In' styled text. Maecenas faucibus mollis interdum. Praesent commodo cursus magna vel scelerisque nisl consectetur et.

Add sub-headings to break up sections of your page content inside the main content area. This helps make longer pages more visually-engaging and easier to follow. 

1. Add or edit a Content element.
2. Type in the title of the subheading.
3. Highlight the title with your cursor.
4. Click on the ‘Paragraph Format’ button in the content editor toolbar.
5. Select the desired heading from the dropdown (e.g. Heading Two).
   
   Note: Heading 1 and Heading 2 offer alternative options to show the heading title with underline. To achieve this follow steps above. Once default heading style is applied highlight heading title text and go to the Styles dropdown to select heading 1 underline or heading 2 underline.

Top Tip: When adding subheadings to your content is important to follow a logical HTML heading structure. This is beneficial for search engine optimisation and ensures the content meets recommended accessibility standards.

HEADING ONE with underline

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 TWO or HEADING TWO with Underline

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 id dolor id nibh ultricies vehicula ut id elit.

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 ligula, eget lacinia odio sem nec elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

A hyperlink is the best formatting choice for normal links to pages and websites within a paragraph of text on an interior page:

1. Add or edit a Content element.
2. Type in the text label for the link.
3. Highlight the text label with your cursor.
4. Click on the ‘Link’ button in the content element toolbar and choose ‘Add Link’.
5. Add a link in the ‘Link Properties’ window
6. Save the element settings and publish the page.

A style button is the best formatting choice for important links to pages, downloads and external websites that should stand out visually on the page. 

Small and large buttons will have the same color options. 

Button style are additive, i.e. for a large blue button, in the link editor apply the 'button color' 'Large' styles.  

Button style combinations are listed in the text of each button below.

Creating a Basic Button

1. Add or edit a Content element.
2. Type in the text label for the link.
3. Highlight the text label with your cursor.
4. Click on the ‘Link’ button in the content element toolbar and choose ‘Add Link’.
5. Add a link in the ‘Link Properties’ window
6. Click on the ‘Class’ drop-down and select one of the colored button styles outlined below.
7. (Optional) Add the 'Button Expand' Class for the buttons to be full width
8. Save the element updates. 

Large buttons with subtext

As an additional feature, large buttons can also include subtext. 

1. Type the text label and subtext on one line
2. Highlight the subtext
3. Click the Italics button in the editor
4. Select the 'link' tool in the editor
5. Follow instructions to create a link 
6. Select the colored button class + the large button class 
7. Save

The blockquote tool in the content editor toolbar is the best choices for text-based quotes and testimonials throughout interior pages. This can optionally include an author citation at the bottom of the quote.

1. Type in the quotation.
2. Optionally press the return key and type in the name of the author.
3. Highlight both the quotation and author citation with your cursor.
4. Click on the ‘Block quote’ button in the content editor toolbar.
5. Now highlight the author citation only with your cursor.
6. Click on the ‘Styles’ drop-down in the content editor toolbar.
7. Select ‘Citation’ from the dropdown list.
8. Save the element updates.
   
   Note: There is also an alternative option to show blue quotation marks for this element. To achieve this follow steps above. Once default quotation style is applied highlight the whole text and go to the Styles dropdown to select blockquote blue. This will allow the quotation marks to appear blue when the page is published in the view mode.

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. Herman Melville

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.Herman Melville

A callout is an eye-catching text excerpt or styled panel that can be used to draw attention to an important message in the sidebar or main content area. 

1. Add or edit a Content element in the main content area or sidebar.
2. Type in a short text paragraph.
3. Highlight the text with your cursor.
4. Click on the ‘Styles’ drop-down in the content editor toolbar.
5. Select 2022 Callout Content' from the dropdown list.
6. Save the element updates.

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 fusce dapibus tellus ac cursus commodo, tortor mauris.

The styled table formatting option is recommended for all tables added to interior pages on the website to establish a visually-engaging and consistent presentation:

1. Add or edit a Content element.
2. Click on the ‘Table’ button in the content element toolbar.
3. Set the desired number of rows and columns
4. Select ‘First Row’ from the ‘Headers’ dropdown
5. Set ‘Border Size’, ‘Cell Padding’ and ‘Cell Spacing’ to ‘0’.
6. Set ‘Width’ to ‘100%’
7. Click on the ‘Class’ drop-down in the ‘Table Properties' window and select ‘2022 table styled’ from the dropdown.
8. Click on the ‘OK’ button and populate the table data
9. Save the element updates.

Highlighting the table and right clicking will bring up additional table properties that can be used to adjust the table.

Content Cards are content elements that include a custom class. They can be used with or without images, come with several backgrounds and will expand to the width of the space where they are used.

There are two ways to add custom callouts to a page.

• Copy the desired callout from the production branch and paste it onto the desired page
• Add a content element to a page, then add the custom class to the element settings. The class options are:
  • callout-box - Gray card
  • callout-box blue - Blue Card
  • callout-box dark-blue - Dark Blue Card
  • callout-box red - Red Card
  • callout-box yellow - Yellow Card
  • callout-box green - Green Card
  • callout-box orange - Orange Card

To add, change or remove the photo:

1. Click the element settings
2. Click +Design
3. Go to the header content area to add, remove or replace an image
4. Click the image in the editor to add an image
5. Click to Delete an existing image
6. Double Click to replace an existing image
7. Save 
8. Click the blue "Edit Content" button to change the main body copy
9. Save