How to Add a Hero Section in your Page with Premier

Yesenia

Updated

The Hero section is your statement piece. It's the first thing people see when they visit your page and acts as a great way to introduce your brand.

In this article:

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 new template from Pages. To add a video to your Hero Section in 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.

Learn how to use a Call to Action

And that's how to add a Hero Section in your Premier Page! Please vote below and let us know if you found this article helpful. We value your feedback. Thanks for being the best part of Kajabi!

Did you find this article helpful?

Need more help?

Contact Us