Finalsite

Log in and Watch Training Videos

Get ready for Finalsite with three essential training courses: Composer, Posts, and Resources. These courses are designed to equip you with the skills needed to effectively manage and enhance your school's website. Learn how to create and edit engaging content with Composer, streamline communication with Posts, and efficiently manage your digital assets with Resources.

Log in to Finalsite
Finalsite Training Videos

Log in to Finalsite

Finalsite Training Videos

Campus Webmasters

You will be responsible for three main sections on your campus homepage.

Photo Slideshow

Latest News

Upcoming Events/Calendar

Adding & Editing Content

The Content element is the most basic building block in Composer, and it can accept any kind of text, image, or rich content. Content elements can contain images, embeds, links, or any other content you want to add.

Watch the Video

Adding Content - VERY IMPORTANT!

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

Login to Composer.
Click on the ‘Composer’ tab in Composer’s left navigation.
Go to the Pages panel.
Create a new page or select an existing page you want to update.
Turn on the ‘Compose’ toggle in the bar at the bottom-left of the page interface.
Refresh the page in your web browser.
Hover over the part of the page you want to add content to and click ‘Add Element’.
Choose an element from the ‘Add Element’ window.
Populate the new element with content and save your updates.
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.

Content Editor Styles

The following styling options are available in Composer’s content editor to apply special formatting to certain types of content on interior pages as well as some specific treatments on the homepage. Each style is described below with instructions on how to apply it:

Name	Description
citation	Special formatting for the optional citation below a block quote. This is applied by highlighting the desired text and choosing the style from the ‘Styles’ dropdown.
button-1	Small button with a transparent background and a thin border in the website’s main color. This is applied by adding a link and choosing the style from the ‘Class’ dropdown in the ‘Link’ properties window.
button-2	Small button with a transparent background and a thin border in the website’s accent color. This is applied by adding a link and choosing the style from the ‘Class’ dropdown in the ‘Link’ properties window.
button-3	Small button with a transparent background and a thick bottom border in the website’s accent color. This is applied by adding a link and choosing the style from the ‘Class’ dropdown in the ‘Link’ properties window.
button-4	Small button with white text and the website's primary color in the background. This is applied by adding a link and choosing the style from the ‘Class’ dropdown in the ‘Link’ properties window.
button-download	Small button with a download icon, a light gray background and a thick gray border. This is applied by adding a link and choosing the style from the ‘Class’ dropdown in the ‘Link’ properties window.
button-link	Small button with a link icon, a light gray background and a thick gray border. This is applied by adding a link and choosing the style from the ‘Class’ dropdown in the ‘Link’ properties window.
button-large	Large button with the website’s primary color in the background and optional subtext. This is applied by adding a link and choosing the style from the ‘Class’ dropdown in the ‘Link’ properties window.
button-arrow	Small text link in uppercase letters with an arrow icon in the website’s primary color. This is applied by adding a link and choosing the style from the ‘Class’ dropdown in the ‘Link’ properties window.
button-on-dark-1	Small button with a transparent background and white text with a thing white border for use in dark callout boxes. This is applied by adding a link and choosing the style from the ‘Class’ dropdown in the ‘Link’ properties window.
button-on-dark-2	Small button with a white background for use in dark callout boxes. This is applied by adding a link and choosing the style from the ‘Class’ dropdown in the ‘Link’ properties window.
button-on-dark-3	Small button with white text and a darker shadw of the website's primary color in the background for use in dark callout boxes. This is applied by adding a link and choosing the style from the ‘Class’ dropdown in the ‘Link’ properties window.
button-arrow-on-dark	Small text link in uppercase letters with an arrow icon in white for use in dark callout boxes. This is applied by adding a link and choosing the style from the ‘Class’ dropdown in the ‘Link’ properties window.
button-expand	This style can be added as an additional style to the following buttons to display them at full-width within the available space: button-1 button-2 button-3 button-4 button-large The style can be applied when formatting a button by adding ‘button-expand’ as a second class within the ‘Class’ dropdown in the ‘Link’ properties window.
text-callout	Large text with a left border in the website’s accent color to highlight important text statements and excerpts. This is applied by highlighting the desired text and choosing the style from the ‘Styles’ dropdown.
lead-in	Large text for the first paragraph on the page. This is applied by highlighting the desired text and choosing the style from the ‘Styles’ dropdown.
table-styled	Special formatting to display tables with a clear and visually-engaging presentation. This is applied by adding a table and choosing ‘table-styled’ from the ‘Class’ dropdown in the ‘Table Properties’ window.

Please refer to the ‘Homepage Panels’ and ‘Interior Pages & Content Formatting' sections within these instructions for full guidance on where and how to apply these styles.

Element Custom Classes

The following custom classes can be added within the settings of certain Composer elements in order to display them with a special visual presentation on interior pages:

Name	Description
button-dark	Displays a Content Element with a dark background. This is used to demonstrate the set of ‘button-on-dark’ button style on the website Style Guide and is not recommended for use on real pages.
callout-box-dark	Displays a Content Element as a callout box with white text and the website’s main color in the background.
callout-box-light	Displays a Content Element as a callout box with a light gray background and a thick bottom border.
color-1	This can be added as an additional custom class to a Content Element with the ‘callout-box-light’ applied to display the thick border along the bottom of a light callout box in the website’s main color. An empty space must be added between the two custom classes to achieve this formatting (for example: ‘content-box-light color-1’).
color-2	This can be added as an additional custom class to a Content Element with the ‘callout-box-light’ applied to display the thick border along the bottom of a light callout box in the website’s accent color. An empty space must be added between the two custom classes to achieve this formatting (for example: ‘content-box-light color-1’).
hero	Displays a Resource element showing a single image as a full-width hero between the header and the main content area.
nav-sub	Displays a Navigation element in a left or right sidebar with special formatting for linking to pages in the current section.

Important: Many elements on the homepage and within the header and footer banners also have custom classes added to their settings. These classes are required for the features to display with the correct presentation and should not be removed or updated. Please also note these classes have not been built for use on any other pages or panels.

Image & Video Best Practices

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.

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

Property	Recommended Setting
Video Size	1080p (1920px by 1080px)
Video bitrate	2500 Kbps
Frame Rate	30fps or 24fps
Key Frames	None
Duration	20 - 30 seconds
Audio	None
Format	MP4

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.

Be sure to visit the Style Guide to see the different elements that are accessible for your webpage.

Styleguide

Logo Image

Logo Title

In This Section