> ## Documentation Index
> Fetch the complete documentation index at: https://help.kajabi.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Add a hero section

> Learn to add a Hero Section to your pages.

<div className="w-full aspect-video">
  <iframe src="https://fast.wistia.net/embed/iframe/ow6mal32g5" allow="autoplay; fullscreen" allowFullScreen className="w-full h-full" />
</div>

<Note>
  **Note:** This guide refers to the latest page editor available with the Website Builder and Kajabi Pages. If you are using the Premier Legacy Templates, please refer to the guide [here](/articles/website/pages/how-to-add-a-hero-section-in-your-page-with-premier).
</Note>

***

## What is a hero section?

The Hero Section is a Background with a Content Overlay.

Although simple, understanding the concept of the Hero Section is powerful because it gives you the flexibility to build and create beautifully designed pages by simply adding a background to your Sections.

Kajabi helps streamline the process of building your pages by providing Hero Section presets. Building pages in Kajabi gives you the freedom to create any Section as a Hero Section by simply customizing your [Background in the Section Settings](/articles/website/pages/how-to-customize-your-section-background-settings) of any Section on your page.

**Although flexible, it is important to note the unique build of the Hero Section Presets.**

Adding Blocks and customizing the Background of your Sections can create similar Sections to the Hero Section Presets but you may notice that the appearance will differ slightly when adding Block Types to a Section.

### Adding a hero section

* Open the **Website** tab from the Dashboard
* Select the **Pages** tab
* Open the page editor for your Page. [Learn more](/articles/website/pages/how-to-get-to-the-page-editor)
* Navigate to the sidebar panel
* Click **Add Section**
* Select your Section from **Hero**:

<div className="w-full aspect-video">
  <iframe src="https://fast.wistia.net/embed/iframe/omshe00yem" allow="autoplay; fullscreen" allowFullScreen className="w-full h-full" />
</div>

<Tip>
  **Tip:** A Hero section with a Countdown, Form, Image, or Video can be removed or added when editing. Because a Section is made up of blocks, simply Add Content to add an additional Block Type to your Hero section. Keep in mind, the appearance may differ slightly when adding Block Types to a Section compared to adding a Section Preset.
</Tip>

***

## Preset hero sections

Learn about each Hero Section:

* Hero
* Hero Countdown
* Hero with Form
* Hero with Image
* Hero with Audio
* Hero with Video

### Hero

Adding a Hero Section to your page will generate a Text Block with the Call to Action Block Setting enabled. This may be familiar to you if you have added a [Call to Action Section](/articles/website/pages/add-a-basic-content-section-to-your-page#call-to-action) to your page.

<img src="https://mintcdn.com/kajabi-support/dcD7YxiS5O6RZ8v2/articles/images/3e40bd38_16932093491227.png?fit=max&auto=format&n=dcD7YxiS5O6RZ8v2&q=85&s=8194216b7ed5591fc92f0b827bf188bb" alt="4DC7011E-EDBB-4188-B486-FC3A797D2296.png" width="1657" height="972" data-path="articles/images/3e40bd38_16932093491227.png" />

Customize your Hero Section by editing the [Text Block](/articles/website/pages/how-to-add-a-text-block-to-your-page#customizing-your-text-block) and Section Settings to change the appearance, behavior, and content.

**Section Settings:**

* [Background](/articles/website/pages/how-to-customize-your-section-background-settings)
* [Section Layout](/articles/website/pages/customizing-section-layout-settings)
* [Time Reveal](/articles/website/pages/customizing-time-reveal-settings)

### Hero countdown

The Hero Countdown Section generates a single Text Block and a Countdown Block. However, you will notice that a Hero Countdown Section will differ in appearance compared to adding a [Countdown Block](/articles/website/pages/how-to-add-a-countdown-block-to-your-page) to a Section:

<img src="https://mintcdn.com/kajabi-support/8uPrhEgKJdMt5T5V/articles/images/f5ed0a9b_16932201215259.png?fit=max&auto=format&n=8uPrhEgKJdMt5T5V&q=85&s=0f145cecdddd3b1cf883ddba21c4950d" alt="22FF1A9A-A8AA-4B8C-8E64-A292B417D862.png" width="1657" height="973" data-path="articles/images/f5ed0a9b_16932201215259.png" />

Customize your Hero Section by editing the [Text Block](/articles/website/pages/how-to-add-a-text-block-to-your-page#customizing-your-text-block), [Countdown Block](/articles/website/pages/how-to-add-a-countdown-block-to-your-page), and Section Settings to change the appearance, behavior, and content.

**Section Settings:**

* [Background](/articles/website/pages/how-to-customize-your-section-background-settings)
* [Section Layout](/articles/website/pages/customizing-section-layout-settings)
* [Time Reveal](/articles/website/pages/customizing-time-reveal-settings)

### Hero with form

The Hero with Form Section generates a single Text Block and a Form Block. However, you will notice that creating a Hero with Form Section will differ slightly in appearance compared to adding a [Form Block](/articles/website/pages/how-to-add-a-form-to-your-page) to a Section.

Adding the Hero with Form Section includes a default Disclaimer Text to the Form Block:

<img src="https://mintcdn.com/kajabi-support/6C2WUJiFcENaSgpZ/articles/images/02aa0e1c_16932228991771.png?fit=max&auto=format&n=6C2WUJiFcENaSgpZ&q=85&s=08d5110ccb41ef173ad719933049d5df" alt="EAEA3A9D-7041-4CAE-8236-85F5D8569F68.png" width="1657" height="972" data-path="articles/images/02aa0e1c_16932228991771.png" />

Customize your Hero with Form Section by editing the [Text Block](/articles/website/pages/how-to-add-a-text-block-to-your-page#customizing-your-text-block), [Form Block](/articles/website/pages/how-to-add-a-form-to-your-page), and Section Settings to change the appearance, behavior, and content.

**Section Settings:**

* [Background](/articles/website/pages/how-to-customize-your-section-background-settings)
* [Section Layout](/articles/website/pages/customizing-section-layout-settings)
* [Time Reveal](/articles/website/pages/customizing-time-reveal-settings)

### Hero with image

The Hero with Form Section generates a single Text Block with the Call to Action Block Settings enabled and an Image Block:

<img src="https://mintcdn.com/kajabi-support/NHosPLWrdBkWec8r/articles/images/1a0a1f8e_16932306866587.png?fit=max&auto=format&n=NHosPLWrdBkWec8r&q=85&s=4c39e566cbc8359b4bfac9630e535421" alt="87503011-A209-44F0-A981-563BA8B95CC4.png" width="1657" height="971" data-path="articles/images/1a0a1f8e_16932306866587.png" />

Customize your Hero with Image Section by editing the [Text Block](/articles/website/pages/how-to-add-a-text-block-to-your-page#customizing-your-text-block), [Image Block](/articles/website/pages/how-to-add-an-image-to-your-page), and Section Settings to change the appearance, behavior, and content.

[Learn to customize your images with Adobe Express.](/articles/website/pages/how-to-customize-your-images-on-kajabi-with-adobe-express)

**Section Settings:**

* [Background](/articles/website/pages/how-to-customize-your-section-background-settings)
* [Section Layout](/articles/website/pages/customizing-section-layout-settings)
* [Time Reveal](/articles/website/pages/customizing-time-reveal-settings)

### Hero with audio

The Hero with Form Section generates a single Text Block with the Call to Action Block Settings enabled and an Audio Block:

<img src="https://mintcdn.com/kajabi-support/PSl7XzyvfgSe-sdv/articles/images/3b8da5fe_16932502584603.png?fit=max&auto=format&n=PSl7XzyvfgSe-sdv&q=85&s=b0eb3df689bc4c74dd64c21f67635656" alt="988F06D6-E030-42F9-A5D7-2B5F91B35FF7.png" width="1657" height="974" data-path="articles/images/3b8da5fe_16932502584603.png" />

Customize your Hero with Audio Section by editing the [Text Block](/articles/website/pages/how-to-add-a-text-block-to-your-page#customizing-your-text-block), [Video Block](/articles/website/pages/how-to-add-a-video-block-to-your-pages), and Section Settings to change the appearance, behavior, and content.

**Section Settings:**

* [Background](/articles/website/pages/how-to-customize-your-section-background-settings)
* [Section Layout](/articles/website/pages/customizing-section-layout-settings)
* [Time Reveal](/articles/website/pages/customizing-time-reveal-settings)

### Hero with video

The Hero with Form Section generates a single Text Block with the Call to Action Block Settings enabled and a Video Block:

<img src="https://mintcdn.com/kajabi-support/6C2WUJiFcENaSgpZ/articles/images/02f7f10e_16932568975771.png?fit=max&auto=format&n=6C2WUJiFcENaSgpZ&q=85&s=e004dd1211de7b9199989528ec04a43e" alt="A2326E5D-DC04-41A7-A186-3AFE658F8B87.png" width="1657" height="972" data-path="articles/images/02f7f10e_16932568975771.png" />

Customize your Hero with Form Section by editing the [Text Block](/articles/website/pages/how-to-add-a-text-block-to-your-page#customizing-your-text-block), [Video Block](/articles/website/pages/how-to-add-a-video-block-to-your-pages), and Section Settings to change the appearance, behavior, and content.

**Section Settings:**

* [Background](/articles/website/pages/how-to-customize-your-section-background-settings)
* [Section Layout](/articles/website/pages/customizing-section-layout-settings)
* [Time Reveal](/articles/website/pages/customizing-time-reveal-settings)