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 is ready to be used anywhere:
Page Builder: Insert widgets in Page Builder by SiteOrigin in either the Classic Editor or Page Builder Layout Block in the Block Editor.
Block Editor: 100% Block Editor compatible. Insert widgets using the SiteOrigin Widgets Block featuring a live widget search form.
Theme and Plugin Widget Areas: Insert widgets into any theme or plugin widget area.
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.
Select the image size to be used. Used Full or choose from one of the thumbnail sizes provided by your WordPress installation. If you’d like to add a new image size to the list, consider using the plugin Simple Image Sizes.
Background image type
Select the background image type. Only cover is currently available.
If you’re using SiteOrigin Premium, Parallax and Fixed will be available as options.
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.
Currently only for YouTube videos.
Please, note that autoplay for YouTube videos will only work on desktop devices. On mobile devices, autoplay is automatically deactivated but users can tap to play the video.
Select the video format. Choose between MP4, WebM, and Ogg.
Note: A Loop slide background videos setting is available in the Slider Controls section.
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.
Change slides automatically without user interaction.
Autoplay pause on hover
Pause autoplay when hovering over a slide.
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
Always show navigation on desktop
Navigation arrows and dots are displayed on hover. Enable to always display navigation elements on desktop.
Always show navigation on mobile
Enable this setting if you’d like slider navigation elements to always be visible on mobile devices.
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.
Show slide background videos on mobile
Allow slide background videos to appear on mobile devices that support autoplay.
Please, note that if you’re using a YouTube video, autoplay isn’t supported on mobile devices. However, because, YouTube videos are manually playable on mobile devices, the slide fallback image won’t be used.
Loop slide background videos
Enable to loop (replay) slide background videos.
Set a height. If no height is set, the Hero will adjust to the content.
Set the height when the mobile screen resolution is reached. The Mobile Width can be adjusted at SettingsPage BuilderLayout: Mobile Width.
Vertically center slide contents
For perfect centering, consider setting the Extra top padding setting to
0 when enabling this setting.
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.
Enter the h1 font size. h2 – h6 will be proportionally sized based on this value.
Dynamically adjust your heading font size based on screen size.
FitText compressor strength
The higher the value, the more your headings will be scaled down. Values above
1 are allowed.
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 color of the paragraph text used in the widget. Please, note that this setting will take precedence over to the Widget StylesDesignFont Color setting.
Set the size of the paragraph text used in the widget.
Choose to use the theme font or set a custom font for the paragraph text used in the widget.
Text shadow intensity
If paragraph text has used in the widget contents area this setting can be used to adjust the text drop-shadow intensity.
Set the text link color.
Link hover color
Set the text link hover color.
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.
If you’d like to create a fullscreen slider using the Hero widget, please, read our fullscreen Hero tutorial.