# Edit a section in your website

The header section is typically the first thing visitors see on your website. It can include a headline, description, background image, and call to action buttons. You can add a header section to any page on your site.

### Edit your section content

{% hint style="info" %}
**When to use:** You want to customize the text, image, and buttons in your header section.
{% endhint %}

1. Click on your header section from the left-hand sidebar.
2. Click the **Content** tab.
3. Select a **Layout** from the dropdown.
4. Enter your **Pre-header** text.
5. Enter your **Header** text.
6. Enter your **Description** text.
7. Click **Choose File** to upload a background image from your **My Media** folder, or click **Upload file** to select an image from your device.
8. Click **+ Add Button** to add a call to action, or click an existing button to edit it.
9. Enter your **Confidence Copy** text. This appears below the call to action buttons.

{% embed url="<https://app.supademo.com/demo/cmo30u8kc4si1ru18v44kvo9i>" %}

#### Page layout options

* **Right Image** — Header text on the left with an image on the right.
* **Centered Image** — Header text centered with an image behind it.
* **Full Screen Image** — A full-width background image with text overlaid.
* **Sub-page Header** — A simplified header for interior pages.

#### Call to action button fields

* **Text** — The label displayed on the button.
* **Style** — The visual style of the button.
* **Action** — What happens when a visitor clicks the button.
* **URL** — The destination page or link.

To delete a button, click the **trash icon** next to the button name in the left-hand sidebar.

***

### Edit your header design

{% hint style="info" %}
**When to use:** You want to adjust the colors and styling of your header section.
{% endhint %}

1. Click on your header section from the left-hand sidebar.
2. Click the **Design** tab.
3. Adjust the settings for your header section.

#### Design fields

* **Background blur** — Controls the blur effect on the background image.
* **Background color** — The background color of the header section.
* **Pre-header color** — The text color of the pre-header.
* **Header color** — The text color of the main heading.
* **Description color** — The text color of the description.
* **Confidence copy color** — The text color of the confidence copy below the buttons.

{% embed url="<https://app.supademo.com/demo/cmo31ei2s4tbyru185o22avpx>" %}