Showcase 4 Instructions

The ‘Showcase’ panel displays a grid of visually-engaging image buttons promoting your school’s most important messages and differentiators. This grid overlays an offset rectangle in the website’s accent color and is reformatted as a slideshow on mobile and tablet views. This content is also headed by a title for the panel and a short text introduction. 

Each image button in the panel consists of a title and supporting image and displays an overlay when the visitor hovers over it. This overlay contains a short text description and an optional CTA button. The visitor can then click on the title or optional CTA button to view further information in a pop-up.

The panel is powered by a single Post element that is set to 'List' and shows the latest 9 posts from the ‘Differentiators’ board in the Posts module. Each post represents a different image button.

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:

A title and short text introduction displays at the top of the ‘Showcase’ panel. To change this content, 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 Container element displaying the panel title and click on the ‘gear’ icon in the top-right corner.
6. Click into the ‘Title’ field in the ‘Edit Container 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.

With the ‘Edit Container Element Settings’ window still open, update the introduction text:

1. Scroll down to the ‘Header Content’ field and click into the content editor.
2. Update the current text on display. We recommend adding a single paragraph with a maximum of 45 words to maintain consistency with the original design.
3. Click on the ‘Save’ button at the bottom of the ‘Edit Container Element Settings’ window.

By default, the ‘Showcase’ panel will display a grid of image buttons in 3 columns on desktop devices. To customize the display of the grid to display in 2, 3 or 4 columns:

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 Container element and click on the ‘gear’ icon in the top-right corner.
6. Click on ‘+ Design’ at the bottom of the ‘Edit Container Element Settings’ window.
7. Click into the ‘Custom Class’ field, placing your cursor directly after the existing ‘showcase-4’ custom class.
8. Press the space key and type in one of the following additional classes described in the table below to set the desired column structure.
9. Click on the ‘Save’ button at the bottom of the ‘Edit Container Element Settings’ window.

To add an image button, begin by uploading its supporting image 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:
   1. 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.
   2. 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 643px (high). 

With the supporting image uploaded, add a new post to the Posts module to create the 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 ‘Differentiators’ board.
4. Click on the ‘Create Post’ button at the top right of the board interface.
5. Populate the content for the image button within the post interface:
   1. Click into the ‘Title’ field and add a short title for the image button.
   2. Click into the content editor within the ‘Body Content’ field and add the content for the image button pop-up. Alternatively, you can link the image button to an external webpage by clicking on the ‘External Redirect URL’ tab in the ‘Body Content’ field and typing in the external webpage URL.
   3. Click on the ‘Summary’ panel and type in the short text description that displays in the image button overlay. We recommend adding a single paragraph with a maximum of 30 words to ensure the full description displays effectively within the overlay.
   4. Click on the ‘Thumbnail & Resource’ panel.
   5. Click on the ‘Browse’ button and select the image you have uploaded previously in the ‘Pick a Resource’ window.
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 provided it is one of the 9 most recent posts on the ‘Differentiators’ board. The posts in this panel are set to display in date order.

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

To update an existing image button, begin by uploading its new supporting image 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:
1. 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.
2. 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 643px (high). 

With the supporting image uploaded, update the post content representing the image button you want to update in 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 ‘Differentiators’ board.
4. Select the post in this board representing the image button you want to update.
5. Update the content for the post in the post interface:
• Click into the ‘Title’ field and update the short title for the image button.
• Click into the content editor in the ‘Body Content’ field and update the content for the image button pop-up. Alternatively, you can link the image button to an external webpage by clicking on the ‘External Redirect URL’ tab in the ‘Body Content’ field and typing in the external webpage URL.
• Click on the ‘Summary’ panel and update the text description in the the content editor for the image button overlay. We recommend adding a single paragraph with a maximum of 30 words to ensure the full description displays effectively within the overlay.
• Click on the ‘Thumbnail & Resource’ panel.
• Click on the ‘Browse’ button and select the image you have uploaded previously in the ‘Pick a Resource’ window.
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 ‘Slideshow’ panel automatically provided it is one of the 9 most recent posts on the ‘Differentiators’ board. The posts in this panel are set to display in date order.

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

Each image button in the ‘Showcase’ panel displays an optional CTA button by default below the text description in the button overlay. The visitor can then click on this or the tite of the image button to view further information in a pop-up.

To show, hide or update the title of the ‘Optional CTA’ button:

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 Post element displaying the image buttons and click on the ‘gear’ icon in the top-right corner.
6. With the ‘Grid’ tab selected in the ‘Edit Post Element Settings’ window, click on ‘+ Content Details’.
7. Optionally check or uncheck the ‘Optional CTA link’ field to show or hide the optional CTA button across all image buttons.
8. If you have chosen to show the optional CTA button, click into the text field adjacent to the checkbox and replace ‘Optional CTA’ with a new title. We recommend choosing a short, generic title that will work well for each button across the panel (for example, ‘Read More’ or ‘Find out More’. 
9. Click on the ‘Save’ button at the bottom of the ‘Edit Post Element Settings’ window.

Note: The same ‘Optional CTA’ button settings are applied to all image buttons across the ‘Showcase’ panel.

The order of the image buttons in the ‘Showcase’ panel is determined by the publish date of the posts representing them in the Posts module. These posts are set to display in date order. 

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 ‘Differentiators’ board.
4. Select the post representing the image button you want to move
5. Click into the ‘Start Date’ field on the right of the post interface.
6. Update the current date/time setting:
   • If the date/time is more recent than the date/time of another post, the image button will display before it in the ‘Showcase’ panel. 
   • If the date/time is older than the date/time of another post, the image button will display after it in the ‘Showcase’ panel. 
7. Click on the ‘Update’ button at the bottom of the post interface.

Once the post has been updated, the image button it represents will display in the updated order automatically.

To remove an image button you can either delete the post representing it from the Posts module (to remove it permanently) or expire the post (in case you want to display it again in the future).

To delete the post representing the 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 ‘Differentiators’ board.
4. Select the post representing the image button you want to remove.
5. Click on the ‘Delete this post’ icon button at the bottom of the post interface.
6. Confirm you want to delete the post in the ‘Delete Post’ validation window.

Expire the post representing the 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 ‘Differentiators’ board.
4. Select the post representing the image button you want to expire.
5. Click into the ‘Expire’ field on the right of the post interface.
6. Select a time and date that has already taken place.
7. Click on the ‘Update button at the bottom of the post interface.

Once the post representing the image button has been published, the image button will be removed from the ‘Showcase’ panel automatically. 

Note: To reinstate an expired image button, follow the same set of steps above, but delete the time and date from the ‘Expire’ field during step 6.