Showcase 6 Instructions

The ‘Showcase’ panel displays a succinct text area alongside a grid of visually-engaging image buttons for highlighting your school’s most important messages and differentiators. When the visitor clicks on an image button, a pop-up will display containing further information about that message.

The panel consists of the following key features added inside a Container element:

• Text Area: A succinct text area that consists of the panel title, a succinct paragraph of text introducing the panel and an optional ‘Learn More’ button. These elements are powered by a single Content element. 

• Grid of Image Buttons The grid of image buttons is powered by a single Post element. Each button consists of a title, a supporting image and an overlay that displays when the visitor hovers over it. This overlay contains a short text description and a ‘Find Out More’ button linking to a page with further information.

The following pixel dimensions are recommended for the images uploaded to the Resources module for use in this panel. Following these guidelines will help you to achieve an ideal balance of visual quality and loading speed for your content:

To update the text area at the top of the ‘Showcase’ panel, begin by updating the panel title:

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 ‘Showcase’ panel.
5. Hover over the Content Element displaying the text area for this panel and click on the ‘gear’ icon in the top-right corner.
6. Click into the ‘Title’ field in the ‘Edit Content Element Settings’ window.
7. Update the text or click on the blue toggle to the right of the ‘Title’ field to hide the element title.
8. With the ‘Edit Content Element Settings’ window still open, click on ‘+ Design’ directly below the ‘Title’ field.
9. Click on the ‘Save’ button at the bottom of the ‘Edit Content Element Settings’ window.

Next, update the paragraph of text on display below the title:

1. Hover over the Content Element displaying the text area once again and click on the ‘Edit Content’ button.
2. Update the existing text using the content editor. We recommend adding one short paragraph to maintain consistency with the original design.
3. Click on the ‘Save’ button at the bottom of the content editor.

Finally, update the optional ‘Learn More’ button:

1. Hover over the Content Element displaying the panel text area once more and click on the ‘gear’ icon in the top-right corner.
2. Click on ‘+ Design’ at the bottom of the ‘Edit Content Element Settings’ window.
3. Click into the ‘Footer’ Content’ content editor.
4. Update the existing text for the button you want to update, making sure not to remove the link already applied to it. 
5. Right-click on the link and choose ‘Edit Link’ from the action menu.
6. Select the desired link type from the top of the ‘Link’ properties window.
7. Update the link settings to set up a new link destination for the button.
8. Check the ‘Open link in a new tab’ checkbox if the updated link opens a page that is external to your webpage.
9. Click on the ‘OK’ button at the bottom of the ‘Link’ properties window.
10. Click on the ‘Save’ button at the bottom of the ‘Edit Content Element Settings’ window.

Note: To remove the optional button, delete the existing link in the ‘Footer Content’ content editor as part of step 4 in the previous instructions. If the button has been removed previously and you would like to add a new one, follow the instructions above up to step 3 and then follow the normal steps to ‘Add a Button’ with the ‘button-arrow’ style applied. The steps on how to do this can be found within the ‘Interior Pages & Content Formatting’ section on this ‘Instructions’ page.

To add an image button, begin by uploading the supporting image 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. Create or select an existing folder for your image 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 the new image.
6. 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.
7. Click on the ‘Save’ button at the bottom of the ‘Edit Resource Element Settings’ window.

Image Size: The recommended upload size for the supporting image is 800px (wide) by 680px (high). 

With the supporting image uploaded, add a post for the image button to the Posts module:

1. Click on the ‘Modules’ tab in Composer’s left navigation and select Posts.
2. Click on the ‘Boards’ tab.
3. Select the board that has been configured to display the image buttons in the ‘Showcase’ panel.
4. Click on the ‘Create Post’ button at the top right of the Board interface.
5. Add the content for your new post:
• Click into the ‘Title’ field and add a short title for your image button.
• Click into the ‘Body Content’ content editor and add the content that will display inside the pop-up when the visitor clicks on the button.
• Open the ‘Summary’ panel and type a short description. This will display inside the overlay when the visitor hovers over the image. We recommend adding a maximum of 15 words here to maintain consistency with the original design.
• Open the ‘Thumbnail & Resource’ panel and click on the ‘Browse’ button to select the supporting image you uploaded previously for the thumbnail.
6. Click on the ‘Save’ button at the bottom right of the Post interface.
7. Click on ‘Yes’ in the ‘Publish Now’ window to publish the post immediately.

Once the post has been published, the image button will display in the ‘Showcase’ panel automatically as long as it is one of the 5 most recent posts (based on its publish date) within the board that has been configured to display in this Post element.

Tip: To learn more about adding posts in Composer please read our Knowledge Base article on how to make a new post.

The order of the image buttons in the ‘Showcase’ panel is determined by the publish dates of the posts that power them within thePosts module. The image buttons will display in date order by default.

To reorder an image button:

1. Click on the ‘Modules’ tab in Composer’s left navigation and select Posts.
2. Click on the ‘Boards’ tab.
3. Select the board that has been configured to display in the ‘Showcase’ panel 
4. Select the post representing the image button that you want to reorder.
5. Click into the ‘Start Date’ field and update the existing date. If the start date of the post is more recent than another post, it will display before it in the grid of image buttons. If the start date is older, the post will display after it.
6. Click on the ‘Update’ button at the bottom of the post interface.

To add an existing image button, begin by uploading a new supporting image 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. Create or select an existing folder for your image 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 the new image.
6. 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.
7. Click on the ‘Save’ button at the bottom of the ‘Edit Resource Element Settings’ window.

Image Size: The recommended upload size for the supporting image is 800px (wide) by 680px (high). 

With the supporting image uploaded, update the post representing the image button you want to modify within the Posts module:

1. Click on the ‘Modules’ tab in Composer’s left navigation and select Posts.
2. Click on the ‘Boards’ tab.
3. Select the board that has been configured to display the image buttons in the ‘Showcase’ panel.
4. Click on the title of the post you want to update in the main Posts interface.
5. Update the content for the image button:
• Click into the ‘Title’ field and update the short title for your image button.
• Click into the ‘Body Content’ content editor and update the content that will display inside the pop-up when the visitor clicks on the button.
• Open the ‘Summary’ panel and update the short description. This will display inside the overlay when the visitor hovers over the image. We recommend adding a maximum of 15 words here to maintain consistency with the original design.
• Open the ‘Thumbnail & Resource’ panel and click on the ‘Browse’ button to select the new supporting image you uploaded previously for the thumbnail.
6. Click on the ‘Save’ button at the bottom right of the Post interface.
7. Click on ‘Yes’ in the ‘Publish Now’ window to publish the post immediately.

Once published, the updated post content will display automatically within the chosen image button in the ‘Showcase’ panel.

To remove an image button from the ‘Showcase’ panel, delete the post that powers it within the Posts module:

1. Click on the ‘Modules’ tab in Composer’s left navigation and select Posts.
2. Click on the ‘Boards’ tab.
3. Select the board that has been configured to display in the ‘Showcase’ panel.
4. Select the post that you want to remove.
5. Click on the ‘Delete’ icon button at the bottom of the post interface.
6. Confirm you want to delete the post in the ‘Delete Post’ validation window.