# Updating the hero section

> Hero sections within the help center most commonly appear on the Home page. They are designed to welcome visitors and provide access to useful information and actions.

Source: https://www.zenplates.co/documentation/customization/updating-the-hero-section (Customization › Using theme settings)

This page describes the settings that you can use to customize the appearance of the hero section. To change the hero section's layout and the elements within it, use the [visual builder](https://www.zenplates.co/documentation/visual-builder/editing-elements).

## Background color and image

You can configure the background colors used in your theme's hero section using the following theme settings in the **Home page elements** setting group:

| Name                                                              | Identifier                | Description                                      |
| ----------------------------------------------------------------- | ------------------------- | ------------------------------------------------ |
| <span class="white-space-no-wrap">Hero background color 1</span>  | `bg_color_hero`           | Primary background color for the hero elements   |
| <span class="white-space-no-wrap">Hero background color 2</span>  | `bg_color_secondary_hero` | Secondary background color for the hero elements |
| <span class="white-space-no-wrap">Hero background gradient</span> | `bg_gradient_hero`        | The type of background color gradient to use     |

Selecting different colors allows you to create a gradient effect, which in turn can be controlled using the **Hero background gradient** setting.

The background image can be edited using the following settings, within the **Images** and **Home page elements** setting groups respectively:

| Name                                                      | Identifier                  | Description                                                |
| --------------------------------------------------------- | --------------------------- | ---------------------------------------------------------- |
| <span class="white-space-no-wrap">Home hero image</span>  | `homepage_background_image` | The background image for the hero section on the Home page |
| <span class="white-space-no-wrap">Hero image style</span> | `hero_image_style`          | The style to apply to the Home hero image                  |

Use the **Hero image style** setting to control whether the hero background image appears behind the background colors, is used as an overlay or is displayed using a parallax effect.

<div class="note">
  When displaying the hero image behind the background colors, you can use the background colors as an overlay by adjusting their opacity using the color picker settings.

  ![Color picker with opacity setting](https://www.zenplates.co/assets/images/documentation/setting-colorpicker.webp)
</div>

## Shape divider

Shape dividers are a great way to make hero sections visually engaging and can also be added through theme settings.

| Name                                                        | Identifier           | Description                                                |
| ----------------------------------------------------------- | -------------------- | ---------------------------------------------------------- |
| <span class="white-space-no-wrap">Hero shape divider</span> | `hero_element_shape` | The shape divider to use at the bottom of the hero element |