Your Website is built on Finalsite’s Composer Content Management System (CMS). 

The following page provides instructions for Composer website administrators on how to update the custom features in this website. This refers to features that have been specifically created for this design and are therefore not covered by other Composer training resources. 

These instructions assume a basic knowledge of Composer CMS and its key concepts (such as editing and publishing a page). If you are new to Composer, we recommend starting with the following training resources:

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.

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.