Brand a site with header and theme options

You can customize a site by designing a header, creating a theme, or adding a footer. A header and footer are important for completing the layout of a site. In the header, you can introduce the site by adding branding and creating a menu to help visitors find content, pages, and external websites. The footer indicates the end of the site and provides space for helpful details, such as your organization's copyright, location, and contact information.

Customize the header

Each site has a header that appears across the top of it (below the global navigation bar) and on all pages and views attached to it. The header contains the site's title, logo, and menu links. You cannot remove a header, but you can choose its design.

To customize the header, complete the following steps:

1. Open a site in edit mode.
2. Open the side panel by turning on the toggle button; then select Header (or select Customize to return to the Customize menu).
3. In the Appearance menu, choose one of the following Header styles:
   • Standard—The default for every new site, this design features a thin, compact bar that has space for a logo (60 pixels), social media, and menu links.
   • Prominent—This design provides more space for larger logos (120 pixels) and additional menu links.
   • Custom CSS/HTML—Use a syntax-enabled code editor to configure a header with custom code.

     Note:

     Custom headers persist across the site's pages, but are not shown on preview pages.

4. For Layout, choose Box or Wide.
5. For Name, provide a name to appear in the header.

   The name you provide is only visible in the header and is not reflected in the site's URL or on your list of sites.

6. For Short name, provide a shortened version of the name you added to the header.

   Add a short name to ensure the quality of the site on any device.

   The short name appears in the header if the full name is too long to display on smaller screens such as mobile devices.

7. To brand the header of the site with custom HTML or CSS, choose Custom HTML/CSS and provide code in the HTML and CSS text boxes.

   Header HTML does not support embedded JavaScript. Script tags will be ignored.

8. Select Save.

Create a theme

Create a theme for the site by choosing colors for its header and text. The colors you choose from the Theme menu are applied to the entire site. You can override these selections by configuring colors for specific rows. For more information, refer to Customize a site.

Tip:

When choosing a color, review branding guidelines for your organization. Many branding guidelines provide color codes for content such as websites and logos. If you don't have branding guidelines, consult with your team or stakeholders to ensure that the site's theme properly reflects your organization.

To create a theme, complete the following steps:

1. Open a site in edit mode.
2. In the Customize panel, select Theme.
3. Select a color for any or all of the following options by providing a hexadecimal value color code or choosing a color from the color picker next to the color code field.
   • Global nav background color—Apply color to the site's global navigation bar.
   • Global nav text color—Apply color to the text on the global navigation bar.

     Note:

     For more information about global navigation, see Configure global navigation.

   • Header background color—Apply color to the header of the site.
   • Header text color—Apply color to all text in the header.
   • Body background color—Apply color to the site's rows. Row color and text color can also be configured for each row by following the steps in Design the site layout.
   • Body text color—Apply to text across the site.
   • Body link color—Apply color to links on the site.

     Note:

     Vertical tabs, including the sharing button, use the Body link color value for their background fill and the Body background color value for icons and text.

4. After you set the colors, select Save.
5. Optionally, apply fonts to text in the header and the body of the site by doing the following:
   • To choose a font for the body of the site, select the Base font settings button.
   • To change the font for the header of the site, select the Heading font settings button.

Note:

To return to the default fonts, choose Reset fonts at the bottom of the Theme menu.

Add a logo to the header

The size and positioning of the site's logo depends on the header style you choose.

To add a logo to the header, complete the following steps:

1. Turn on the Logo toggle button.
2. Choose Image URL or Upload to add an image.

   Tip:

   If you're uploading an image from a file, an image saved as a .png file works best. Crop and zoom the image if needed.

3. If you're using the Prominent header, choose a setting for Logo alignment.
4. For Logo alt text, provide text that meets accessibility standards.

   Tip:

   If a logo has text on it, the alt text can be the name of the company. If the logo is a logomark design, you can consider it decorative and type “” for the alt text.

5. Select Save.

Add social media links to the header

To add social media icons to the header that link to your Facebook, X, Instagram, or YouTube accounts, complete the following steps:

1. Open a site in edit mode.
2. In the Customize panel, select Header.
3. Expand Social icons.
4. Turn on the social media platforms to display in the header and provide a URL to the platform's account.
5. Select Save.

Create a footer

To use custom HTML to add a footer to the site that's persistent across any pages attached to your site, complete the following steps:

1. Open a site in edit mode.
2. Select Footer in the side panel.
3. Turn on the Custom toggle button.
4. Modify the content in the CSS and HTML box in the side panel and select Save to see the effects.

   Note:

   Footer HTML does not support embedded JavaScript. Script tags will be ignored.

Related content

To configure a site with more branding, you can do the following:

• Add menu links and ensure that global navigation is enabled. For more information, see Configure global navigation and menu links.
• Every site includes a URL (web address). If your organization has a custom domain, you can configure this URL to further brand the site. For more information, see Domains.