---
schema_version: "1"
id: 343162da22ff58839859ef72551f8204ac7236a4290248cafd59ba2e518ff7f8
title: Adjust the Style and Layout of Your Site Theme
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/experience/264-0-0/community_builder_theme_adjust.md
canonical_url: https://help.salesforce.com/s/articleView?id=experience.community_builder_theme_adjust.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: c2251536f2ded7d57e276f79cda0fcc8b19f503a51e7758349a4265d1a5dacb5
description: Experience Builder sites include several pre-built themes that you can modify easily. In addition to customizing the layouts, you can configure colors, fonts, images, sizes, and actions with a ton of choices and levers.
products:
  - Experiences
release: "264"
---
# Adjust the Style and Layout of Your Site Theme

Experience Builder sites include several pre-built themes that you can modify easily. In addition to customizing the layouts, you can configure colors, fonts, images, sizes, and actions with a ton of choices and levers.

### 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="d86649e68">User Permissions
            Needed</th>
        </tr>
      </thead>
      <tbody>
        <tr class="">
          <td data-label="User Permissions Needed" class="slds-cell-wrap" style="vertical-align:top;" headers="d86649e68 ">To customize or publish an Experience Cloud site:</td>

          <td class="slds-cell-wrap" style="vertical-align:top;" headers="d86649e68 ">
            <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>

You may be asking yourself: All those controls, where do I start?

Start with the broadest settings. The **Theme Settings** section of the Theme panel contains general settings that affect your entire theme. These settings vary depending on your site’s active theme.

![Theme Panel with Theme Settings displayed](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.png)

 
| Setting | Description |
| --- | --- |
| Show header | Shows or hides the header. |
| Fix the header’s position | Pins the header to the top of the scrolling area so that it remains visible while a customer is scrolling a long page. To see this working, publish and preview your site. The change doesn’t appear in Experience Builder. |
| Show hero | Shows or hides the theme’s hero image. |
| Start hero under header | Positions the hero image at the top of page, under the header, to provide a seamless look. |
| Set max page width | Sets the maximum width of the content across the page. Similar settings are in several component panels. The maximum width can be narrower than the overall display size of the header or hero. |

To create different layouts for different pages, in Experience Builder, go to **Settings** | **Theme** | **Configure**.

Each component type has different attributes that you can adjust in their property panels. Select a component to open its property panel and configure its options. Play with the settings to see what effects you can achieve. Changing your layouts doesn’t affect your content directly, only how it’s displayed. If you end up with something you don’t like or can’t use, and forget how to undo it, you can start over.

1. In Experience Builder Settings (1), select **Theme**.
2. Click **Reset** (2) for your current theme.
3. Read the warning and then click **Reset** to confirm.
4. Alternatively, you can reset a theme back to its defaults the next time you reactivate it in the Change Theme panel by selecting **Replace and start fresh**.

![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-experience-communities-264-0-0-production-enus/bf7df212-91a1-4fa3-a007-4d6f3e3b470b/images/icon_note.png)

Note Using either **Reset** or **Replace and start fresh** deletes all of your customizations.

- Branding sets
- Theme regions (settings for common elements across pages like headers)
- Theme settings
- Custom theme layouts
- Custom theme layout assignments for pages
- Custom CSS overrides

These settings aren’t retrievable, so be careful about selecting either **Reset** or **Replace and start fresh**.