Testimonials 2 Instructions
Testimonials 2
- 'Testimonials' Panel Overview
- Panel Image Sizes
- Update the Parallax Image
- Add a Testimonial to the Testimonials Slideshow
- Reorder a Testimonial
'Testimonials' Panel Overview
The ‘Testimonials’ panel displays a visually engaging slideshow of testimonials from members of your community to promote your school’s differentiators. The panel consists of the following key features added within a Container element:
- Parallax Image: A single large image displays at the top of the panel with a parallax animation effect applied to it on scroll. This is powered by a single Resource element.
- Testimonials Slideshow: A slideshow of text-based testimonials displays along the bottom of the panel and overlaps part of the parallax image. Each testimonial within the slideshow consists of a short quote followed by an author citation. This feature is powered by a single Post element.
Panel Image Sizes
The following pixel dimensions are recommended for the images uploaded to the Resources module for this panel. Following these guidelines will help you to achieve an ideal balance of visual quality and loading speed for your content:
| Image Area | Width (pixels) | Height (pixels) |
|---|---|---|
| Parallax Image | 2200 | 1468 |
Update the Parallax Image
To update the parallax image at the top of the ‘Testimonials’ panel, begin by uploading a new image to the Resources module:
- Click on the ‘folder’ icon button in Composer’s left navigation to access Resources.
- Click on the ‘Resources’ tab.
- Create or select an existing folder for your image in the ‘Public’ directory.
- Click on the ‘Add Public Resource’ button at the top right of the Resources interface.
- Choose from the upload options available and upload the new image.
- Once the upload is complete, update the following image properties in the ‘Edit Resource Details’ window:
- Click into the ‘Title’ field and add a short title for the image. This is for internal use and will not display on the homepage.
- Click into the ‘Alt Text’ field and add a short description of the image. This is used to describe the image in situations where the visitor cannot see it and is highly recommended to improve the image’s accessibility.
- Click on the ‘Save’ button at the bottom of the ‘Edit Resource Element Settings’ window.
Image Size: The recommended size for the parallax image is 2200px (wide) by 1468px (high).
With the image uploaded, set it to display within the ‘Testimonials’ panel:
- Go to the Pages panel and select the homepage.
- Turn on the ‘Compose’ toggle in the bar at the bottom of the page interface.
- Scroll to the ‘Testimonials’ panel.
- Hover over the Resource element at the top of the panel (this has the element title ‘Custom Class: panel-bg’) and click on the ‘gear’ icon in the top-right corner.
- Click on the ‘Browse’ button below the ‘Title’ field in the ‘Edit Resource Element Settings’ window.
- Select the image you have uploaded previously in the ‘Select a Resource’ window.
- Click on the ‘Save’ button at the bottom of the ‘Edit Resource Element Settings’ window.
Add a Testimonial to the Testimonials Slideshow
Each testimonial in the Testimonials slideshow is powered by an individual post added to the Posts module.
To add a new testimonial:
- Click on the ‘Modules’ tab in Composer’s left navigation and select Posts.
- Click on the ‘Boards’ tab.
- Select the board that has been configured to display in the Testimonials slideshow.
- Click on the ‘Create Post’ button at the top right of the Board interface.
- Add the content for your new post:
- Click into the ‘Title’ field and add a title for the testimonial (this is for internal use and will not be seen by the visitor)
- Click into the ‘Body Content’ content editor and type in the testimonial quote. We recommend adding one or more short paragraphs to maintain consistency with the original design.
- Press the space key at the end of the testimonial and type the author’s name.
- Highlight both the testimonial and the author’s name with your cursor.
- Click on the ‘Block quote’ icon button in the content editor toolbar.
- Deselect the highlighted text and then highlight the author’s name specifically with your cursor.
- Click on the ‘Styles’ drop-down in the content editor toolbar.
- Select ‘citation’ from the dropdown list.
- Click on the ‘Save’ button at the bottom right of the Post interface.
- Click on ‘Yes’ in the ‘Publish Now’ window to publish the post immediately.
Once the post has been published, the testimonial will display in the testimonials slideshow automatically. The posts are set to display in date order.
Tip: To learn more about adding posts please read our Knowledge Base article on how to Make a New Post.
Reorder a Testimonial
The order of the testimonials in the Testimonials slideshow is determined by the publish dates of the posts that power them within the Posts module. The testimonials display by date order by default.
To reorder a testimonial:
- Click on the ‘Modules’ tab in Composer’s left navigation and select Posts.
- Click on the ‘Boards’ tab.
- Select the board that has been configured to display in the Testimonials slideshow.
- Select the post that you want to reorder.
- Click into the ‘Start Date’ field and update the existing date. If the start date is more recent than that of another post, the testimonial will display before it in the slideshow. If the start date is older than another post, the testimonial will display after it.
- Click on the ‘Update’ button at the bottom of the post interface.
