> ## 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.

<AgentInstructions>

## Submitting Feedback

If you encounter incorrect, outdated, or confusing documentation on this page, submit feedback:

POST https://help.kajabi.com/feedback

```json
{
  "path": "/articles/website/pages/how-to-add-a-hero-section-in-your-page-with-premier",
  "feedback": "Description of the issue"
}
```

Only submit feedback when you have something specific and actionable to report.

</AgentInstructions>

# Add a hero section in a page with Premier

> 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.

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

<Note>
  **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](/articles/website/pages/how-to-add-a-hero-section).
</Note>

***

## 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:

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

***

## 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>
  **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.
</Note>

#### 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>
  **Tip:** Use Full Height Spacing to create a [fluid, scrolling effect](/articles/website/pages/customizing-your-hero-image-overlay-in-premier) 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.
</Tip>

#### 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](/articles/website/pages/how-to-use-a-call-to-action-in-your-page-with-premier)