---
schema_version: "1"
id: e127b794b1cf0f204e2b6baf588dca9f3ea43d4bbecdba8cb03d4ae2ef5a1f30
title: "Theme Guidance: Hero Component"
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/experience/264-0-0/community_builder_theme-g-hero.md
canonical_url: https://help.salesforce.com/s/articleView?id=experience.community_builder_theme-g-hero.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 2ce5ea90d96097e1b48106ab2491d8ec8ac0adf8d192f0516aec581d86644f2a
description: Hero images are large images that are designed to dominate the visual field of a page and grab attention.
products:
  - Experiences
release: "264"
---
# Theme Guidance: Hero Component

Hero images are large images that are designed to dominate the visual field of a page and grab attention.

### Required Editions

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small edition"><colgroup><col></colgroup><tbody><tr class=""><td class="slds-cell-wrap" style="vertical-align:top;">Available in: both Salesforce Classic and Lightning Experience</td></tr><tr class=""><td class="slds-cell-wrap" style="vertical-align:top;">Available in: <strong>Enterprise</strong>, <strong>Performance</strong>, <strong>Unlimited</strong>, and <strong>Developer</strong> Editions</td></tr></tbody></table>

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small permission">
      <colgroup>
        <col style="width:50%">
        <col style="width:50%">
      </colgroup>
      <thead class="slds-text-title_caps ">
        <tr class="">
          <th scope="colgroup" class="slds-cell-wrap" colspan="2" style="text-align:center;vertical-align:top;" id="d118469e71">User Permissions
            Needed</th>
        </tr>
      </thead>
      <tbody>
        <tr class="">
          <td data-label="User Permissions Needed" class="slds-cell-wrap" style="vertical-align:top;" headers="d118469e71 ">To customize or publish an Experience Cloud site:</td>

          <td class="slds-cell-wrap" style="vertical-align:top;" headers="d118469e71 ">
            <ul>
              <li>Create and Set Up Experiences AND View Setup and Configuration AND be a member
                of the site<p>OR</p>
              </li>

              <li>View Setup and Configuration AND be a member of the site AND have appropriate
                <a href="https://help.salesforce.com/s/articleView?id=experience.networks_access_control_overview.htm&amp;language=en_US" target="_blank">role-based site access</a>
              </li>

            </ul>
          </td>

        </tr>
      </tbody>
    </table>

Hero layouts are all about visual impact. The _hero_ is an image that dominates your page, providing a sense of theme, style, and purpose. But while hero layouts are excellent for setting mood and style, they eat up space. So they’re not good for a page that needs a lot of functionality.

## A Search Versus a Call to Action Focus

Pre-built themes come in two different flavors that focus on different needs: hero search and hero call to action.

- Uses for hero search
    - Sites that serve as an entry to a lot of diverse information with no easy way to provide a top-level organization.
    - Sites where it’s challenging to predict customer needs or where your customers' information needs vary widely.
- Uses for hero call to action
    - Sites with a focused purpose, like fund-raising or a supporting a specific event.

## Selecting and Swapping Hero Components

The Webster, Jepson, and Citizen themes each come with a pre-configured hero theme component (Search or Call to Action). You can use these themes as they come or easily swap them through the component properties in Experience Builder.

Like the theme but don’t want to use the hero style layout? Easy, uncheck **Show hero** on the **Theme Settings** tab of the Theme Panel.

![Show hero setting highlighted in Theme Setting area of Theme Panel](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-experience-communities-264-0-0-production-enus/bf7df212-91a1-4fa3-a007-4d6f3e3b470b/communities/images/community_builder_themepanel_themesettings-hero.png)

## Header and Hero Interaction

- When "Fix the header's position" and "Start hero under header" are both enabled in **Theme Settings**, choose a background color for best visibility. If you leave the background transparent, menu items can become invisible when a customer scrolls down the page. Menu items can be hidden because the hero image has scrolled out of view. A solid background color avoids this problem.

![Theme settings tab of Theme Panel](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-experience-communities-264-0-0-production-enus/bf7df212-91a1-4fa3-a007-4d6f3e3b470b/communities/images/community_builder_themepanel_themesettings-headerundrhero.png)