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 use the Hero widget, ensure its enabled in the Widgets Bundle dashboard at PluginsSiteOrigin Widgets. The Hero widget can be inserted into any theme widget area at AppearanceWidgets or any page or post using Page Builder.

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.

Content

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).

Buttons

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:

[buttons]

Background

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.

Timeout
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

Height
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
Set the font size of any headings used in the widget contents.

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.