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 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. In the Customize panel, click Header.

   Tip:

   If the Customize panel isn't visible, click the toggle button to open it.

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 (130 pixels) and additional menu links.
   • Custom HTML/CSS—Use a syntax-enabled code editor to configure a header with custom code.

     When Custom HTML/CSS is selected, a menu appears with parameters for HTML and CSS. Click Open HTML code-editor or Open CSS code-editor to write the code for the customized header.

     Note:

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

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

4. For Layout, choose Box or Wide.
5. Provide text for Name and Short name.

   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. The short name appears in the header if the full name is too long to display on smaller screens such as mobile devices.

   Alternatively, if you do not want the name of the site to appear in the header, turn off the Name parameter.

   Note:

   A site must have either a name or logo in the header. The Logo parameter must be turned on before the Name parameter can be turned off.

6. Click Save layout.

Add a logo to the header

You can add your organization's logo to the header to brand your site. The size and positioning of the site's logo depends on the header style you choose (Standard, Prominent, or Custom HTML/CSS).

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

1. Open a site in edit mode.
2. In the Customize panel, click Header.

   Tip:

   If the Customize panel isn't visible, click the toggle button to open it.

3. In the Appearance menu, click the Logo toggle button to turn it on.
4. Choose one of the following:
   • To provide a URL, choose Image URL and paste a supported image link in the URL field.

     Supported file types include .jpeg, .png, and .gif.

   • To upload a file, choose Upload.

     The maximum file size is 3 MB, and only .jpeg, .jpg, and .png file types are accepted.

     Tip:

     An image saved as a .png file works best.

   If you selected Upload, complete the following steps to upload an image:

   1. Drag the file onto the box or click Browse for image to add your image.
   2. Click the Crop image button to crop or resize the image.

      To crop the image, drag a handle to resize the crop frame. To reposition the crop frame, click and drag on the dotted line. To adjust the zoom, use the slider below the image.

   3. Click Done to apply the changes.

   The logo is added to the header and resized based on the chosen layout and logo alignment.
5. If you're using the Prominent header style, choose a setting for Logo alignment:
   • Horizontal logo—The logo remains at the standard height of 60 pixels. It is aligned with the Name or Short name of the header.
   • Vertical logo—The logo expands to the height of 130 pixels. It is placed to the left of all header content, including the Name and menu links.
6. 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.

7. Click Save layout.

Add social media links to the header

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

Note:

If you use the Custom HTML/CSS header style, you will not be able to configure social media links through the following steps.

1. Open a site in edit mode.
2. In the Customize panel, click Header.

   Tip:

   If the Customize panel isn't visible, click the toggle button to open it.

3. Expand Social icons.
4. Click the toggle buttons to add social media icons.

   The social media icons will display in the header.

5. Provide URLs of your social media accounts to link the icons to.
6. Click Save layout.

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, click Theme.

   Tip:

   If the Customize panel isn't visible, click the toggle button to open it.

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.
   • Global nav background color—Apply color to the site's global navigation bar.
   • Global nav text color—Apply color to the text and buttons on the global navigation bar.
   • Header background color—Apply color to the site's header.
   • Header text color—Apply color to all text in the site's header.
   • Body background color—Apply color to the site's rows. Background color can also be configured for individual rows.
   • Body text color—Apply color to text across the site. Text color can also be configured for individual rows.
   • Body link color—Apply color to links on the site.

     Note:

     The action menu on a published Hub site uses the Body link color value for the background fill and the Body background color value for icons and text.

4. Optionally, apply fonts to text in the header and the body of the site by doing the following:
   1. Click the customize button for Base font or Heading font.

      The base font is used for text in the body of the site and the heading font is used for text in the site header.

      Tip:

      If you are changing both the base and heading font to the same font family, update the base font first, then check the Use same font as base check box for the heading font.

   2. For URL for @import, paste the @import URL from the font's embed code.
   3. Provide the name of the font family.
   4. Optionally, click Preview your font to view the preview text with the imported font family.
   5. Click the tab to update the second font if necessary.
   6. Click Apply.
5. Click Save layout.

Note:

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

Create a footer

A site footer can be added using custom HTML and CSS. The footer will appear across the bottom of the site and on all pages and views attached to it. To add a footer to a site, complete the following steps:

1. Open a site in edit mode.
2. In the Customize panel, click Footer.

   Tip:

   If the Customize panel isn't visible, click the toggle button to open it.

3. Click the Custom option.
4. Click Open HTML code-editor or Open CSS code-editor to write the code for the customized footer.
5. Click Apply to view changes to the footer.

   Note:

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

6. Click Save layout.

Related links

• Edit a site
• Configure global navigation and menu links
• Domains