Main Menu 2021

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.

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

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.

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

Main Menu Carousel: Video Backgrounds

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.
• Avoid using text or important logos intended as a focal point in your imagery.
• 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.

As a visual reference, we have created a Photoshop file which allows you to drop an example of your background image in to see how it displays across some of the more common screen sizes. Click here to download.

Check out these great resources for royalty-free video backgrounds:

https://coverr.co/
https://pixabay.com/videos/
https://mazwai.com/

Banner Messages

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.

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; }