Header block

The header block is controlled by a design system split into Site Level, Template Level, and Page Level settings. This hierachical approach makes it easy to maintain consistency across pages, while alllowing customizations where useful.

Logos are provided by the customer, and can be uploaded here. The primary logo is the default one used across all pages, while options are provided for uploading different logo variations for all your background colors. Once these are uploaded, they'll be automatically applied depending on the background color of that page. However, in the Page Level menu you have the option of uploading a logo for that page only (within the Overrides section), which can useful if the logo is sitting on top of a photo versus a solid background color.

The desktop logo size can also be set here.

This block does NOT create your site palette, which is done at Design Settings > Palette Builder. However, this section exists to override defaults within your header – for example, you may want your Featured Button (usually used as a donate button), to be a different color than the site default. All default colors show a dot inside of the thumbnail.

You can also adjust the opacity of the Header Gradient which is used to make links and logos easier to see when sitting on top of photos.

Set your navigation link styles, sizes, and alignments here.

Set your social icon styles and sizes.

Selecting a template from the main dropdown applies it to the current page. Using the template management pop-up (click the button to the right of the dropdown) you can manage your templates including adding, deleting, renaming, and seeing what pages use which templates.

Choose your general layout at the top, and then select from multiple layout options below that: logo position, navigation alignment, content alignment, content position, social icons, and bottom fade. You can also set minimum header height at the bottom - this won't appear to have any effect if your header content is already pushing your header height above the minimum.

When you switch to mobile view, using the desktop / tablet / mobile icons at the bottom of the CMS, the layout tab will switch to showing phone-specific layout options. Tablet always matches desktop.

This section allows you to add "default" images for a template. These are images that will show up in a header only if no is set at the Page level. You can add a "color overlay" to images which can help if you want the images less visible, or want to make it easier to read text that sits directly on top of the image.

Page level settings only apply that specific page. However you can copy pages in order to get those settings on other pages as well.

Header visibility used to be a layout option, but was moved here during the upgrade. This setting removes the entire header except for the logo and navigation bar. When selected, the background color is inherited from whichever block follows the header, to create the impression of one cohesive block.
​

All elements that sit on top of the header will be recolored automatically to sit correctly on top of the background color you select.

However, header colors can be overridden for the header on this same sidebar at Site Level > Customize header colors OR sitewide color defaults can be set at Design Settings > Palette Builder.

If you're using an image that covers the whole background, you won't see the background color change directly but it will still change the colors that sit on top of it. So, changing the background color to something that matches the image as closely as possible can help your other elements appear more clearly without having to customize them all one by one.
​

This section allows you to turn on and off and to resize various pieces of text: the "intro" (aka eyebrow), headline, and description.

Under action you can select a form, or one or two buttons. If form is selected a couple of design options - "wrap form in box" and "smaller form gap" will appear.

The Page Level is where you'll usually want to set images, and you can add a play button for an embedded video here as well. Turning on the mobile option allows you to use a different image or a different cropping of the same image for mobile.

You can also add a "color overlay" to images which can help if you want the images less visible, or want to make it easier to read text that sits directly on top of the image.

Videos added here do not add a video that plays in the header automatically (though we'll have that feature soon). Instead, this adds a play button and some optional label text next to it, which then pops up a video when clicked. The video section has a variety of design options to play with for button and label styling.

Page level overrides should not be used unless necessary, as it makes it hard to keep options across your different headers in sync. However, in certain situations, you'll need an override, for example, if you're using a specific background image on that header, which requires particular text or logo colors for visibility. Generally, you should try changing the page background color first to see if any of your default settings will work.

Translated sites inherit Site Level settings from the primary language site version, and Templates are shared across all languages.

However, a small number of Site Level settings are overridable on the translated site, including logo, navigation style, and social icon styles.

Sometimes people want to use a different alternate language logo. And because links are often longer on alternate language sites, we wanted to provide options to make the size of the navigation bar smaller so things don't overrun the browser edge.

These header override settings will not be changed or copied when re-translating sites.