Skip to content

Footer - Classic

The site page footer: a brand block beside your navigation link columns, then a bottom bar with the copyright and legal links. Best for: the main footer of a website page, where visitors expect to find their way around the rest of the site.

📷 Hero image

Target file: assets/img/footer-classic/hero.webp

A full width site footer on a Dark background. On the left a brand column: logo, a short paragraph of description, a couple of contact rows, and a row of circular social icons. On the right, four columns of navigation links each under a bold column title. A thin divider runs beneath both, with a copyright line on the left and three legal links on the right. Captured at desktop width so the brand and links split reads clearly.

At a glance

Footer Site pages Navigation

  • What it does: splits the footer into a brand block and a strip of navigation link columns, then closes with a bottom bar. The split ratio, the number of columns and where they stop stacking are all set per screen size.
  • Best used for: the standard footer of a website page.
  • Not the right fit if: you want a signup form in the footer (use Footer - Newsletter led) or a light footer for a landing page (use LP Footer - Minimal).
  • 🔗 Live demo: (add demo link)

You do not add this to a page

Unlike most modules, footers are not dropped into a page. One footer is chosen for the whole site in Theme Settings, and any single page can override it. See How it gets on your page.

How it gets on your page

  1. Go to Theme Settings › Website footer.
  2. Set Which footer do you want as default footer? to Footer - Classic. Every site page now uses it.
  3. Open the footer itself from any page: click into the footer area and choose Edit global content.
  4. Fill in the Brand info, Nav link columns and Bottom bar groups. Whatever you leave empty simply does not render.
  5. To use a different footer on one page only, open that page's Header and footer settings module and set Footer for this page.

The global editor shows all four footers

When you edit the global footer content you will see every footer module listed, not just the active one. That is deliberate: it is the only way to fill in a footer before you switch to it. Only one renders on a real page.

Design recipes

Each recipe is a look plus the exact fields to reproduce it.

Logo, description, contact details and social icons on the left, four link columns on the right.

📷 Result

Target file: recipe-full-brand-block.webp

Field Value
Brand info › Show description on
Brand info › Show contact details on
Brand info › Show social icons on
Layout settings › Column layout › Brand and links split 40
Layout settings › No. of columns › Links group [desktop] 4

A leaner footer: brand column reduced to the logo and social icons.

📷 Result

Target file: recipe-logo-and-links-only.webp

Field Value
Brand info › Show description off
Brand info › Show contact details off
Brand info › Show social icons on

More room for the brand story, fewer link columns.

📷 Result

Target file: recipe-wide-brand-split.webp

Field Value
Column layout › Brand and links split 50
No. of columns › Links group [desktop] 2

Everything stacked and centred, for a short footer.

📷 Result

Target file: recipe-centred.webp

Field Value
Style › Alignment › Content alignment center
Column layout › Responsive stacking for brand links split 1023px

Bottom bar sitting flush against the row above it.

📷 Result

Target file: recipe-no-divider.webp

Field Value
Preset settings › Bottom bar › Show divider off
Bottom bar › Spacing › Spacing between rows to taste

Common setups

Goal Setting
Use this footer across the site Theme Settings › Website footer › Which footer do you want as default footer?
Use it on one page only that page › Header and footer settings › Footer for this page
Change how wide the brand block is Layout settings › Column layout › Brand and links split
More or fewer link columns Layout settings › No. of columns › Links group [desktop]
Stop the two sides stacking so early Column layout › Responsive stacking for brand links split
Hide the description Brand info › Show description
Space the social icons out Preset settings › Brand info › Social icons › Gap between icons
Remove the line above the bottom bar Preset settings › Bottom bar › Show divider
Auto updating year in the copyright use {{ year }} in Copyright text
Put the footer on a dark surface Style › Color scheme = Dark

Field reference

142 fields across the Content and Style tabs. The groups below are the ones you will actually reach for.

Content
Group What it holds
Section background settings none, colour, gradient, image or video
Brand info logo, logo link, description, contact details, social icons
Nav link columns a repeater of columns, each a title plus a HubSpot menu
Bottom bar copyright text and a legal link group
Style › Layout settings
Field What it does
Column layout › Brand and links split the ratio between the brand block and the link strip
Column layout › Column position how the link columns distribute across their strip
Column layout › Responsive stacking for brand links split 767px or 1023px
No. of columns › Links group [desktop / tablet / mobile] how many link columns sit side by side
Gap between column the gutters, at three breakpoints
Style › Preset settings
Group What it styles
Brand info › Logo width per breakpoint, spacing below
Brand info › Description colour, weight, maximum width
Brand info › Contact details colour, weight
Brand info › Social icons size, padding, radius, border, background, gap, hover scale
Nav link columns column title and link typography, colours, hover, gaps
Bottom bar divider, copyright text, link group

Every field, exhaustively

The complete list with types, defaults and conditions lives in MDS/MODULE-FUNCTIONALITY/Footer - Classic.md in the theme repository.

Tips & gotchas

Empty groups leave no gap

Every block is guarded on having content. Leave the description blank and it renders nothing at all, rather than an empty box that throws the spacing out.

Footers do not share content

Filling in Footer - Classic does not fill in Footer - Newsletter led. They are separate modules with separate stored content, so trying both looks means entering your logo, links and copyright twice.

Contact links know their type

A contact row set to Email address renders as mailto:, and one set to Phone number renders as tel:. You do not need to type the prefix.