Skip to content

Header and footer settings

A per page settings module with two controls: the header colour scheme for this page, and which footer this page uses. Best for: the one page that needs a dark header over a dark hero, or a landing page that should keep the full site footer.

📷 Hero image

Target file: assets/img/header-and-footer-settings/hero.webp

The module open in the HubSpot editor sidebar, since it renders nothing visible on the page. Show both controls: a Header color scheme dropdown set to Dark, and a Footer for this page dropdown open to reveal Default plus the four named footers. Alternatively show a page with a dark hero where the header sits over it in light text. Captured at desktop width.

At a glance

Configuration Page level Header Footer

  • What it does: stores two page level values. One switches the header palette on this page, the other overrides which footer renders.
  • Best used for: the exceptions. A dark hero that needs a light header, or a single page that should not use the footer the rest of the site uses.
  • Not the right fit if: you want to change the header or footer everywhere (do that in Theme Settings).
  • 🔗 Live demo: (add demo link)

This is a configuration module

It renders nothing visible. It is mounted once for you in the page layout, so you do not add it, you just open it and set the two values.

Renamed from Page Settings

This module was called Page Settings until August 2026. The folder, label and instance name all changed together, so any page configured before the rename resets to Auto and Default.

How to use it

  1. Open any page in the HubSpot editor.
  2. Find Header and footer settings in the module list, near the top of the page contents.
  3. Set Header color scheme if this page needs a different header palette.
  4. Set Footer for this page if this page needs a different footer.
  5. Leave either on its default and the page simply follows the theme.

Header color scheme

Value Effect
Auto the header uses its theme default
Light forces the light palette on this page
Dark forces the dark palette, for light text over a dark hero

The class is stamped on the root <html> element by an inline script that runs before the header paints, so there is no flash of the wrong palette on load.

Footer for this page

Value Effect
Default (set in Theme Settings) the page uses the footer for its page type
Footer - Classic forces the classic site footer
Footer - Newsletter led forces the site footer with the signup form
LP Footer - Minimal forces the two row landing page footer
LP Footer - Centered Nav forces the centred landing page footer

Default means: a page built from a landing page template gets the landing page footer, everything else gets the site page footer, and which one of each pair is set in Theme Settings › Website footer.

Naming a footer overrides both halves of that. Because the choice also decides which footer family runs, a landing page can carry a site footer and a site page can carry a landing footer.

Leave it on Default unless you mean it

A page left on Default keeps following the theme. Pin a real footer and that page stops responding to theme changes for good, which is usually only what you want for a genuine exception.

Common setups

Goal Setting
Light text header over a dark hero Header color scheme = Dark
Follow the theme header everywhere Header color scheme = Auto
Let this page follow its page type Footer for this page = Default
Put the site footer on a landing page Footer for this page = Footer - Classic or Footer - Newsletter led
Put a landing footer on a site page Footer for this page = LP Footer - Minimal or LP Footer - Centered Nav
Change the footer for the whole site Theme Settings › Website footer, not here

Field reference

Two fields, both on the Content tab.

Page options
Field Type What it does Default
Header color scheme choice Auto, Light or Dark for this page's header. Auto
Footer for this page choice Default, or one of the four footers by name. Default (set in Theme Settings)

Tips & gotchas

Pair a dark header with a light logo

On a dark hero, upload a Light logo in the header settings so your brand mark stays visible when the header switches palette.

The footer choice has no visible field on the footer itself

The footer modules do not know which page they are on. This module stores the choice, and the page layout reads it to decide which footer partial and which module inside it render.

One module per page, mounted for you

It is placed in the page layout, so there is nothing to add or drag. If you cannot find it, look at the very top of the page contents list rather than in the Add module panel.