Main Menu 2021

Overview

In this article we’ll cover the differences between the current Main Menu and the all new 2021 version.

The biggest and most visually stunning change to the Main Menu, is how it now immediately submerges your Users in your brand and encourages them to explore, discover and engage in all new ways.

How to Enable

The New Main Menu is Theme specific, meaning you can enable it for just one or all of your Locations.

  • First, head over to the Private Label Management area and select “Edit Theme”.
  • Then, under “Theme Settings” > “System Overrides”, simply toggle “Enable New Menu Main” to Yes and select Save.
  • Be sure to return to the “Appearance” tab and make any updates to the “Main Menu Carousel” section to leverage the new Video Backgrounds and layout.
Main Menu 2021 - Theme Settings

Note the additional Settings which accomodate the new Main Menu…

  • Leaderboard Display: The default display is One Column, but if the Leaderboard is a larger part of your VT System experience, switch this to Full Width for a larger visual impact on the Main Menu.
  • Hide Recent Training: This will remove the panel containing a users most recently training Chapters.
  • Hide “What’s New” Hero Widget: Although the new hero widget provides dynamic and relevant new information for your end-users, some may wish to hide this to provide a most visually impactful brand experience with the latest Video Background Carousels.

What’s New

Welcome Widget

The new Welcome (or “What’s New”) panel greets your users every time they sign-in and provides them new and relevant messages to help drive them quickly into content that matters most. 

You can control the welcome message the same way as before, within the Location Settings. It even supports HTML so you can add images or extra flare if you like. 

Note: As this was designed to adapt to all screen sizes, only basic HTML formatting is supported. Inline style tags will be removed.

The What’s New messages that your users will be alerted to include:

  • Communication Center messages
  • New available Postables
  • New Assignments
  • Upcoming and currently Live Events

With the addition of ‘Video Backgrounds’, the new Main Menu Carousel panels allow you to create unique and immersive brand experiences.

It is recommended to keep the following best practices in mind when creating and using video backgrounds:

  • Keep the duration under 30 seconds – 10-15 seconds for best performance.
  • Videos are looped automatically. For a truly seamless effect, align your first and last frames.
  • Audio is not supported.
  • Avoid using (or limiting) flashy and distracting graphic effects.
  • Be sure to provide a dedicated poster or ‘Background Image’ for networks and devices that can’t support your video. Files can be uploaded as JPG, GIF or PNG’s.
  • An optional ‘Mobile Background Image’ can be added to ensure optimal display of your branding graphics across all device sizes – some mobile devices may not support video backgrounds, at this time. Recommend size: 1024 X 768px.

Note: When uploading videos for background use, they will be encoded and auto-optimized to ensure great quality with fast load times, for all users. Learn More…

Check out these great resources for royalty-free video backgrounds:
https://coverr.co/
https://pixabay.com/videos/
https://mazwai.com/

The ‘Left and Right Banner Messages’ now provide a more marketable footprint with more visual impact. Leverage better messaging options with dedicated Headline, Body and Call-to-Action text to drive attention and increase engagement.

Banner Message


You can still manage these Banners within the Location Settings OR the System Settings, although the settings have been updated to support the new main menu.

Recommended Best Practices:

  • 1416px X 628px
  • JPG, GIF and PNG formats are supported.
  • Avoid text in your imagery, particular as a focal point.
  • A semi-opaque (darkened) background is automatically added to provide better contrast between images and the content that overlays it.**

**If required, you can easily remove this via Custom CSS to better accommodate your design. Simply add the following snippet of code under Private Label Management > Appearance > (Advanced Options) Custom CSS:

 .banner-wrapper:after { display: none; }
Updated on February 24, 2022

Related Articles

Need Support?
Can't find the answer you're looking for?
Contact Support