Website Support

• Session 1: https://hello.chorus.ai/listen?guid=b9795c3b7a0d4f558bae9b69d4c6f642
• Session 2: https://hello.chorus.ai/listen?guid=d8857e7a54fa40acb7c0cc22fbff40c2

Helpful resources:

• Composer/Resources Overview (PDF)
• Calendar & Posts (PDF)
• https://www.finalsitesupport.com/hc/en-us/articles/360040400451-Access-training-from-your-website

The following main steps are required to add new content to a normal interior page on your website:

1. Login to Composer.
2. Click on the ‘Composer’ tab in Composer’s left navigation.
3. Go to the Pages panel.
4. Create a new page or select an existing page you want to update. 
5. Turn on the ‘Compose’ toggle in the bar at the bottom-left of the page interface.
6. Refresh the page in your web browser.
7. Hover over the part of the page you want to add content to and click ‘Add Element’.
8. Choose an element from the ‘Add Element’ window.
9. Populate the new element with content and save your updates.
10. Click on the ‘Publish’ button in the bar at the bottom of the page interface.

This workflow is required for the administration of many of the custom features in your website and we recommend familiarizing yourself with this process.

Important: After turning on the 'Compose' toggle, always refresh the page in your browser before you start making updates. This will clear out any special functionality running on the draft preview of the page and will give you a better experience editing the content.

Saint Paul Public Schools is required to be compliant with the Americans with Disabilities Act (ADA) with regard to digital communication.

Finalsite Composer provides tools that meet these requirements, but each site editor also has the responsibility to ensure they are using the tools to meet these requirements.

Common disability challenges with regard to websites are sight (photos, color contrast) and hearing (code in the website that identifies images and can be read by the computer through electronic “screen reader” technology); mislabeled links; and the lack of closed captioning with video.

Some key factors to when editing your websites:

• Add alt text (Alternative Text) to every image. 

  Alt text is crucial for people who rely on assistive technology, such as screen readers, when they browse websites. Screen readers read the alt text aloud to users who are visually impaired, ensuring they have an experience comparable to those who can see. Without alt text, a blind person might only hear something generic like "image 12345" instead of understanding the content of the picture.

  Please keep this in mind when adding images for events or conferences. Include the image with alt text and also provide a written description directly on the website. This ensures accessibility for all users.
   

• Follow Page Structure using Heading Tags.
  Screen reading technology reads pages in a logical order: starting with H1 (Header 1), then H2, H3, and so on. This means that structuring your page appropriately is essential for people using assistive technology to understand your content. Utilizing proper heading styles is also a best practice for creating content that is easy to scan and digest. 
  
  It's important to note that heading tags should not be used for design purposes.
  • H1: This is your page title. You should only have one H1.
  • H2: This is your page’s subtitle, value proposition, subheader, etc.
  • H3: These are used to divide up chunks of content.
  • H4 and H5: If you need H4 or H5, be sure they are used for structural purposes and not design purposes.
     
• Using PDFs. Not all PDFs meet ADA compliance standards. Programs such as Microsoft Word and PowerPoint in the SPPS Office 365 suite now provide a tool similar to spellcheck that can review if a document meets accessibility standards. If you are using Microsoft tools to create PDFs, use the “Check Accessibility” tool under the REVIEW tab before saving as a PDF.

Accessibility Tools for Websites

The following best practices are recommended when preparing images and videos to achieve the best balance of visual impact, visitor engagement and loading speed:

Images

• Resize your images to match the pixel dimensions outlined in each section of these instructions to achieve the best balance of visual quality and loading speed.
• Keep the focal point of each image in the center. This safeguards against any automatic cropping of the image that may occur on custom features at certain screen widths to fit within the responsive layout.
• Save all images at 72ppi (pixels per inch) with an RGB color profile.
• Upload photos and detailed illustrations in the .jpeg file format.
• Upload simple logos and vector graphics as .svg, .png, .gif or .jpeg files.
• Add descriptive alt text to images to make them accessibility compliant.
• Only display a small number of images within slideshows. Please note that slideshows on the homepage have an automatic limit of 20 images.

Tips for Using Photos on the site:

• Select images carefully for the space where they will be used.
• Place the focal point of the image toward the center so that important information does not get cut off when the browser window is resized.

Videos

• Resize your videos to match the pixel dimensions outlined in each section of these instructions to achieve the best balance of visual quality and loading speed.
• Use video sparingly to emphasize a key message or show something special
• The more you are concerned about load time, the smaller your video files should be.
• Add captions to videos with audio information to make them accessibility compliant.
• Remove audio tracks from videos without sound to further reduce their file size.
• Keep the length of autoplay videos short. Please note that autoplay videos on the homepage are automatically limited to 30 seconds in length.
• The recommended file settings for a hero video are:

Tip: For the majority of images and videos, you do not need to lower the quality of the files before you upload them to Composer. The Resources module will automatically compress the files and serve the best version to match the visitor’s screen size or device.

For very large files, however (such as ultra high-resolution photos or 4K videos), these may still be too large to download reliably even after Resources has compressed them. In these instances, please use compression software to reduce the size of the files before you upload them. Some popular free tools to help you do this include Compressor.io for images and Handbrake.fr for videos.

This feature allows you to swap out the original image or PDF file you uploaded for a new one (of the same file type), without leaving any broken-image errors on your site. Resources will automatically replace any instance of the original file linked through Resources with the updated version.

Consider replacing a PDF calendar or student handbook instead of uploading a new one each year.

How to Replace Resources

The "Reuse Content" feature let's you display the content of another page on your site without sending the user to that page. Content is updated in one location and is updated everywhere the page is reused.

The Winter Weather page is an example of reusing content. The information is managed on the district website, but users don't navigate away from school websites to view the information.

How to reuse content

Headings should be used to break up pages into concise sections, making content easier to follow. Heading titles should be short and descriptive to help visitors quickly find the information they need. DO NOT using heading tags solely for styling purposes.

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).
6. Save

Note: When choosing a heading tag it is important to follow a logical HTML heading structure. This is beneficial for Search Engine Optimization (SEO) and ensures that your heading is accessibility compliant.

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 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 ‘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.

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 ‘lead-in’ from the dropdown list.
6. Save the element updates.

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.

This is example 'Lead-In' styled text. 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 primary color with an underline.

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.

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

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 styles are additive, i.e. for a large blue button, in the link editor apply the 'button1' '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 Full Width Button Class 
8. Save the element updates. 

By default, the width of a button is determined by the length of its text 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.

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. Select bold for name.
8. Save the element updates.

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.

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 Name
Grade 6

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 one of the below classes from the dropdown list.
   • callout-text-1
   • callout-text-2
   • callout-text-3
   • callout-text-4
   • callout-text-5
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.

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.

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.

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.

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.

A callout box is a Content element that displays as a visually engaging box for highlighting an important message on the page. It displays text content with an optional image at the top and is available in dark and light color treatments.

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:
  • card light - Light gray card
  • card dark - Blue card
  • card primary - Blue card
  • card outlined - White card
  • card accent - Gray card

To add, change or remove the photo:

1. Click the element settings
2. Click +Design
3. Add equal-height along with above class to equal the height of the cards. E.g - card light equal-height
4. Go to the header content area to add, remove or replace an image
5. Click the image in the editor to add an image
6. Click to Delete an existing image
7. Double Click to replace an existing image
8. Save 
9. Click the blue "Edit Content" button to change the main body copy
10. Save

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 ‘styled-table' from the dropdown.
8. Click on the ‘OK’ button and populate the table data
9. Save the element updates.

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 content. Please use the Layout element for this instead to ensure the content displays effectively on all devices.

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

1. Click on ‘Add Element’ in the main content area or sidebar.
2. Select the ‘Resource' in the pop-up window.
3. Click on the ‘Browse’ button within the ‘Single’ tab in the ‘Edit Resource Element Settings’ window.
4. Choose or upload a new photo in Resources.
5. Open the ‘Image’ section inside the ‘Edit Resource Element Settings’ window.
6. If you would like to display the description added with the image when it was uploaded to Resources, leave the ‘Default Description’ tab selected. If you would like to display a custom description, select on the ‘Custom’ tab and add a short text description in the content editor provided.
7. Save the element settings and publish the page.

The Post element lets you display posts from boards and/or collections in the Posts module 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 Getting Started with Posts.

To add a list of posts to a page:

1. Add a Post element 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 Search Engine Optimization (SEO). Learn more about how to set up a Post page in our Knowledge Base article on how to Build a Posts Page.

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 Accordion element 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 Accordion element 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 Customise an Accordion or Tabs Element.

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 Tabs element lets you organize a large amount of content into a series of panels that occupy the same space on the page. Splitting up information using this element makes it easier for the visitor to explore.

To add a Tabs element:

1. Add a Tabs element 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 Customise an Accordion or Tabs Element.