About

Hero banners control the top area of a landing page and provide the main entry experience for users. Hero banners can only be displayed at the top of the page because they interact with the navigation bar and transparent page styling.

Hero banners can be used to:

• Highlight featured content
• Display event messaging
• Add countdown timers
• Promote registration or login flows
• Direct users to featured destinations

Available hero types:

• Player carousel
• Text and counter

Access hero settings

1. Go to your Configuration Management console, and select the Templatepages module. You can also navigate directly using a link: https://{your_site_url}/admin/config/tab/templatepages. 



The 'Templatepages' module page displays.



2. Click Edit next to an existing page template to open it, or click the +Add TemplatePage button to create a new one.

To learn how to create and publish a landing page, see Templatepages module.



3. In the TemplatePage section, select a hero type:

• Player Carousel
• Text & Counter

Follow the instructions below for the selected hero type.

Configure a player carousel

The Player Carousel hero displays live media, playlists, or images in an animated carousel at the top of the landing page.

In the Herotype dropdown, select Player carousel.

Configure live media

liveCategory - Use this field to select the category containing live sessions. (Leave this field empty to hide live media from the hero section.)

1. Click Select Category to open the category selector window.



2. Enter a category name or ID, then select it from the results list.

When selecting a category by name or ID, entitlement rules may hide media that is not published to the site.

Configure fallback content

fallbackOption - Select an option from the drop-down menu: VOD Playlist or Images and CTA list.

• If VOD Playlist is selected, use the type drop-down menu to select the playlist behavior.



Supported playlist types include:

• Custom Playlist
• Channel Content
• Dynamic playlists such as Most Recent, Most Viewed, and Trending



Scheduled Room type media is not supported.

If Images & CTA List is selected, scroll down to the imageList section.



• In the imageCarousel window, configure the following:
• uploadHeroImage - Uploads the image you want in your hero.
• imageAlt - Defines alternative text for the image.
• Title - Displays title text on the image.
• Description - Displays descriptive text on the image.
• callToActionUrl - Defines the CTA destination URL.
• callToActionText - Defines the CTA button text.



Click +Add "imageCarousel" to add additional carousel images. You can add up to eight images.



Use the DELETE button to remove an image from the carousel.

Configure carousel timing

Use the carouselInterval field to define the transition interval between carousel items in seconds.

We recommend using a value greater than 5 seconds. For best results, use a 30-second interval.

Configure a Text & Counter

The Text & Counter hero displays text, CTA buttons, countdown timers, and a background image.

In the Herotype dropdown, select Text & counter.



All elements on this hero unit are optional and can be hidden by leaving the fields empty.  

1. Enter the Title and Description to display at the top of the hero.
2. Use the DateStart and DateEnd fields to display a date range below the description. Fill in both fields to display the date range.

Supported date formats:

• Unix Timestamp (Example: 1580518923) 
• UTC date string (Example: 2026-02-01T01:02:03)

Configure CTA buttons

Use the PrimaryCTAType and SecondaryCTAType fields to configure CTA buttons.

Available CTA types include:

• URL - Displays a button linked to a custom URL.
• Registration - Displays a registration button based on the Siteregistration module configuration.
• Enter Site - Displays a login button that opens the site login flow.

Primary CTA fields

• PrimaryCallToActionText - Defines the primary CTA button text.
• PrimaryCallToActionLink - Defines the primary CTA destination URL.
• PrimaryCallToActionUrlParams - Defines additional URL parameters for the primary CTA button.

Secondary CTA fields

• SecondaryCallToActionText - Defines the secondary CTA button text.
• SecondaryCallToActionLink - Defines the secondary CTA destination URL.

Configure the countdown timer

Use the CounterDate field to configure a countdown timer.

The countdown timer automatically disappears after reaching the configured date.

Supported formats include:

• Unix timestamp (Example: 1580518923)
• UTC date string (Example: 2020-02-01T01:02:03)

Configure the background image

Use the BackgroundImage field to upload a background image for the hero banner.

The image is automatically cropped based on the hero section layout.

For best results:

• Use a 1920x1080 image.
• Avoid adding text directly to the image.
• Use high-resolution images optimized for large displays.