Website
Flexible Template

Featured Shows panel

The Featured Shows panel can be used to showcase and promote one or more Shows (i.e. Movies, Special Events, or Programs) that have a Start Date set. Shows can be manually added and re-arranged in any order, with the ability to display anywhere between 1-4 shows per row, with multiple rows. This panel can be used multiple times on the same page to distinguish upcoming tracks of content, i.e. movies, special events, live music, etc. Movies with a start date in the future, which have been assigned one or more series, will display series pills with their movie images. For ideas and visual references of how you can use the Featured Shows panel, see these examples.

Document image


Panel Settings

Panel Title: The large left-aligned text that displays in the top-left corner above the shows, such as "Movies Coming Soon". (optional)

Panel Text: The smaller text that displays below the Panel Title and can describe the content of this panel, such as "Come enjoy independent gems, family movies and the most highly-anticipated movies of the year!" (optional)

Shows: The Shows which are selected to appear in this panel. Search for the title of a desired show and click it from the search results to add it to the right-hand side. To re-order the shows after being added, click and drag a title up or down; shows can be removed from the right-column by clicking the minus "-" icon.

Max Number of Rows Per Show: The number of shows you want to display on each row; if more shows are added than the max number set here, multiple rows will be generated to display all shows.

See All Link Label: This text will display in the top-right corner of the panel to link visitors to related content, such as "See All".

See All Link URL: This link will connect visitors who click the text in the top-right corner of the panel to related content, such as the Coming Soon page.

Panel Background Color: The color that displays in the background behind the show thumbnails.

Panel Text Color: The color for the Panel Text.

Show Details Background Color: The color for the background at the bottom of each show thumbnail behind the show date and title.

Show Details Text Color: The color for the show date and title at the bottom of each show title.

Show Hover Background Color: The color that displays over a show thumbnail when visitors hover over it. An opacity around 80% can be helpful so that the show image is still slightly visible.

Keep Past Shows Visible: All shows require a Start Date to be displayed in this panel. If this checkbox is checked, shows with a Start Date that is in the past will continue displaying. This can be helpful for calendar or archive pages. For Featured Shows panel(s) being used on the home page to showcase upcoming movies, special events, etc. we generally recommend leaving this checkbox unchecked. Note that if unchecked, shows with a Start Date in the past will not display once that Start Date is today or older. Please note that these shows no longer displaying will still be included in the Shows column in the panel editor and can be removed manually by hovering over them and clicking the minus "-" symbol.

Please refer to the Color section of our Create Accessible Content article, to ensure colors you use in your website meet minimum contrast ratio requirements between the background color and text on top of the background. The minimum contrast ratio for the WCAG 2.1 AA is 4.5:1. You can check the contrast ratio between two colors using the contrast checker tool, or read more about color contrast at the WebAIM website.

Max Number of Shows Total: You can set the limit for how many shows will display at a given time within this panel. This can allow for teeing up more upcoming shows by adding them on the right-hand side, so that those shows replace older ones once those older ones' Start Dates have passed, without needing to check this panel every day.

Examples

Here are some examples with accompanying visuals of how the Featured Shows panel can be used:

1. Promote one or two upcoming specific show(s)

  • Max Number of Shows Per Row: 1
  • “Keep Past Shows Visible?” checkbox: unchecked
Document image

  • Max Number of Shows Per Row: 2
  • “Keep Past Shows Visible?” checkbox: unchecked
Document image


2. Showcase what's coming up next by programming track

Distinguish different types of upcoming shows by using multiple Featured Shows panels, for example for movies, special events, etc.

  • Max Number of Shows Per Row: 3
  • Total number of shows added: 3
  • “Keep Past Shows Visible?” checkbox: unchecked
Document image


Another example:

Document image

  • Max Number of Shows Per Row: 3
  • Total number of shows added: 6
  • “Keep Past Shows Visible?” checkbox: unchecked
Document image

  • Max Number of Shows Per Row: 4
  • Total number of shows added: 4
  • “Keep Past Shows Visible?” checkbox: unchecked
Document image


Another example:

Document image

  • Max Number of Shows Per Row: 4
  • Total number of shows added: 6
  • “Keep Past Shows Visible?” checkbox: unchecked
Document image


3. Present a chronological list similar to a calendar or archive page

  1. Publish a new page with the Template: Flexible Template
  2. Add the Featured Shows panel
  3. Add and arranging shows
  4. Check the
  5. Add a Blocks panel with one Block that has text in the Title field, to serve as a header for the page.



Document image