The page banner sits at the top of each page template under the navigation bar and breadcrumb trail. It provides visitors with introductory content for each page in your community. You can configure a site-wide page banner as described in Header and Footer Configuration, but you can also override the banner image on other page templates.

Note: The navigation bar and breadcrumb trail can be edited only in the Header & Footer page template and cannot be customized per template.

The page banner has several options but has a fixed location on the page. These options include visual style, content width, content alignment, the search field, statistical data, background configuration, visual effects, and even boundary padding.

• Visual style
• Content width
• Content alignment
• Title and Description
• Banner elements
• Background color
• Background image and appearance
• Visual effects
• Boundary padding
• Reset banner to Header & Footer template banner

Visual style

Not every page template needs to include a large header. For some page templates, a small, simple text header is sufficient. The Visual style area gives you a choice among Large, Medium, and Small layouts.

The Large visual style gives your content and search field the most room to shine. It features a bold layout putting your title on top, followed by the description and search field.

The Medium visual style is a bit more compact, separating the header's content and search field horizontally.

The Small visual style optimizes the page's horizontal space. It loses the search field but keeps the title and description.

Content width

The Content width options give you control over the width of the content displayed in the header.

The Wide content width setting lines your content up with the header, taking full advantage of the horizontal space. The Medium and Narrow options give your content a stylistic boundary, giving additional vertical body to your paragraphs and providing a visual appeal to the page to suit your needs.

Content alignment

The Content alignment option gives you control over the alignment of the text that appears in the header. Adjusting this setting will bring the text to the right, left, or center of the header.

Title and Description

With the Title and Description, you can choose to Show both, show the Title only, or show None.

If you choose to show the title, the text appears in the color selected in the Color Picker tool. When the text color and background color fail to meet accessibility standards, a red exclamation icon appears to let you know.

Banner elements

Toggle on or off the following options: 

• Search field: Shows or hides the search field in the header (excluding the visual style of Small, which can never contain the search field).
• Member stats: Shows or hides the total number of members in the community and the total number of members that are currently online. 
• Action button: Shows or hides the call-to-action button (on applicable page templates). When this option is turned on, you can also enter text in the Button label field.

Background color

You can choose a Background color using this tool. The colors available in the palette are determined by your community's Theme settings. You can add or customize the color palette in Theme.

When you hover your cursor over a color choice in the color picker, the hex code is displayed. This enables you to distinguish between similar colors before making your selection.

Background image and appearance

To have a background image appear instead of a solid background color, you can use the Background image tool.

To add a new background image:

1. Click Edit (pencil icon), and then click Upload image.
2. Choose a PNG, JPEG, or SVG file from your local drive to upload. Instead, you can also search for an image from your existing image library using the Search for an image option.
3. Set the Background image appearance:
   1. Size
      • Cover: Fit the image to the section vertically.
      • Auto: Automatically adjusts the image to fit in the background.
      • Contain: Fit the image to the header section horizontally.
   2. Position
      • Center Center
      • Center Top
      • Center Bottom
      • Left Center
      • Left Top
      • Left Bottom
      • Right Center
      • Right Top
      • Right Bottom
   3. Repeat
      • No Repeat
      • Repeat (tile)
      • Repeat X (horizontally)
      • Repeat Y (vertically)
   4. Background opacity

Visual effects

Show bottom border, when toggled on, shows a horizontal border between the page banner and the next section on the page.

Boundary padding

The two Boundary padding fields set the boundary padding (in pixels) for the top and bottom of the header.

Reset banner to Header & Footer template banner

If you decide you no longer want to have a separate banner for your page template, you can reset it to the global banner. At the very bottom of the Edit Banner panel for any banner that has been changed from the global one, click Reset banner to Inherited Styles.