Slideshow 5 Instructions

The ‘Slideshow’ panel displays a slideshow of large images and/or videos to provide the visitor with a visually-engaging introduction to your school or district. The panel consists of the following key features housed within a single Container element:

• Slideshow: A autoplay slideshow of large images and/or videos powered by a single Resource element with arrow buttons and a play/pause button toggle. This is set to display resources from the ‘Home Hero Slideshow Panel’ gallery by default.

  Each slide within the slideshow includes a supporting text area displaying a title and description (inclusive of an optional button). This content provides further insights into your key messages and encourages the visitor to find out more.

• Description & Call to Action Buttons: A text area overlaying the slideshow that displays a title and description followed by a row of call to action buttons. This content provides further insights into your key messages and drive visitors towards important next steps on their journey. Some common example links for the call to action buttons include ‘Inquire’, ‘Visit’ and ‘Apply'.

This feature is powered by a single Container element that houses a Content Element for the title and description, and a Navigation element for the set of call to actions buttons. This Navigation element is set to display the pages within the ‘CTA Buttons’ branch within the ‘Pages’ panel by default . Each page in this branch represents a different button and can be set to redirect to a webpage of your choice.

The elements in this panel are configured with the following settings:

Panel Container Element

Resource Element

Description Container Element

Description Content Element

Description Navigation Element

Important: When updating the elements in the ‘Slideshow’ panel, please only update the settings recommended across these instructions. All other settings have been configured to ensure the panel displays with the correct presentation and functionality.

The following pixel dimensions are recommended for the images and videos 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:

The slideshow in the ‘Slideshow’ panel is powered by a single Resource element. By default, this has been set to show resources all resources from the ‘Home Hero Slideshow Panel’ gallery.

To change the gallery of resources on display within the slideshow:

1. Go to the ’Pages’ panel and select the homepage.
2. Turn on the ‘Compose’ toggle in the bar at the bottom of the page interface.
3. Refresh the page in your web browser.
4. Scroll to the ‘Slideshow’ panel.
5. Hover over the Resource element displaying the slideshow and click on the ‘gear’ icon in the top-right corner.
6. With the ‘Slideshow’ tab selected in the ‘Edit Resource Element Settings’ window, click on the ‘Browse’ button directly below the ‘Title’ field.
7. Select the desired gallery to display in the ‘Select a Gallery’ window.
8. Click on the ‘Save’ button at the bottom of the ‘Edit Resource Element Settings’ window.

Important: When updating this Resource element, please only update the settings recommended in these instructions. All of the other settings have been configured to ensure the slideshow displays with the correct presentation.

Note: These instructions detail the steps required to display an existing gallery of resources within the Slideshow panel. To learn more about adding galleries in Composer please read our Knowledge Base article on how to organize resources into Galleries.

To add a new slide to the slideshow in the ‘Slideshow’ panel, begin by uploading an image or video for it to the Resources module:

1. Click on the ‘folder’ icon button in Composer’s left navigation to access Resources. 
2. Click on the ‘Resources’ tab.
3. Select the folder containing your hero images and videos in the ‘Public’ directory. 
4. Click on the ‘Add Public Resource’ button at the top right of the Resources interface
5. Choose from the upload options available and upload a new image or video.
6. Once the upload is complete, update the content in the ‘Edit Resource Details’ window:
   • Optionally click into the ‘Title’ field and add a title for your image or video (this is for internal use and will not be seen by the visitor).
   • If you are uploading an image, click into the ‘Alt Text’ field and add a short description of the image. This is used by screen reading software to describe the image for visitors who are unable to see it. If you are uploading a video, apply the same update for the ‘Thumbnail Alt Text’ field.
7. Click on the ‘Save’ button at the bottom of the ‘Edit Resource Details’ window.

With the image or video uploaded, add it to the Resources Gallery powering the slideshow:

1. Click on the ‘folder’ icon button in Composer’s left navigation to access Resources. 
2. Click on the ‘Galleries’ tab.
3. Select the Resource Gallery powering your slideshow under ‘Public Galleries’. 
4. Click on the ‘Add Public Resource' button at the top-right of the gallery interface.
5. Select the image or video you have uploaded and add it to the gallery.
6. Optionally drag and drop the image or video within the gallery interface to reorder the slides.
7. Click the ‘Update’ button at the bottom-right of the Gallery interface.

Once the gallery has been updated, the new image or video will display in the slideshow panel automatically.

Note: To optimize loading speeds, the hero slideshow has an automatic limit of 20 slides on the homepage. Autoplay videos are also limited to 30 seconds in length, at which point they will advance to the next slide. 

To learn more about image and video best practices, please refer to the ‘Images & Video Best Practices’ sections in the ‘Website Overview’ section.

The order of the slides within the slideshow in the ‘Slideshow’ panel is based on the order of the images and/or videos within the Resources Gallery that powers this content.

To reorder the slides:

1. Click on the ‘folder’ icon button in Composer’s left navigation to access Resources. 
2. Click on the ‘Galleries’ tab.
3. Select the Resource Gallery powering your slideshow under ‘Public Galleries’.
4. Drag and drop the image or video within the gallery to reorder the slides.
5. Click the ‘Update’ button at the bottom-right of the gallery interface.

Once the gallery has been updated, the images and/or in the homepage hero slideshow will display in the updated order.

To update the title and description that overlays the slideshow in the ‘Slideshow’ panel:

1. Go to the ’Pages’ panel and select the homepage.
2. Turn on the ‘Compose’ toggle in the bar at the bottom of the page interface.
3. Refresh the page in your web browser.
4. Scroll to the ‘Slideshow’ panel.
5. Hover over the Content Element displaying the title and description, and click on the ‘gear’ icon in the top-right corner.
6. Click into the ‘Title’ field in the ‘Content Element Settings’ window and update the existing title text. A maximum of 6 words is recommended here to maintain consistency with the original design.
7. Click on the ‘Save’ button at the bottom of the ‘Edit Resource Element Settings’ window.
8. Hover over the Content Element once more and click on the ‘Edit Content’ button.
9. Click into the content editor interface and update the existing description text. A maximum of 30 words is recommended here to maintain consistency with the original design.

Important: When updating this Content Element, please only update the settings recommended in these instructions. All of the other settings have been configured to ensure the title and description display with the correct presentation.

To remove an existing image or video from the slideshow in the ‘Slideshow’ panel:

1. Click on the ‘folder’ icon button in Composer’s left navigation to access Resources. 
2. Click on the ‘Galleries’ tab.
3. Select the Resource Gallery powering your slideshow under ‘Public Galleries’.
4. Hover over the image or video you want to remove and click on the ‘tick’ icon. This will select the file and open the ‘Resources Selected’ panel on the right of the gallery interface.
5. Click the ‘Remove from Gallery’’ button in the ‘Resources Selected’ panel.
6. Click the ‘Update’ button at the bottom-right of the gallery interface.

Once the gallery has been updated, images or videos that have been removed from the Resources Gallery will no longer display in the slideshow.

Note: Removing images or videos from a Resources Gallery will remove them from the slideshow panel, but the files themselves will still exist in the Resources module in case you want to use them again in the future.

To add a new call to action button to the description area in the ‘Slideshow’ panel:

1. Go to the ’Pages’ panel.
2. Hover over the ‘CTA Buttons’ branch.
3. Click on the three-dot icon and select ‘New Page’ from the Action menu.
4. Click on the ‘Linked’ tab in the ‘New Page’ window.
5. Click into the ‘Page Name’ field and replace ‘New Page’ with a short title for your button.
6. Tick the ‘Linked Page’ checkbox.
7. Set up a redirect to the desired webpage:
   • If the page is part of your website, select ‘Internal Redirect’ and click the ‘Select Page’ button to choose the page.
   • If the page is external to your website, select ‘External Redirect’ and type the full URL into the ‘Redirect to this page’ field.
8. If the link redirects to an external webpage, tick the ‘Open in a new Window’ checkbox.
9. Click the ‘Save’ button in the ‘New Page’ window.
10. Drag and drop the page into the desired position within the ‘Slideshow 2’ branch.
11. Click the ‘Publish’ button at the bottom-right of the page interface.

Note: To achieve the strongest impact with your call to action buttons and maintain consistency with the original design, we recommend adding a maximum of three buttons each with a short and informative title.

The order of the call to action buttons in the description area within the ‘Slideshow’ panel is based on the order of the pages in the ‘CTA Buttons' branch within the 'Pages' panel.

To reorder the call to action buttons:

1. Go to the ’Pages’ panel.
2. Open the ‘CTA Buttons’ branch.
3. Drag and drop the page representing the call to action button you want to reorder into the desired position within the branch.

To remove an existing call to action button from the description area in the ‘Slideshow’ panel:

1. Go to the ’Pages’ panel.
2. Open the ‘CTA Buttons’ branch.
3. Hover over the page representing the call to action button you want to remove.
4. Click on the three-dot icon and select ‘Delete’ from the Action menu.
5. Confirm you want to delete the page in the ‘Delete Page’ validation window.