Top Carousel

Who can use this feature

Site Admin, Channel Admin

Supported features: User Pages

Introduction

The Top Carousel widget provides a space for you to showcase a banner with one or multiple images. Banners can be uploaded on a landing page and optional pages, and they appear just below the header menu at the top of the page.

Available on the following user pages:

  • Home Page
  • Home Page - 2 Column Split View
  • Home Page with Text

Optional Configurations:

  • The length of time (in seconds) the banner is displayed before the next one
  • The order in which the banners appear (when there's more than one)
  • The start and end dates for the banners to be displayed, including the option to display the images indefinitely
  • Add a Call-To-Action button that can link to a webpage (internal or external) or to a video on your platform

Supported file types include: PNG, JPG, and JPEG
The recommended image size:  1920 × 570 px

Access

You can access the Top Carousel widget from the back end of your platform in a video container while editing a User Page. 

  1. On the left hand side menu click on Pages
  2. In the dropdown list select User Pages
  3. The User Page screen opens and displays a list of all your pages, select the page you want to edit
  4. Under the Widgets Tab, select the Top Carousel widget
  5. The widget editor window will open to make changes

Widget Editor Window

There are 2 tabs where you can make changes.

1 Carousel tab Review & add or edit a list of the carousels
2 General tab Set the banner rotation (in seconds) to determine how long it will appear on the page before showing the next one

1 Title The title of your banner, displayed as a text overlay on the left side of the top carousel image on the front end
2 Image Thumbnail of the image
3 Start Date The date when the banner will appear on the front end (optional)
4 End Date The date when the banner will no longer appear on the front end (optional)
5 State Enabled or Disabled
6 Position Select the position of the banner when multiple banners are added. 0 is the starting position, then 1, 2, 3...

Add a New Carousel

Add a new banner in the Editor Window under the Carousel tab 

  1. Click +Add to the right
  2. Complete the following fields as necessary
  3. Repeat all steps again to add additional carousels to the same

Feature

Description

Steps
Language  If you have the Multi-Language feature enabled, select a language  Select a language from the dropdown list
State Determine if you want this published or unpublished on the page Select Enabled or Disabled from the dropdown list
Title 50 characters maximum Enter text in the field
Subtitle 50 characters maximum Enter text in the field
Additional Features
  • Disable image fade effect: By default, the image will display with a gradient fade effect. 
    • Select Disable image fade effect if you don't want the gradient fade.
  • Show CTA button
  • Show Player Icon
 Click to add or remove a check mark in the box for any of these features if you want it to show on the carousel
Button Text
  • *You can only select this feature if the Show CTA (Call-To-Action) button is enabled
  • Edit the text that appears on the button 
  • 20 characters maximum
 Enter the text you want to appear on the CTA button
URL Link to an external website or website, enter the link in the URL field.
When viewers click the banner image, they'll be directed to this link 		Enter the URL to the text field
Select Existing Vod Or Live Event Direct the viewer to a video that will appear when they click the CTA button Click the + button to link to video content from your platform, and start typing the name of the video or live event. When the list of suggestions appears, select the item and then click Add URL
URL Target Add an external or internal page URL here. Include the http or https protocol of the URL when adding to this field, e.g. https:/vidflex.com In the URL Target drop-down, select Same window or New window
Position The order number of the carousel images (when there's more than one). For example, if you want this banner to appear first in the carousel, you can set the position as 0. For the other carousels, set their position as 1, 2, 3, 4, etc.) Use the arrows to change the order. When a position is not set, carousels will appear in random order in the carousel whenever landing on the page
Start Date Set the date when the carousel will appear on your platform. When no dates are selected, the banner  will be displayed whenever its published Click the calendar button and select the date to adjust it
End Date Set the date when the carousel will disappear on your platform. When no dates are selected, the carousel will be displayed indefinitely

Click the calendar button and select the date to adjust it

Adding a carousel image

After you've configured the carousel options, you can upload an image file to it:

  1. Click Item Image
  2. Click Choose File
    1. Browse to and select the image
    2. Click Open
  3. A progress bar appears to show that the image is uploading
  4. A preview of the uploaded image appears after it has been uploaded successfully

Setting the carousel rotating duration

If you’ve added multiple carousel images to the Top Carousel widget, the carousel will rotate the display of the banners.

You can set the length of time (in seconds) the carousel will appear before rotating to the next carousel.

  1. Click the General Tab
  2. Use the
    1. For example, if the duration is set at 4, that means the top carousel will change the display every 4 seconds

  3. Click Save