Finalsite

The following main steps are required to add new content to a normal 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 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:

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.

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:

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.

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:

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.

1. Upload the PDF
   • Upload your PDF to the Resources section.
2. Add a Content Element
   • On your webpage, add a Content element.
   • Type the text you want to use as the link (e.g., the PDF title).
3. Style the Link (Optional)
   • Highlight the text and select a button style like “Button-Download” for better visibility.
4. Link to the PDF
   • While the text is still highlighted, click Add Link to Resource.
   • Select the PDF file you uploaded.
   • (Optional) Choose Open in New Tab/Window if you want the PDF to open separately.
5. Save and Publish
   • Click Insert or Save to apply the link.
   • Once published, users can click the button or link to view/download the PDF.