Hero Image Widget

Hero Image Widget

Last updated 02.20.25

A Hero Image is the main big photo typically across the top of a page. The Hero Image is top real estate on your site because it is the first thing a user sees when they come to your site. It is a great area for marketing as you can change text and include a call to action (button) to take users into the site or inform them of important happenings. 

The Hero Image can be used in other locations on the site wherever appropriate.

Add Hero Image to the page 

  1. Select where on the page you would like the widget to appear. 
  2. Click on the blue plus add widget icon   
  3. Select the Hero Image widget from the widget pop up 
  4. Once the widget is added to the page, hover over the added widget until it displays the properties and trash icons. Click on the gear-shaped properties icon.

Hero Image Properties

  1. In the Hero Image properties pop up, adjust various settings including text content, text alignment, text background color, photo size, number of buttons (1-2), button text, button style and button color. Note each button is styled separately. They can be different colors and styles.
  2. Click Apply button to update the widget with selected properties. The properties pop up will automatically close.

How to delete the Hero Image Widget

Hover over the Hero Image widget until it displays the properties and trash icons and click on the trash icon to delete. 

How to reposition the Hero Image Widget

Hover over the Hero Image widget until it displays the grab icon on the left. Simply drag and drop in a new location. 

Hero Image Widget Properties

PROPERTYDESCRIPTION
VisibleChecking and unchecking the checkbox toggles widget visibility on the page. This allows for prepping the content in edit mode before widget debut.
Aspect Ratio - Small:Recommended for mobile when hero includes text:
Square 640 x 640 px

Optional sizes for very little or no text. Be sure to test on mobile.
• 2:1 – 640 x 320 px
• 3:1 – 640 x 214 px
• 16:9 – 640 x 360 px 
Image - Small:Clicking the Select button opens a dialog box allowing you to select an image via the Media Library Application. Image should not be more than 100kb in file size.
Aspect Ratio - Medium:Be sure to test tablet size if hero includes text.
• Square 1024 x 1024 px (rarely used)
• 2:1 – 1024 x 512 px
• 3:1 – 1024 x 342 px
• 16:9 – 1024 x 576 px 
Image - Medium:Clicking the Select button opens a dialog box allowing you to select an image via the Media Library Application. Image should not be more than 100kb in file size.
Aspect Ratio - Large:Square 1920 x 1920 px (rarely used)
2:1 – 1920 x 960 px
3:1 – 1920 x 640 px
4:1 – 1920 x 480 px
5:1 – 1920 x 384 px
6:1 – 1920 x 320 px
16:9 – 1920 x 1080 px (rarely used)
Image - Large:Clicking the Select button opens a dialog box allowing you to select an image via the Media Library Application. Image should not be more than 100kb in file size.
Header Text:Text entry field for a limited large headline. This will give you big bold text across your Hero Image. Be sure to test on tablet and mobile. 
Enable H1 header tag:Checkbox to add the H1 header tag to the Hero Image widget to improve SEO. This is recommended for the Hero Image widget that appears at the top of a web page, not on those images used elsewhere on the page.
Hero Text:Text entry field for small paragraph text across your Hero Image 
Custom Design:Selecting alternate layouts in CSS Class and Text Background Color unlocks a wide selection of looks for your Hero Image

Custom CSS Class Menu
Layout A – Text Box Centered (default)
Layout B – Text Box Left Aligned
Layout C – Full Image Centered
Layout D – Text Box Right Aligned
Layout E – Text Box Wide Centered Top
Layout F – Text Box Wide Centered Bottom
Layout G – Full Background with Text Borders
Layout H – No Button Shown – Image Clickable
Layout I – Default layout (usually a custom design)
Layout J – Text Box Floating Left
Layout K – Text Box Floating Right

Text Background Color Menu
Black Overlay (Default)
Primary Color Overlay 90%
Primary Color Multiply 90%
Secondary Color Multiply 90%
Secondary Color Overlay 90%
White 75%
Light Gray 75%
Medium Gray 75%
Dark Gray 75%
None 
Button Properties: Number of Buttons The widget can feature none, one or two buttons by selecting a number from the menu. If the user selects 0 no buttons will display. Selecting 1-2 buttons will cause the below properties to display.
[Button] TextEnter text to be featured on each button. Typically shorter text is better for ease of reading and to keep the design tidy. If text field is blank, the button will not display.
[Button] StyleSelect pre-built style options from the menu. Note that if two buttons are featured, each one may have its own style. Below is the list of styles that can be selected:
Default - a rectangular shape with a solid-color fill
Round - a pill shape with a solid-color fill
Radius - a rectangle with slightly rounded corners with a solid-color fill
Hollow - a rectangular outline shape with a transparent fill
Expanded - an extra-wide rectangular shape with a solid-color fill
Disabled - a rectangular shape faded back to denote that it is disabled
Clear - a transparent button with only text visible
[Button] ColorSelect from your custom brand colors or grayscale options from the menu for button fills or outlines. Note that if two buttons are featured, each one may have its own color. Below is the list of colors that may be selected:
Default
Primary Color
Primary Color – Light
Primary Color – Dark
Secondary Color
Secondary Color – Light
Secondary Color – Dark
Gradient
White
Light Gray
Medium Gray
Dark Gray
Black 
[Button] TargetBelow are the targets to choose from:  
Default – this will open in the same tab of the browser and is typically used to move around within your site
Blank – this will open in a new tab of the browser and is typically used for links that leave your site
[Button] Target URLSelect Page
Checked: clicking the Select Button opens a dialog box to access content pages within the current site only.
Note that it is possible to type directly in the Target URL field to add the URL to an anchor tag within the site, to type in a third-party URL to leave the site, to open an email (mailto: emailaddress.com) or link to a phone number (tel: 000-000-000).
Unchecked: opens dialog box to specifically access the Media Library to select an image or document.

Hero Image Widget Examples

Hero Image Widget

Layout A - Text Box Centered

Hero Image Widget

Layout B - Text Box Left Aligned & Primary Color Multiply Overlay

Hero Image Widget

Layout C - Full Image Centered & Secondary Color Multiply Overlay

Hero Image Widget

Layout D - Text Box Right Aligned & Secondary Color Overlay

Hero Image Widget

Layout E - Text Box Wide Centered Top & Dark Gray Overlay

Hero Image Widget

Layout F - Text Box Wide Centered Bottom & Medium Gray Overlay

Hero Image Example 2

Layout G - Full Background With Text & Primary Color Overlay

Header Text

Layout J - Text Box Floating Left