Skip to main content

Add a hero section to a page

Learn to add and customize a Hero section to your pages.

A Hero section is a background with a content overlay, and it is the first thing visitors see on your page. Use one to introduce your brand and point visitors to a single next step.

Kajabi gives you six Hero presets: Hero, Hero Countdown, Hero with Form, Hero with Image, Hero with Audio, and Hero with Video. Any section can also work as a hero when you add a background in its Section Settings, but the presets arrive with the right Blocks already in place.

Note: The first half of this article covers the latest page editor in the Website Builder and Kajabi Pages. If your site uses a Premier Legacy template, go to Hero sections in Premier Legacy templates.

Add a hero section in the page editor

  1. From the Dashboard, click Website, then Website Pages or Landing Pages.

  2. Open the page editor for the page you want to edit. Learn how to access the Page Editor.

  3. In the sidebar panel, click Add Section.

  4. Under Hero, select the preset you want.

A page can have up to 50 sections.

Customize hero section settings

Every Hero preset shares the same Section Settings:

Tip: You can add or remove a Countdown, Form, Image, or Video after you add a Hero section. Click Add Content in the Section Settings to add a Block. The result may look slightly different from the matching preset.

Choose a hero preset

Hero

Adds a Text Block with the Call to Action Block Setting turned on, like a Call to Action section.

Edit the Text Block and the Section Settings to change the appearance, behavior, and content.

Hero Countdown

Adds a Text Block and a Countdown Block. The look differs from adding a Countdown Block to another section.

Edit the Text Block, the Countdown Block, and the Section Settings.

Hero with Form

Adds a Text Block and a Form Block, with default Disclaimer text in the Form Block. The look differs slightly from adding a Form Block to another section.

Edit the Text Block, the Form Block, and the Section Settings.

Hero with Image

Adds a Text Block with the Call to Action Block Setting turned on and an Image Block.

Edit the Text Block, the Image Block, and the Section Settings. Learn how to customize images with Adobe Express.

Hero with Audio

Adds a Text Block with the Call to Action Block Setting turned on and an Audio Block.

Edit the Text Block, the Audio Block, and the Section Settings. Learn how to add audio to a page.

Hero with Video

Adds a Text Block with the Call to Action Block Setting turned on and a Video Block.

Edit the Text Block, the Video Block, and the Section Settings.

Hero sections in Premier Legacy templates

Premier Legacy templates have a Hero section with its own settings for background image or video, overlay color, spacing, and alignment. If a background video does not play well in Premier, add a Hero with Video preset in the page editor instead.

Add a hero section in Premier

  1. From the Dashboard, click Website, then Website Pages.

  2. Click the title of the page you want to edit, or click Customize.

  3. In the sidebar editor, click Add Section.

  4. Click Hero.

  5. Click Add.

  6. Drag and drop the new section in the sidebar editor to move it. A new Hero section appears at the bottom of the page.

  7. Click Save.

Edit the hero title and body text

Write your message in the Text Box of the editor. These tools help you shape it:

  • Source code to embed or enter code scripts

  • Headings, Inline, Blocks, and Alignment to change formatting

  • Bold, italic, and strikethrough to change how text looks

  • Color to change the color of selected text

  • Horizontal line to break up your text

  • Ordered and unordered lists

  • Indent to indent selected text

  • Insert/Edit a link to make text clickable

  • Enlarge to open a bigger text box

Set the hero background image or video

Under Hero Section Type, choose Background Image or Background Video, then upload your file. The Background Color can stand in for an image or video, or act as an overlay on top of it.

Note: A Background Video appears as a still image on mobile devices in the Premier template.

Adjust the hero image overlay

If your uploaded image or video does not appear, or looks too dark, the Background Color overlay is covering it. Lower the opacity, change the color, or turn the overlay off.

To turn off the overlay:

  1. Open the Hero section in the template editor.

  2. In the sidebar editor, uncheck Use Image Overlay.

To change the overlay color and opacity:

  1. Open the Hero section in the template editor.

  2. Scroll down to Background Color in the sidebar.

  3. Open the color picker and slide the opacity bar to the level you want.

Set text color, alignment, and spacing

Change the text color for the whole Hero section to match your brand. Then set how text lines up and how much space the section takes up.

Alignment options:

  • Left

  • Centered

  • Right

Spacing options:

  • Extra Small

  • Small

  • Medium

  • Large

  • Full Height
    ​

Create a full-height hero image

A Hero Image is a background accent for your page. It resizes to fit each visitor's screen, so it looks different on different devices. To create one, set Spacing to Full Height. On desktop, the background scrolls with a fluid effect.

Hero Image Full Height Setting

The image resizes from its center, so edit it before you upload it to put the main focal point in the middle. The recommended image size for the Hero background is 2880 x 1200 px. On mobile, a Background Image or Video appears as a still image.

Tip: Be careful with logos or text inside the image. They may not be visible to every visitor on every screen size.

Did this answer your question?

Related Articles