Brand a site with header and theme options

You can customize a site by designing a header, creating a theme, or adding a footer.

Customize the header

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

1. Open a site in edit mode.
2. Open the side panel by selecting the toggle . Select Header (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 extra 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. Name—Enter a name to appear in your site's header. The name you provide in this field is only visible in the header and will not be reflected in your site's URL or on your list of sites.
6. Short Name—Enter a shortened version of the name you've added to the header. The short name only applies to the header if its too long to display on a smaller screen, such as a mobile phone.

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

7. If you want to brand the header of your site with custom HTML or CSS, choose Custom HTML/CSS and provide code in the HTML and CSS boxes.

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

8. Select Save.

Create a theme

Create a theme for your site by choosing colors for your site's header and text. The colors you choose in your site's Theme menu are applied to the entire site. You can override these selections by configuring colors for specific rows. For more information, see Colors and fonts.

Tip:

When choosing a color, review branding guidelines for your organization. Many branding guidelines provide exact 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 your site's theme properly reflects your organization.

1. Open a site in edit mode.
2. On the Customize panel, select Theme.
3. To select a color for any of the following options, enter a hex value color code or choose a color from the color picker next to the color code field.
   • Global nav background color applies color to your site's global navigation bar.
   • Global nav text color applies color to the text in the global navigation bar.

     Note:

     For more information on global navigation, see Learn about global navigation.

   • Header background color applies color to the header of your site.
   • Header text color applies color to all text in the header.
   • Body background color applies color to your site's rows. Row color and text color can also be configured for each row by following the steps provided in Color and fonts.
   • Body text color applies to text across your site.
   • Body link color applies color to any links provided on your site.

     Note:

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

4. Once you've set colors, select Save.
5. You can also apply fonts to text in the header and the body of your site.
   • To choose a font for your site's body, select the Base font settings button.
   • To change the font for the header of your site, select the Heading font settings button.

Note:

To start over or return to default colors, choose Reset fonts at the bottom of the Theme menu.

Add a logo to a header

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

1. Select the Logo toggle button to turn it on.
2. Add an image by choosing Image URL or Upload.

   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, you can choose a setting for Logo alignment.
4. For Logo alt text, provide text to meet 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 a header

You can add social media icons to the header that link to your account(s) for Facebook, X, Instagram, or YouTube.

1. Open a site in edit mode.
2. On 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 your platform's account.
5. Select Save.

Create a footer

You can use custom HTML to add a footer to your site that's persistent across any pages attached to your site.

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

   Note:

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

Related content

To configure your 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.