Hero

The Hero Image widget builds a large banner section, usually at the top of a page. Each frame has its own content, buttons, background image, color and video. Add more than one frame and the Hero becomes a slider.

Requirements

To use this widget, go to PluginsSiteOrigin Widgets and activate Hero Image.

You can use the Hero Image widget in three places:

Page Builder: Add the SiteOrigin Hero widget to a Page Builder layout in the Classic Editor or in the SiteOrigin Layout block.
Block Editor: Add the SiteOrigin Hero Image block. It is in the SiteOrigin category of the block inserter.
Widget areas: Add the widget to any theme or plugin widget area.

The widget form has four sections:

  • Hero frames: the content and background of each frame.
  • Slider Controls: autoplay, navigation and video settings.
  • Layout: height, padding and width for desktop and mobile.
  • Design: fonts, text sizes and colors.

The Hero widget form with Frame 1 open

Hero frames

Click Add to add a frame. Click a frame to open it. Use the icons on the right of a frame to duplicate or delete it. Each frame is one slide.

A Hero frame with the Background section open

Content
The text of the frame. Add headings, paragraphs, images and the [buttons] shortcode here.

Automatically add paragraphs
Add paragraph tags to the content automatically. Default: off.

Buttons

Click Add below Buttons to add a button. Each button has the same settings as the Button widget, except alignment. For details, see the Button widget documentation.

Buttons don’t appear until you add the [buttons] shortcode to the Content field. The widget puts all the frame’s buttons where the shortcode is.

Background

Background image
Choose an image from the Media Library, or enter an external image URL.

The next four settings appear after you set a background image.

Image Alt Text
A text alternative for screen readers. Leave it empty for decorative images.

Image size
The image size to load. Default: Full.

Background image type
How the image fills the frame. Default: Cover. Cover is the only free option.

Background image opacity
A value from 0 to 100. Default: 100.

Background color
The frame background color. Supports transparency. Default: #333333.

Destination URL
Makes the whole frame a link.

Open URL in a new window
Opens the Destination URL in a new tab. Default: off.

Background videos

Click Add below Background videos to add a video. Video files play muted.

Video file
Choose a video from the Media Library.

Video URL
An external video URL, such as a YouTube link. It overrides the Video file.

Autoplay
Autoplay can only be disabled for YouTube videos. This setting applies to embedded videos, such as YouTube. Video files always play automatically. Default: off.

Video format
The format of the video: MP4, WebM or Ogg. Default: MP4.

Loop slide background videos
Play the frame’s background videos in a loop. Default: off.

Background video opacity
A value from 0 to 100. Default: 100.

Slider Controls

The autoplay and navigation settings apply when the Hero has more than one frame. The video settings also apply to a single frame.

Autoplay
Change frames automatically. Default: on.

Autoplay pause on hover
Pause autoplay while the pointer is over the Hero. Appears when Autoplay is on. Default: off.

Animation speed
The length of the frame transition, in milliseconds. Default: 400.

Timeout
How long each frame shows, in milliseconds. Appears when Autoplay is on. Default: 8000.

Navigation color
The color of the arrows and pagination dots. Default: #FFFFFF.

Navigation style
The arrow style: Ultra thin, Thin, Medium, Thick, Rounded ultra thin, Rounded thin, Rounded medium or Rounded thick. Default: Thin.

Navigation size
The arrow size. Default: 25.

Always show navigation on desktop
Show the arrows and pagination dots at all times. By default, they show when the pointer is over the Hero. Default: off.

Always show navigation on mobile
Show the arrows and pagination dots on mobile devices. By default, they are hidden on mobile. Default: off.

Pagination alignment
The position of the pagination dots: Left, Center or Right. Default: Right.

Swipe control
Let visitors swipe between frames on touch devices. Turn it off if it conflicts with another swipe script. Default: on.

Unmute icon
Show a button that unmutes and mutes background videos. Default: off.

Unmute icon position
Top right, Bottom right, Bottom left or Top left. Appears when Unmute icon is on. Default: Top right.

Use FitVids
Scale embedded videos, such as YouTube, to fill the width of the frame and keep their aspect ratio. Default: on.

Show slide background videos on mobile
Show background video files on mobile devices that support autoplay. Embedded videos, such as YouTube, always show. Default: on.

Layout

Desktop

Height
The frame height. Leave it empty to fit the content.

Top and bottom padding
The space above and below the content. Default: 50px.

Extra top padding
Extra space added above the content. Default: 0px.

Side padding
The space to the left and right of the content. Default: 20px.

Maximum container width
The maximum width of the content area. Default: 1280px.

Mobile

These settings apply at and below the Responsive Breakpoint global setting (default 780px). Leave a field empty to use the Desktop value.

Height
The frame height on mobile. Leave it empty or set 0 to use the Desktop height.

Side padding
The space to the left and right of the content on mobile.

The Mobile Top and bottom padding and Extra top padding fields don’t have an effect at the moment. The Desktop values apply on mobile.

Vertically center align slide contents
Center the content vertically in the frame. For exact centering, set Extra top padding to 0. Default: off.

Design

Heading font
The font for headings in the content. Default: Use theme font.

Heading color
Default: #fff.

Heading size
The h1 size. The widget sizes h2 to h6 in proportion to it. Default: 38px.

Use FitText
Scale heading sizes with the screen width. Default: on.

FitText compressor strength
A higher value makes headings smaller. Values above 1 are allowed. Appears when Use FitText is on. Default: 0.85.

Heading shadow intensity
A value from 0 to 100. Set 0 for no shadow. Default: 50.

Text color
The paragraph text color. It overrides the Page Builder widget Font Color style. Default: #f6f6f6.

Text size
The paragraph text size. Default: 16px.

Text font
The paragraph font. Default: Use theme font.

Text shadow intensity
A value from 0 to 100. Set 0 for no shadow. Default: 25.

Link color
The color of text links in the content.

Link hover color
The color of text links on hover.

A hero frame with heading, text and button on the front end

Global Settings

Go to PluginsSiteOrigin Widgets and click Settings on the Hero Image widget.

Responsive Breakpoint
The screen width at which the Mobile layout settings apply. Default: 780px. This is a widget setting. It is separate from the Page Builder Mobile Width setting.

SiteOrigin Premium

SiteOrigin Premium adds these features to the Hero Image widget:

  • Hero: adds a Content animation section to each frame. Set the Animation, Animation event, Screen offset, Animation speed, Hide before animation and Animation delay.
  • Parallax Sliders: adds Parallax and Fixed to Background image type.
  • Multiple Media: select several images at once to create one frame for each image.
  • Anchor ID: adds Add slide anchor ID in the URL and Anchor ID to Slider Controls, so you can link to a frame.
  • Web Font Selector: adds a Google Fonts selector to the Content editor.

Premium Content animation settings in a Hero frame

Tips

Images on Mobile

The background image covers the whole frame. On narrow screens the browser crops the sides of the image. Use an image with its subject in the center. To change the crop on mobile, try a different Mobile Height.

Create a Fullscreen Hero

To make the Hero fill the screen, read the fullscreen Hero tutorial.

Advanced Customizations

Add custom CSS at AppearanceCustom CSS with the SiteOrigin CSS plugin, or in your theme’s Additional CSS.

Change the space between Hero buttons

.sow-hero-buttons .so-widget-sow-button {
	margin: 3px 12px 0 !important;
}