Back to Top

Brand a site with header and theme options

In this topic

  1. Header
  2. Add a logo to a header
  3. Add social media icons
  4. Create a theme
  5. Create a footer
  6. Related content

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.

Header

To choose a design for your header, follow these steps:

  1. Open a site in edit mode.
  2. Open the side panel by clicking the toggle toggle. If needed, click the back arrow next to Customize at the top of the panel to return to the root menu until you see the option to click Header.
  3. Click the Appearance menu to 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 content views. For more information, see Why does the Explore content view branding look different?

  4. Click the Branding menu to apply the following options:
    • 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.
    • Short Name—Enter a shortened version of the title 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.
      Tip:

      People increasingly use mobile devices to access the internet. Add a short name to ensure the quality of your site on any device.

  5. Choose an option for Layout: Box or Wide.
  6. 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.

    Note:

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

  7. Click Save.

Add a logo to a header

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

  1. Click to expand the Branding menu under Header on the side panel.
  2. Click the Logo toggle button to turn it on.
  3. Add an image by choosing Image URL or by uploading an image from a file.

    Tip:
    If you're uploading an image from a file, an image saved as a PNG file works best. You can crop and zoom the image in the card's Image settings section on the Customize panel.

  4. If you're using the Prominent header, you can choose a setting for Image Alignment.
  5. 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.

  6. Click Save.

Add social media icons

Add social media icons to a header.

  1. Open a site in edit mode.
  2. Click to expand the Branding menu under Header on the side panel.
  3. Click the Social Icons menu.
  4. Click the toggle to add a social media icon for Facebook, Twitter, Instagram, or YouTube.
  5. Provide a URL to your platform's account.
  6. Click Save.

Create a theme

Establish a theme for your site by choosing colors for your site's header, text, and buttons. The colors you choose in your site's Theme menu are applied to the entirety of your 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. Open the side panel by clicking the toggle toggle. If needed, click the back arrow next to Customize at the top of the panel to return to the root menu until you see the option to click 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 What is 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 and buttons using the Button Style set to Outlined.
      Note:

      Vertical tabs, including the sharing button, use Body Link Color for their background fill and Body Background Color for icons or text.

    • Button Background Color applies color to buttons provided on your site using the Button Style set to Solid background, as well the icons located on the side panel tabs.
    • Button Text Color applies color to the text on any buttons provided on your site.
  4. Once you've set colors, click Apply Changes.
  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, click the Base Font settings button.
    • To change the font for the header of your site, click the Header Font settings button.
Note:

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

Create a footer

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

  1. Open a site in edit mode.
  2. Expand the Footer menu on the side panel.
  3. Click the toggle next to Custom.
  4. Modify the CSS and HTML box in the side panel and click Apply Changes 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 or initiative with more branding, you can do the following:

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

Feedback on this topic?

In this topic
  1. Header
  2. Add a logo to a header
  3. Add social media icons
  4. Create a theme
  5. Create a footer
  6. Related content