The Hero Widget allows you to easily create visually appealing banners with buttons on your custom pages to drive Users to specific areas of your portal. Here's an example:


Here's how you add and configure a Hero Widget in your portal:

  1. Logged in as an Administrator, go to your home page and switch to the Layout Editor, then Type "Hero" into the search box of the "Add Widgets" sidebar on the right (see Tutorial on Custom Pages).
  2. Drag the Hero Widget onto the screen and place it in the desired location. In most cases, you'll want the Hero Widget to at the top of the page, so it's the first thing visitors see upon logging into the portal.
  3. The Hero Widget configuration window will appear (see screenshot below). 
  4. Enter the title and description. You can use placeholders to create a more dynamic experience and have the system automatically display the User's name in the Widget. 
  5. Add a background image by uploading your own image or using one of the pre-loaded background images. 
    • Image Requirements: Image should be saved as GIF, PNG, JPG or JPEG and be at least 500px in both dimensions. 
  6. Choose a text color and/or text shadow color that is readable over the background image. To ensure the text is readable you may want to consider enabling the Image Overlay functionality to adjust the color and/or transparency of the background image.  
  7. Click "Add Button" to begin adding buttons to the Widget. Buttons will help direct Users to specific areas in the portal, so pick 2-4 areas you think Users will find the most useful.  You'll then need to set a name and destination for each button. Keep in mind, Users will only see the buttons in the Widget that are linked to the areas in the portal that they have access to in their Group permissions. For example, if you add a button and link it to Training & Certification module, only Users that have access to the Training & Certification module in their Group permissions will see the button in the Widget.
  8. Set the appropriate Group permissions for the Widget itself.
  9. Scroll down the page to preview the Hero Widget before saving, but keep in mind the Widget will display differently depending on the device and screen size of the User.
  10. Click Save to save your changes. 

Hero Banner- Edit Screen