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:
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.
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.
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:
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.
Select the event to animate. Choose between Element enters screen, Element in screen, Page load, On hover and Frame display.
Distance, in pixels, the content must be above the bottom of the screen before animating in.
Time, in seconds, that the incoming animation lasts.
Hide before animation
Enable to hide the element before animating.
Time, in seconds, after the event to start the animation.
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.
Set a background color.
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.
Add background videos as required.
Use the Choose Media button to select your video file.
An external URL of the video. Overrides the above video file setting.
Select the video format. Choose between MP4, WebM and Ogg.
Set a video maximum height.
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.
Set the slider animation speed in miliseconds. Defaults to
How long each frame is displayed for in milliseconds. Defaults to
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.
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.
Set the size of the navigation arrows, defaults to
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.
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.
Set the contents (text and buttons) side padding.
Maximum container width
Set the maximum widget container width.
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.
Set the font color of any headings used in the widget contents.
Set the font size of any headings used in the widget contents.
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.
Set the size of the normal, non-heading text used in the widget.
Set the color of the normal, non-heading text used in the widget.
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.