Build an impressive hero image section with custom content, buttons, background image, color, and video.
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.
Requirements
To use 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:
Hero frames
In this section, you’ll add your Hero slides—one frame per slide. If you only have one Hero, you’ll only use one frame.
Slider Controls
If you’re using more than one frame, Slider Controls offers settings for elements like animation speed.
Layout
Includes layout-related settings like height, padding, and width for desktop and mobile.
Design
Includes design-related settings like fonts, font sizes, and colors.
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).
Automatically add paragraphs
Enable to automatically add paragraph tags to your content.
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]
Content Animation
The Content Animation section is added as part of SiteOrigin Premium. Different content animation settings can be selected for each frame.
Animation
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
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. The External URL field can be used to add an image not hosted in your Media Library.
Image size
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.
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.
Autoplay
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.
Video format
Select the video format. Choose between MP4, WebM, and Ogg.
Loop slide background videos
Enable to loop slide background videos for the frame.
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.
Autoplay
Change slides automatically without user interaction.
Autoplay pause on hover
Pause autoplay when hovering over a slide.
Animation speed
Set the slider animation speed in miliseconds. Defaults to 800.
Timeout
How long each frame is displayed 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.
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.
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.
Umute icon
Slide background videos are muted. Enable to display an unmute/mute icon. Only applies to self-hosted videos.
Unmute icon position
Visible if the Unmute icon setting is enabled. Choose between Top right, Bottom right, Bottom left, and Top left.
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.
Layout
Desktop
The below settings are applicable to desktop devices. If settings in the Mobile section below are left blank the desktop settings will apply to all devices.
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.
Mobile
The below settings are applicable to mobile devices. If left blank, the above Desktop settings will apply.
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.
Vertically center slide contents
For perfect centering, consider setting the Extra top padding setting to 0 when enabling this setting.
Design
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.
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.
Text color
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.
Text size
Set the size of the paragraph text used in the widget.
Text font
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 been used in the widget contents area this setting can be used to adjust the text drop-shadow intensity.
Link color
Set the text link color.
Link hover color
Set the text link hover color.
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.
Create a Fullscreen Slider
If you’d like to create a fullscreen slider using the Hero Widget, please, read our fullscreen Hero tutorial.
Custom CSS Customization
Custom CSS rules can be added to Appearance > Custom CSS if you’re using the SiteOrigin CSS plugin.
Set the Margin Between Multiple Hero Buttons
.sow-slider-image-wrapper .sow-hero-buttons .so-widget-sow-button {
margin-right: 25px !important
}