The Banner Widget offers a simple yet versatile way to add a striking visual element to the top of your dashboard. Most dashboard pages use a visual banner at the top to help users quickly grasp the page's context, and the Banner Widget is designed precisely for this purpose.
Caption, Title, and Subtitle: Customize the banner’s content using rich text elements. The Banner Widget allows you to add a caption, bold title, and subtitle:
Rich Text Elements: Format each text component using options like font sizes, text colors, alignment, bold, italic, underline, highlighting, bullet points, and numbering, ensuring your crucial information is impactful and visually aligned with your brand.
Background: Elevate your dashboard's visual appeal by selecting a solid background color or uploading a custom image. This flexibility enables you to set the visual tone of your dashboard, enhancing branding or thematic consistency.
Buttons: The Banner Widget includes the option to add interactive Buttons. These can perform tasks such as accessing a URL, displaying a form, triggering a workflow, and providing clear pathways for user interaction.
Positioned at the top of the page, the Banner Widget sets the tone and context, combining aesthetics and functionality to create a professional and engaging user experience.
Configuring the Hero Widget
Step 1: Adding the Hero Widget
To add the Hero Widget to your dashboard:
Open the Dashboard View in SmartSuite.
Click Add Widget, then select Hero Widget from the list.
The widget will appear on your dashboard, ready for customization.
Step 2: Customizing Content
The Hero Widget features these main elements:
Text (Content): You can add formatted text, such as titles or key messages.
Image: Choose an image to enhance the look of your banner.
Background: Choose a background color or image to really make content pop.
Buttons: Add action buttons for users to click on.
Adding Text
You can add a headline, message, or any important information in the text field:
Click on the text area and type your message.
Use the text formatting options to bold, italicize, or change the size of the text.
Tip: Keep your text short and to the point for maximum impact.
You also have control over:
Bullets
Quote blocks
Links (URLs)
Text color
Highlight color
Text alignment
Adding an Image
You can upload an image or use an external URL to display it in the Hero Widget. Here’s how:
Click Upload Image to select a picture from your computer, or choose External Image URL to add an image from the web.
Adjust the Image Height using the slider (minimum: 50px, maximum: 800px). The image will resize dynamically as you move the slider.
Setting Image Fit
You can control how the image fits within the widget:
Contain: The image will fit inside the container without being cropped.
Cover: The image will cover the entire container, possibly cropping parts of it.
Fill: The image stretches to fill the container.
Scale Down: The image will scale down, ensuring it fits within the container without cropping.
Step 3: Customize Style
The Style Tab allows you to customize the look and feel of your Hero Widget.
Layout & Spacing
Layout
You can choose where the image and content will be positioned:
Left: Image on the left, text on the right (default).
Center: Both image and text will be centered.
Right: Image on the right, text on the left.
Spacing
You can adjust the layout further by changing how much space the image and text take:
40/60: 40% of the space is for the image, and 60% for text.
50/50: Image and text get equal space.
60/40: Text takes 60%, and the image takes 40%.
Width
You have two options for adjusting the way your HERO expands horizontally:
Fixed. The Hero conforms to the usual space allocated to a dashboard widget.
Full Width. The Hero will expand to fill all available horizontal space.
Background Customization
You can customize the background of your Hero Widget:
Choose between a color or an image background.
For color backgrounds, select a color using the color picker.
If using an image, upload it or use an external image URL.
Tip: Add a color overlay or background blur to make your text more readable.
Step 4: Adding Action Buttons
The Hero Widget allows you to add call-to-action buttons, guiding users to take specific actions.
To add a button, click on the Action Buttons tab and then click Add Button. A popup will allow you to configure your new button's settings.
Button Settings:
Label. Enter the text for the button, such as "Learn More" or "Contact Us."
Icon. Leave the default of No Icon or choose an icon to display on the button.
Background Color. Sets the background color for the button.
Text Color. Select light or dark text to compliment your background color choice.
Action. This setting determines what happens when the button is clicked. You have two options:
Link to an external URL: Direct users to another website. You can choose whether the link opens in the same tab or a new one.
Run a script: If you’re tech-savvy, you can execute a custom script, such as JavaScript, when the button is clicked. Choose whether to execute the script in a new tab, in a modal, or on click.
Appearance:
You can customize the display of the button in the following ways:
Alignment: Position your buttons (Left, Center, or Right).
Button Size: Choose between small, medium, or large button sizes.
Step 5: Preview Your Hero Widget
As you make changes, you’ll see them live in the Preview area. This helps you adjust and perfect your Hero Widget before saving.
Use Cases for the Hero Widget
Client Portal: Use the HERO Widget at the top of a client dashboard with a "Welcome" message, a background image matching the client's branding, and an Action Button that directs them to an onboarding form.
Product Showcase: Create a series of alternating HERO Widgets down the page, each highlighting different product features. Include images, captions, and buttons linking to specific product documentation.
Marketing Campaign Dashboard: Place a HERO Widget at the top to introduce the campaign, with a background image, campaign title, and a button that links to the campaign overview document.