Setting up a homepage with Theming

Congratulations on setting up your homepage! Your homepage plays a very important role as it is the main entry point to your site. It lets your visitors know what your site is all about, and it's your chance to make a strong first impression on your visitors. With Kaltura's enhanced technology and a new selection of pre-built design components, you can build a functional and engaging homepage that's tailored exactly to your needs.

Check out an example of a homepage and its components below.

Now let's get started!

Step 1: Enable the Theming module

1. Navigate to https://{your_site_url}/admin/config/tab/theming or choose Theming from the Configuration Management panel of the KMS Administration area:  
   
2. In the Theming window, set the enabled field to 'Yes'.
   
3. Choose a theme for your homepage. There are two default themes available - Dark and Light. (The dark theme is shown in the sample homepage above.) You can also create your own custom theme (see the next step).

Create a custom theme (optional)

1. To create a custom theme, navigate down the page to the Themes section and click +Add "Themes"..
   
2. In the new window that opens, click Edit.  
   
3. The Theme Builder displays.
   
4. To learn more about how to create and manage your theme, visit our article Theme Builder.
5. After you have created a custom theme, it will appear in the CurrentTheme dropdown. Now you can set it as your site's default theme.
   
6. Click Preview to test your theme. You will be redirected to the site.  
   
7. A preview banner appears at the top of the page indicating that you are in preview mode. This is a local view preview only (based on a temp cookie in your browser) and will not affect any other users.
   
8. To exit the preview mode, click Turn Preview Off and return to the Configuration Management page by clicking on its tab.
9. Next, go to the features section and make sure that the header field is set to 'Yes'. 

   The features section lists the enabled theming pages in your instance.  

   Note that the preview mode will display all the site's theming pages regardless of their settings in the features section.

10. Click Save.

Step 2: Enable the Templatepages module 

1. Navigate to the Templatepages module either by choosing TemplatePages from the list on the Theming page (see below) or by choosing TemplatePages from the Configuration Management panel of the KMS Administration area.
   
2. In the Templatepages window, set the enabled field to 'Yes'.
   
3. Next, click +Add Templatepage. 
4. The new templatePage section appears. This is where you will configure the different elements that appear on your Homepage.

Step 3: Configure your template 

1. Enter a name for your templatepage in the pageName field, for example Home page.
2. Enter a title for the page in the pageTitle field. This title will show on the browsers' tabs.
3. Enter a header for the page in the pageHeader field (optional). This header will show on the top of the page only when using a Hero Unit.

Next, choose a navigation bar for your Homepage.

Navigation bar

1. From the navbarType drop-down, choose Site Navigation or Clean Navbar. 
   
2. If you choose Site Navigation, please skip straight to the Hero Unit section.
3. If you choose Clean Navbar, additional features are displayed (below). Complete the fields as you choose according to the instructions for each.

Custom logo

1. logoImageUpload - Upload an image to use at the top of the login and registration pages. Suggested logo size is 325px wide X 41px high. Note that the size of the logo image affects the layout of the page and header menu.
   Leave empty to use settings from the header module.
2. logoAltText - If logoImageUpload is empty, enter alternate text for the logo. Leave empty to use settings from the header module.
3. logoLink - Select the click behavior of the logo on this page:
   [1] Enter 'false' if you do not want the logo to be clickable;
   [2] Enter 'home' to display the home page (displayed when MediaSpace opens);
   [3] Enter a full URL (starting with https://) to open a different page in a new browser tab;
   [4] Leave empty to use settings from the header module.

Call-to-Action button

If you'd like to have a CTA button on your Homepage, complete the callToAction section.

1. ButtonText - Enter the text to display on the button.
2. ButtonAction - Enter the URL to launch when users click the button. Use a relative path to open in the same browser tab, or an absolute path, to open a new browser tab.
   
3. showLanguageSelector - If you'd like to have a language selector (assuming it is available on the site), set the showLanguageSelector field to Yes.

Next, set up your Hero unit. 

Hero banner

The Hero banner always appears at the top of the page. You can select from two types of Hero: Player Carousel or Text & Counter. You can also choose not to use a Hero at all. 

Player carousel

The Player Carousel presents a dynamic carousel, playing back a list of live or VOD media on a muted player to create a feeling of a live site and moving elements. The video is muted and appears like a carousel of GIFs. 

Here is an example of the Player Carousel Hero:

There are two sets of media that can be played on the carousel: LiveCategory and VODPlaylist. 

LiveCategory

To set up a LiveCategory for your Player Carousel, click the Select Category button and enter a category ID. Note, that in case an external category is selected, entitlements will apply and hide any media not published on the site.  

Live media will be presented at their scheduled time. Meaning, if the event is not live, the player and carousel will not show. When no media is live, the Hero will fall back to presenting the VOD list of media. Scheduled Room type media are not supported.

VodPlaylist 

To set up a VodPlaylist for your Player Carousel, select a playlist from the type drop-down menu. The available playlist types include a custom playlist and a channel playlist. 

Set the carousel transition intervals (in seconds) in the carouselInterval field. For the best results, it is recommended to select a 30 second transition time.

Text & Counter

The Text & Counter shows static texts on a selected background with the option to add a time counter.

Here is an example of a Text & Counter Hero:

To set up a Text & Counter:

1. Complete the Title and Description fields.
   
2. Complete the DateStart and DateEnd fields (or leave both fields empty if you prefer to not have a date).
   
3. Complete the next few fields according to your preference: 
   1. PrimaryCallToActionText - This text will appear on the button above the counter. 
   2. PrimaryCallToActionLink -This will take the user to a selected URL. 
   3. PrimaryCallToActionUrlParams 
4. If you would like a second CTA button, complete the SecondaryCallToActionText field and the SecondaryCallToActionLink field. 
   
5. Add a Time Counter.  The counter will count down to a specific time and date and disappear once the deadline is reached.
   
6. Upload a Background image for the hero. 

Next choose the components you'd like on your Homepage. 

Components

You can mix and match and add as many components as you want to your Homepage using the +Add Components button. 

Here is a list of Components:

• Text Only
• Single Playlist
• Two images side by side
• News Images
• Registration
• Collection of channels
• Banner & CTA
• Group of users

Text only

1. Type - Select Text Only from the drop-down menu.
2. Order - Enter the numerical order for the component. For example, if you want the text to appear as the fourth component from the top of the Homepage (as in the sample above), enter '4'.

   We suggest using high numbers that are not consecutive, for example, 10,20,30, and not 1,2,3. This will allow for simple changes in the future in case you want to add a new component. For example, if you want to add a component between the first and the second component, you can make it '15'.

   
   
3. Complete the text field with the text you want to display on your Homepage.
   
4. Complete the textColor and backgroundColor fields with the colors you want. (The example shows white text on a black background as seen in the sample above.)

Single playlist

1. Type - Select Single Playlist from the drop-down menu.
2. Order - Enter the numerical order for the component. For example, if you want the playlist to appear as the second component from the top of the Homepage (as in the sample above), enter '2'.
   
3.  AllowedGroups This feature allows you to limit the visibility of each component to a selected set of users in a group/s.
   
4. Select a title to show at the top left of the component using the headerText field.
   
5. Complete the headerLinkText field if you'd like to customize the text shown at the top right of the playlist, for example "Visit the playlist page". If you leave the field empty, the default text "See All" will appear, as shown in the image below.
   This is how it looks on the homepage:
   
6. On the playlist section, select the type of content of the playlist from the drop-down menu.
   
7. Choose 'No' or 'Yes' from the forceShowContent drop-down. 

8. On the itemsPerPage drop-down, select how many thumbnails you'd like on your page (2, 3 or 4). 

9. In the Time Shift field, set a time in minutes when an item will shift to the left periodically. 

Two images side by side

1. Type - Select 2 Images Side By Side from the drop-down menu.

2. Order - Enter the numerical order for the component. For example, if you want the playlist to appear as the third component from the top of the Homepage (as in the sample above), enter '3'.

3. In the leftImage window, choose from 3 options: imageEntryID, imageUrl or imageUpload. (This example shows an image upload.)

4. Next, complete the following fields according to your preference:

• callToAction - Add a link to navigate users. The link will open in a new tab. If empty, the image will not be clickable
• analyticsString - Add a string to send in analytics events. (optional)
• altText - Add an alt text string. (optional)
• openInTab - Select how the link will be opened, in a new browser tab, or in the current one.

News Images

Select a playlist of images to present on the template page as News items. Each image will have text which will open to a full article. Image sizes should be 760x920 (png or jpg).

1. Type - Select News Images from the drop-down menu.
2. Order - Enter the numerical order for the component. For example, if you want the text to appear as the sixth component from the top of the Homepage (as in the sample above), enter '6'.
   
3. allowedGroups - This feature allows you to limit the visibility of each component to a selected set of users in a group/s.
4. Complete the modalBoxMaskColor - Select the modal box mask color. Fill in HTML color codes or leave the field empty to use the default color.
5. playlistID  - Complete the Playlist ID with content to show in this component.
   

Registration

This component makes registering quick and easy for users. By clicking the "Register" button, the registration page opens on the side of the page for easy completion. No need to navigate elsewhere!

1. Type - Select Registration from the drop-down menu.
2. Order - Enter the numerical order for the component. For example, if you want the playlist to appear as the third component from the top of the Homepage (as in the sample above), enter '3'.
3. title - Enter a title for your registration page, for example, Register for the event.
4. buttonText - Add any text you want. If you leave the field empty, the default text Register will display.
5. scheduleTimeFrom - Enter the time you want registration to begin in unix time. Leave empty if you don't want to show a time.
6. Unix time is a common computer timestamp system. It counts seconds from 00:00:00 UTC on January 1, 1970, known as the Unix epoch, without considering leap seconds. You can use the on-line EpochConverter tool to convert your times.
7. scheduleTimeTo - Enter an end time (unix time). Leave empty if you don't want to show a time. 
8. inScheduleText - Enter text that you'd like to display while registration is open.
9. outofScheduleText - Enter text to display after registration has closed.

If the Siteregistration module is disabled, this component won't be visible to users. In addition, if the registrationClosed function in the Siteregistration module is set to 'Yes', the component won't appear.

Below is an example of the Registration component:

Collection of channels

This feature gives users an easy way to explore and access channel collections. Clicking 'See All' will take users to your channel collection page. If you don't have any channel collections yet, you can set them up in the ChannelCollections module. 

1. Type - Select News Images from the drop-down menu.
2. Order - Enter the numerical order for the component. For example, if you want the text to appear as the fourth component from the top of the Homepage (as in the sample above), enter '4'.
   
3. headerText - Type in any name you'd like for the component header, for example, 'Our channel collections'.
4. headerLinkText - Select the text for the component header link (simple text). Leave empty to use the default text.
5. timeShift - This determines how often each thumbnail in the collection will move to the left. Simply enter a duration in minutes (e.g., 1, 2, 3, 4) or leave empty to disable. The channels will appear on the page in the order specified in the ChannelCollections module's 'sortBy' field (the default sort you chose for your channel collection). The timeshift feature ensures that all channels will be displayed over time. 

6. In the collection window, choose the channel collection you want to display on the page. All your channel collections appear in the drop-down menu.

7. forceShowContent - Choose 'Yes' to display all collection content to every user, regardless of entitlements. This makes the component unclickable, but you can still choose a different link for the component's items, for example if you want to use this templatepage as an external page / landing page that everyone can see.

8. headerLinkAction - This is where you can add a link to take your users to the page you choose.

9. channelsInLine - Choose how many channels you'd like to display on one line - 6 or 8. (Choosing 8 will reduce the size of each circle.) The thumbnails come from your channel. If you've added a banner icon (see our Edit a Channel article), it becomes the thumbnail. Otherwise, the thumbnail uses the banner's central background.

10. maxLinesNumber - Choose how many lines of channels to display from the drop-down menu. The default is 2 lines.

Below is an example of the Collection of Channels component on a Video Portal site in 2 rows of 8:

Banner & CTA

This component provides a banner with text, a call-to-action button and background image.

1. Type - Select News Images from the drop-down menu.
2. Order - Enter the numerical order for the component. For example, if you want the text to appear as the fourth component from the top of the Homepage (as in the sample above), enter '4'.
3. HeaderText - Add the text that you want to appear as a title on the banner.
4. DescriptionText - Add a description or text that you want to display below the header.

5. Banner image - You have 3 options for adding an image: entryID, imageURL or imageupload.

6. Button - Enter text for the CTA button and the URL that will redirect users when they click it. (Note: If you have text but no URL, the button will not appear on the banner.)

Banner with a short description:

Banner with a long description:

Group of users

This component highlights a group of individuals, such as speakers or presenters, on your site's landing page. It presents a row of thumbnail images (or initials if no image is provided). Clicking on See All opens the group page (configured in the grouppage module) itself. Clicking on a group member's thumbnail opens a window displaying their bio, along with details of their previous or upcoming sessions. To navigate to that person's profile page, simply click on either "See profile page" or "See all sessions".

1. headerText - Add the text that you want to appear as a title (for example "Meet our Speakers").
2. headerLinkText - Type the text you want to display on the right for users to click. Leave empty to use the default text “See All”.
3. group - Choose a group from the allowed groups in the Grouppage module to display its users on the page. Only the first 20 people will show on the page.

   If no group is chosen, the component will be empty, and won't be displayed on the page.

4. uiType - Select how to display group members:
   • Carousel - (default) People are displayed in a carousel format with right and left arrows for navigation. Users can scroll left to reach the last user on the list (round-robin).
   • Side by Side - People are displayed horizontally next to each other without a carousel.
5. usersToShow - Select an option:
   • Group list - Displays the first 20 people from the chosen group on the page, ordered alphabetically by name (A-Z).
   • Promoted users only - Displays only the promoted people from the selected group on the page, following the manual ordering as set on the group page.
6. timeShift - The group members list will periodically shift by one person to the left. You can specify the duration of the shift in minutes. For example, if you have a group with 30 users and set a 1-minute shift interval, initially users 1 to 20 will be displayed. After 1 minute, users 2 to 21 will be displayed, and this pattern will continue until all users are displayed. Please note that the change will only take effect upon refreshing the page. If you want to disable this feature, simply leave the duration field empty.

Below is an example of a Group of users component. Clicking See All displays the group page, which is configured in the grouppage module:

After you have configured all the components, scroll to the bottom of the page and click Save. This will save your new page and take you back to Templatepages, where you will see your newly created page.

Step 4. Enable the Custom pages module

1. Navigate to https://{your_site_url}/admin/config/tab/custompages or choose custompages from the Configuration Management panel of the KMS Administration area, or by clicking on the links provided (see below).
2. In the Custompages window, set the enabled field to Yes.
   
3. In the pageTemplate field, make sure the Homepage template you just created is displayed.
   
4. In the pageSlug field, type  "/" or "/Home" or any page name of your choice.
   
   
5. Click save.

Step 5: Set up the footer 

In the Footer module, the following can be configured:

• Logo
• Social links
• Texts and Links
• Background image or background color.

Step 6: Publish your homepage

1. Navigate to https://{your_site_url}/admin/config/tab/navigation or choose navigation from the Configuration Management panel of the KMS Administration area.
2. In the pre window, set the fields as shown below. 

   The homepage must be the first item (top one) in your pre navigation items to function as the main landing page of the site.

   
   
3. Scroll to the bottom of the page and click save.
4. To view the home page, click the GO TO SITE tab in the Configuration Management header.

You can repeat the steps in this guide to create multiple landing pages for your site.
Congratulations! You have successfully configured your homepage.