Instructions - Testimonial 1

The 'Testimonials 1 (Cards)' Best Practice Asset displays a visually-engaging panel of testimonials for promoting your school’s key messages. Each testimonial takes the form of a card with a circular image, a text-based quotation, the name of the author and a description of their role in your community.

The panel is configured as a Container element with an individual Content Element for each testimonial. It can support any number of testimonial cards with 4 on show by default and will automatically show these on multiple rows when they cannot fit alongside each other. It is available in a light or dark color scheme.

Important: This Best Practice Asset can be added to multiple pages on your website, but this must be a full-width page or a page with a left and/or right banner. It cannot be added inside a Layout element or a page layout with multiple columns.

The following pixel dimensions are recommended for the images in the Testimonials panel. These will help you to achieve an ideal balance of visual quality and loading speed:

Image Area	Width (pixels)	Height (pixels)
Testimonial Card Image	256	256

There are two ways of preparing an image to match these sizes:

• Use photo editing software such as Adobe Photoshop to scale and/or crop the file before uploading it to Composer.
• If you only need to crop the image, upload it to the Resources module, select it and click on the ‘Crop’ icon button towards the top of the Resource details panel. This will open Composer’s inbuilt image editor where you can crop the file.

Each testimonial in the Testimonial Slideshow requires a single circular image representing its author. If the testimonial’s author is a person, we recommend adding a headshot image. If the author is an organization (such as an accreditation body), we recommend adding a logo or an image of their location.

The following best practices are recommended when preparing these images to ensure they display effectively for each testimonial: 

• Upload images in a normal square shape. The circular shape of each image button is applied automatically through the website styling.
• Choose images with a small number of elements such as a single headshot, logo or or location feature so that they are easy to interpret when displayed at a small scale.
• Keep the focal point of each image in the center to account for the circular styling that will obscure the corners.
• Save images at 72ppi (pixels per inch) in .jpeg format with an RGB color profile.
• Add descriptive alt text when uploading images to make them accessibility-compliant.

The following instructions explain how to add a new ‘Testimonials 1’ panel to a page in your website. Please follow each set of steps in the order presented:

Make a Copy of the Example ‘Testimonials 1’ Panel

As part of the setup process for this Best Practice Asset, Finalsite has set up an example page on your website displaying the ‘Testimonials 1’ Panel options. Begin by copying and pasting this example panel onto the desired page: 

1. Go to the ’Pages’ panel.
2. Select the branch containing the example page for this Best Practice Asset. This is normally the ‘Production’ or ‘BPA’ branch.
3. Select the ‘Testimonials 1’ page. This includes an example of the ‘Testimonials 1’ panel in both color schemes.
4. Hover over the Container element displaying the ‘Testimonials 1’ color option you want to use and click on the ‘Copy’ icon in the top-right corner.
5. Create or navigate to the page in the ‘Pages’ panel that you want to add the new ‘Testimonials 1’ panel to. This should have a full-width layout or follow a single column page layout with left and/or right banners. 
6. Scroll down to the main content area:
   • If the page doesn’t have any content, hover over the bottom of the main content area and click on the ‘Add Element’ button.
   • If the page has existing content, hover over the element that should directly precede the ‘Testimonials 1’ panel and click on the ‘Add Element’ button.
7. Click on the blue ‘Paste this Element’ button in the ‘New Element’ window.

Update the Title of the Panel

With the new ‘Testimonials 1’ panel in place, update its title:

1. Hover over the Container element displaying the testimonial cards and click on the ‘gear’ icon in the top-right corner.
2. Click into the ‘Title’ field in the ‘Container Element Settings’ window and type in a new title. If a title is not required, click on the blue toggle to the right of the field to hide it.
3. Click on the ‘Save’ button at the bottom of the ‘Edit Container Element Settings’ window.

The ‘Testimonials 1’ panel can display with a light or dark color scheme. This can be changed at any time through updating the settings of Container element displaying the testimonial cards:

1. Go to the ’Pages’ panel.
2. Navigate to the page displaying the Testimonials Panel you want to update.
3. Turn on the ‘Compose’ toggle in the bar at the bottom of the page interface.
4. Refresh the page in your web browser.
5. Hover over the Container element Testimonials panel and click on the ‘gear’ icon in the top-right corner.
6. Click on ‘+ Design’ in the ‘Edit Container Element Settings’ window.
7. Click into the ‘Custom Class’ field and type the custom class or classes outlined in the table below to apply the desired color scheme, making sure to include a space between the two classes if you apply the dark color style.
8. Click on the ‘Save button’ at the bottom of the ‘Edit Content Element Settings’ window.

Color Scheme	Custom Classes Required
Light	bpa-testimonials-1
Dark	bpa-testimonials-1 dark

The following instructions explain how to update a testimonial card within an existing ‘Testimonials 1’ panel. Please follow each set of steps in the order presented:

Upload a New Image

Begin by uploading the image for the testimonial card to the Resources module:

1. Click on Resources in Composer’s left navigation. 
2. Click on the ‘Resources’ tab.
3. Create or select an existing folder for your image within the ‘Public’ directory. 
4. Click on the ‘Add Public Resource’ button at the top right of the Resources interface.
5. Choose from the options available to upload a new image.
6. Once the upload is complete, update the properties for the image in the ‘Edit Resource Details’ window:
   • Click into the ‘Title’ field and add a short title for your image (this is for internal use and will not be seen by the visitor).
   • Click into the ‘Alt Text’ field and add a short description explaining the contents of the image for visitors who are unable to see it.
7. Click on the ‘Save’ button at the bottom of the ‘Edit Resource Details’ window.

Image Size: The recommended size for images in the location gallery is 256px (wide) by 256px (high).

Update the Testimonial Content

With the image uploaded, navigate to the page displaying the testimonial you want to update: 

1. Go to the ’Pages’ panel.
2. Navigate to the page displaying the ‘Testimonials 1’ panel you want to update
3. Turn on the ‘Compose’ toggle in the bar at the bottom of the page interface.
4. Refresh the page in your web browser.
5. Scroll to the ‘Testimonials 1’ panel.

Begin by updating the testimonial text:

1. Hover over the Content element displaying the testimonial card you want to update and click on the ‘Edit Content’ button.
2. Click into the content editor and delete the current text.
3. Type in a short testimonial, making sure to include speech marks if required.
4. Click on the ‘Save’ button in the content editor.

Note: The height of each testimonial card will increase automatically to display all of the text inside it. On wider screens showing the cards alongside each other, all testimonials on the same row will match the height of the tallest card to ensure a uniform presentation. As such, there are no fixed requirements on the length of the testimonial text, but we recommend a maximum of roughly 50 words to match the original display of the feature.

Next update the image on show at the top of the testimonial card:

1. Hover over the Content element displaying the testimonial card again and click on the ‘gear’ icon in the top-right corner.
2. Click on ‘+ Design’ in the ‘Edit Content Element Settings’ window.
3. Double click on the current image within the ‘Header Content’ content editor to open the ‘Image Properties’ window.
4. Click on the ‘Browse’ button within the ‘Basic’ Properties section.
5. Select the image you have previously uploaded in the ‘Pick a Resource’ window.
6. Click on the ‘OK’ button in the ‘Image Properties’ window.

Finally, with the ‘Edit Content Element Settings’ window still open, update the name of the author and the description of their role in your community:

1. Click into the ‘Footer Content’ content editor and delete the current text
2. Highlight the current name on the first line with your cursor and delete it.
3. Type in the name of the new testimonial’s author, making sure the bold formatting is still applied.
4. Now highlight the second line of text with your cursor and delete it.
5. Type in a short statement describing the author’s role in your community (for example, ‘Current Parent’, ‘Art Teacher’ or ‘Accreditation Body’).

The ‘Testimonials 1’ panel can support any number of testimonial cards with 4 on show by default. These will automatically display in multiple rows if they cannot fit alongside each other. To add a new testimonial card to an existing ‘Testimonials 1’ panel:

1. Go to the ’Pages’ panel.
2. Navigate to the page displaying the ‘Testimonials 1’ panel you want to update.
3. Hover the last Content Element in the panel displaying a testimonial and click on the ‘copy’ icon in the top-right corner.
4. Hover the last Content Element again and click on click on the ‘Add Element’ button
5. Click on the blue ‘Paste this Element’ button in the ‘New Element’ window.

With the new testimonial card in place, please refer to the ‘Update a Testimonial Card’ section in these instructions for the steps required to update the testimonial content.

The order of the testimonial cards in the ‘Testimonials 1’ panel is determined by the order of the individual Content elements inside of it.

To reorder the testimonial cards:

1. Go to the ’Pages’ panel.
2. Navigate to the page displaying the ‘Testimonials 1’ panel you want to update.
3. Turn on the ‘Compose’ toggle in the bar at the bottom of the page interface.
4. Refresh the page in your web browser.
5. Scroll to the ‘Testimonials 1’ panel.
6. Hover over the Content element displaying the testimonial card you want to move and click down on the ‘Move’ icon. 

Drag and drop the testimonial into the desired new position, making sure to keep the Content element you are moving inside the Container element.

Whilst making updates to a Testimonials panel, the elements will display in their default Composer appearance to make them easier to edit.

To preview how your updated testimonials will look with their styled appearance:

1. Make sure you have saved any updates to the elements you have been working on.
2. Turn off the ‘Compose’ toggle in the bar at the bottom of the page interface.
3. Refresh the page in your web browser.

To publish the updates on the live website, click on the ‘Publish’ button in the bar at the bottom of the page interface and select from the options in the ‘Publish Page’ window to publish the page now or schedule the page to publish later.

Note: If you do not have the administration rights to publish the page, you can request the page to be published instead. This will notify the specified administrator to approve or deny the publish request.