Enhancements

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

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 custom post feature view is to show custom way to view one feature post

Adding Custom Post Feature

1. See example below, copy the post element
2. Paste in desired page
3. Select Post Element settings, update to the boards that should show
   
   Note: Posts should be set to display thumbnail, category, title and summary
4. Hit Save

The custom post grid view is to show custom way to view post.

Adding Custom Post Grid

1. See example below, copy the post element
2. Paste in desired page
3. Select Post Element settings, update to the boards that should show
   
   Note: Posts should be set to display thumbnail, category, title and summary
4. Hit Save

The divider was created to be able to add in the body of the page.

Adding the Divider

1. See example below, copy the Content Element
2. Paste in desired page
3. Select Edit Content, update to the body copy to appear with the divider
4. Hit Save

The custom video player was created to show a video with static set to display on the left or right side.

Adding Custom Video Player

1. See examples below, copy the Resource Element of the left or right Video example
2. Paste in desired page
3. Select Resource Element settings, update to the video that will show
4. Under Design update text in the Header Content (for text to appear on the left) or Footer Content (for text to appear on the right) 
5. Hit Save

The custom photo was created to show a photo with static set to display on the left or right side.

Adding Custom Photo

1. See examples below, copy the Resource Element of the left or right Photo example
2. Paste in desired page
3. Select Resource Element settings, update to the photo that will show
4. Under Design update text in the Header Content (for text to appear on the left) or Footer Content (for text to appear on the right) 
5. Hit Save

The custom photo grid was created to show the photo grid with static set to display on the left or right side.

Adding Custom Full Width Photo

1. See examples below, copy the Resource Element with the full width photo showing the left or right text
2. Paste in desired page
3. Select Resource Element settings, update to the gallery that will show
4. Under Design update text in the Header Content (for text to appear on the left) or Footer Content (for text to appear on the right) 
5. Hit Save

The custom photo grid was created to show the photo grid with static set to display on the left or right side.

Adding Custom Photo Gird

1. See examples below, copy the Resource Element of the left or right Grid example
2. Paste in desired page
3. Select Resource Element settings, update to the gallery that will show
4. Under Design update text in the Header Content (for text to appear on the left) or Footer Content (for text to appear on the right) 
5. Hit Save

The custom slideshow was created to show a custom slideshow with static set to display on the left or right side. Slideshows will pull from an image gallery (with or without captions).

Adding Custom Slideshow

1. See examples below, copy the layout container of the left or right Slideshow example
2. Paste in desired page
3. Update the Resource element to the gallery that will show
4. Hit Save
5. Update Content Element title text and paragraph text below, button is optional
6. Hit Save

Image buttons are created and managed with a resource element, you will want to copy the layout container to use the different options when adding them to individual pages.

Adding Custom Image Buttons

1. See examples below, copy the layout container with the image button example
2. Paste in desired page
3. Update the Resource element to the gallery that will show
4. Update the element title text to change the font text showing on image
5. Browse to select and update the image you would like to use
6. +Image select a custom tab
7. Add hover text and button to the content area under the custom tab
   
   Note: Title is set to Heading 2 and the copy is paragraph text, the button is using the 'button on dark white' button style
8. Hit Save

The Core Values panel from the homepage was brought in and repurposed for the Core Values to be shown on an interior page.

Adding Core Values to an Interior Page

1. Go to the Enhancements Page
2. Copy the Core Values Panel
3. Go to Desired Page and Paste the element
4. Save

The styling provided for the directory does not have a custom set up, this will display for any constituents you add to show via the constituent element.

Content Cards with blockquotes are content elements that include a custom class. with the standard blockquote set up. 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 add blockquote text in the main body copy
9. Highlight text and select the quote from the content element toolbar, then to add the blue quotation select the 2022 blockquote blue from styles dropdown
10. Highlight citation and then select citation from the styles dropdown
11. Save

Content Cards with video are resource elements that include a custom class that have the copy set up in the footer content area.

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

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

To add, change or remove the video and text:

1. Click the element settings
2. Browse Resources and select the video you would like to display
3. Click +Design
4. Go to the footer content area to add, remove copy.
   
   Note: Title of the content cards should always be set to H2 heading tag and the body copy is plain paragraph text.
5. Save 

Content Cards with video are resource elements that include a custom class that has the blockquote set up in the footer content area.

There are two ways to add video 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 resource-video - Gray card
  • callout-box blue resource-video - Blue Card
  • callout-box dark-blue resource-video - Dark Blue Card
  • callout-box red resource-video - Red Card
  • callout-box yellow resource-video - Yellow Card
  • callout-box green resource-video - Green Card
  • callout-box orange resource-video - Orange Card

To add, change or remove the Video and text:

1. Click the element settings
2. Browse Resources and select the video you would like to display
3. Click +Design
4. Go to the footer content area to add, remove copy
5. Follow standard blockquote instructions
6. Save 

On the Portal page there is a smaller hero image that is intended for the portal page only.

Updating Hero Image

1. Hover over hero image, select resource element setting
2. Click Browse to source new image
3. Hit Save

Navigation element can be copied and placed on all portal pages

On the portal page there is a layout element that holds a post and resource element that is editable

Updating Image

1. Hover over the image, select resource element settings
2. Click on Browse to source new image
3. Hit Save

Updating Post

1. Hover over the post, select post element setting
2. Update the boards you want to feed into the announcement section
3. Hit Save