Hero Image Widget

A Hero is a large image, often placed at the top of your site. It contains a background image, text, and call to action buttons. The Hero widget supports multiple slides, allowing you to present multiple messages.


To make use of this widget, go to PluginsSiteOrigin Widgets to activate the SiteOrigin Hero widget.

The Hero widget can be inserted into any theme widget area at AppearanceWidgets or any post/page using Page Builder by SiteOrigin. If you’re using the Block Editor, the Hero widget can be inserted via a SiteOrigin Layout or SiteOrigin Widget block.

Once the Hero widget has been inserted into your theme widget area or page/post using Page Builder, hover over it and click the Edit link to begin. You’ll then see the following sections:

Hero frames
In this section, you’ll add your Hero slides. One frame per slide. If you only have one Hero you’ll only be using one frame.

Slider Controls
If you’re using more than one frame, Slider Controls offer settings for elements like animation speed.

Design and Layout
Here you’ll find all of the visual settings for the Hero, including height, width, padding and font.

Hero frames

Click the Add button to add your first frame. The down arrow on the right opens the frame. The page icon duplicates the frame and the cross icon deletes the frame.


The content field is where you’ll insert your Hero text, buttons, and, if necessary, additional images, using the Add Media button (not the background image, we’ll get to that in a moment).


To add a button or buttons to your Hero, click Add below the Buttons header. As with the frame settings, the down arrow opens the interface, the page icon duplicates the button and the cross arrow deletes the button. Open the button and add your button text, destination URL (button link) and enable the option below if you want to open the button in a new window. Below, you’ll find sections for an Icon, Design and Layout and Other Attributes and SEO. These are the same sections found in the standalone button widget. For a complete overview of all of the button settings, see the Button widget documentation.

Once your button or buttons have been added you can insert them into the content field above using the shortcode:


Content Animation

The Content Animation section is added as part of SiteOrigin Premium. Different content animation settings can be selected for each frame.

Choose from a long list of animation types such as bounce, flash, pulse and many more.

Animation event
Select the event to animate. Choose between Element enters screen, Element in screen, Page load, On hover and Frame display.

Screen offset
Distance, in pixels, the content must be above the bottom of the screen before animating in.

Animation speed
Time, in seconds, that the incoming animation lasts.

Hide before animation
Enable to hide the element before animating.

Animation delay
Time, in seconds, after the event to start the animation.


Background image
Use the Background image to insert your Hero slide background image. Use the Choose Media button to upload an image or choose one from your Media Library. The Image Search button allows an easy search of royalty free stock photos.

Background image type
Select the background image type. Only cover is currently available. If you’re using SiteOrigin Premium, Parallax will be available as an option.

Background image opacity
Set the background image opacity. Use the slider to set a value between 0 and 100.

Background color
Set a background color.

Destination URL
Link the Hero background image. Enter the destination URL (link).

Open URL in a new window
Enable to open the background image link in a new window.

Background videos

Add background videos as required.

Video file
Use the Choose Media button to select your video file.

Video URL
An external URL of the video. Overrides the above video file setting.

Video format
Select the video format. Choose between MP4, WebM and Ogg.

Maximum Height
Set a video maximum height.

Slider Controls

If you’re using more than one frame (slide) then the Hero widget will also be a slider. The settings in this section are slider related.

Animation speed
Set the slider animation speed in miliseconds. Defaults to 800.

How long each frame is displayed for in milliseconds. Defaults to 8000.

Navigation color
The slider navigation elements are the next/previous arrows and the navigation dots that indicate how many slides are in the Hero and which side is being viewed.

Navigation style
Set the navigation element style, defaults to thin. Options are Ultra thin, Thin, Medium, Thick, Rounded ultra thin, Rounded thin, Rounded medium and Rounded thick.

Navigation size
Set the size of the navigation arrows, defaults to 25.

Swipe Control
Allow users to swipe through frames on mobile devices. In the event of a plugin or theme level conflict with other swipe related scripts, this setting can be disabled.

Design and Layout

Set a height. If no height is set, the Hero will adjust to the content.

Top and bottom padding
Set the contents (text and buttons) top and bottom padding.

Extra top padding
Additional padding added to the top of the slider.

Side padding
Set the contents (text and buttons) side padding.

Maximum container width
Set the maximum widget container width.

Heading font
If your widget content contains headings, heading one, heading two, heading three etc, then this setting can be used to set the font of those headings. Use theme font is the default.

Heading color
Set the font color of any headings used in the widget contents.

Heading size
Enter the h1 font size. h2 – h6 will be proportionally sized based on this value.

Use FitText
Dynamically adjust your heading font size based on screen size.

Heading shadow intensity
If headings have been used in the widget contents area this setting can be used to adjust the text drop-shadow intensity.

Text size
Set the size of the normal, non-heading text used in the widget.

Text color
Set the color of the normal, non-heading text used in the widget. Please, note that this setting will take precedence over to the Widget StylesDesignFont Color setting.

Optimizing for Mobile

The Hero widget sets the slide background image size to cover. Cover tells the browser to make sure the image always covers the entire container, even if it has to stretch the image or cut a little bit off one of the edges. If your image is cut off on mobile, consider using an image that has a central focus or subject. To make more of your image visible on mobile, consider setting padding at a row level and then remove that padding on mobile by setting the Mobile Padding to 0 0 0 0.