Note: This article refers to the Premier Legacy Templates and may be outdated. If you are having issues with video playback in your Hero Section, we recommend using a Landing Page template. To add a video to your Hero Section in Landing Pages, click here.
Add a hero section
To add a hero section to your page with the legacy template, Premier
Open the Website tab from the Dashboard
Click Pages
Select the title of the Page you wish to edit, or click Customize
In the sidebar editor, click Add Section
Click Hero
Then, click Add
Your newly created Hero section will generate at the bottom of your page. Simply drag and drop in the sidebar editor to rearrange
Click Save to keep your changes:
Customizing your hero section
With the Premier Template, customize your Hero Section Details and Appearance.
Hero details
Customize your Hero Section's Title and Body Text to communicate your message to your page visitors.
In the Text Box of the Editor, access additional tools to edit your text:
Access your text source code to embed or enter code scripts and integrate even more into your page
Change the Formatting of your text by adjusting Headings, Inline, Blocks, and Alignment
Customize the appearance of your text by making it bold, italicized, or strikethrough
Change the color of specific sections of your text
Add a horizontal line to break up your text
Create ordered and unordered lists with your text
Indent sections of your text
Insert/Edit a link into your text to create interactive, clickable text
Enlarge the text box to more easily edit your text
Hero section appearance
Customize the Appearance of your Hero Section to display either an Image or silent Video, the Background Color, Text Color, Alignment, and Spacing.
Select your hero section type to display
Background Image
Background Video
Then, upload your Image or Video to display as your Hero Section Background.
If your uploaded Image or Video does not appear, consider adjusting the Background Color Opacity Slider. The Background Color acts as an overlay and can obstruct a visitor's ability to view your uploaded Image or Video.
Note: If you choose to display a Background Video for the Hero Section Type with the Premier Template, your Video will be displayed as a static Image when viewed on mobile devices.
Adjust your background color
The Background Color can be used in place of an Image or Video or can be customized to act as an Overlay for your uploaded Image or Video.
Create a dramatic effect for your uploaded Image or Video by selecting a Background Color and adjusting the Opacity Slider to your desired opacity.
Customize your text color
Customize the entire Hero Section text color to fit your branding and design.
Alignment and spacing
Change the appearance of your Hero Section by customizing the Alignment of your text inside the Hero Section and customizing the overall spacing of the Section.
Alignment:
Left
Centered
Right
Spacing:
Extra Small
Small
Medium
Large
Full Height
Tip: Use Full Height Spacing to create a fluid, scrolling effect for your Hero Section Background when viewed on desktop. Keep in mind, the Background Image or Video will be displayed as a static Image when viewed on mobile devices.
Add a call to action
Encourage your page visitors to take action directly from your Hero Section with a Call to Action button.