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 newly supported ‘Video Backgrounds’, the Main Menu Carousel panels allow you to create unique and custom brand experiences.

To ensure a great brand and user experience, it’s recommended to keep the following best practices in mind when creating video backgrounds:

  • Keep your video duration under 30 seconds – 10-15 seconds for best performance.
  • As videos will be looped automatically, try to align your first and last frame, helping to create the illusion of a seamless transition. If needed, add a short fade-in/out to your final video.
  • Audio is not supported.
  • Avoid using (or limiting) flashy or distracting strobe effects.
  • Be sure to provide a dedicated “poster” image that matches your video (JPG, GIF or PNG). Mobile devices do not support video backgrounds, at this time.
    • An optional Mobile Background Image can be added to ensure optimal display of your branding graphics across all device sizes. Recommend size: 1024 X 768px.

Note: Videos will be encoded and auto-optimized to ensure good quality with fast load times, for all users.

Check out these great resources for royalty free, commercial use 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; }

Related Articles