Docs / Structural / Footer
The global site footer used across every blox-skinned page. A structural module configured once in the theme settings and rendered site-wide, with logo, tagline, social links, multi-column navigation, copyright, and legal links. Choose between a Standard footer (nav columns + social) or a Minimal footer (logo, description, copyright, legal only).
The footer's structural shape - which layout, how many nav columns, which columns and social icons appear, plus mobile alignment and the key spacing rhythms. Most editors only ever need to touch this group.
Standard includes navigation columns and social media icons alongside the logo and description. Minimal shows only logo, description, copyright, and legal links - useful for landing pages, light marketing sites, or any context where a fat footer would feel out of place.
standard Standard (default) - logo + description + nav columns + socialminimal Minimal - logo + description + copyright + legal links onlySets the number of navigation columns rendered on the right side of the footer. The left info column (logo + description + social) takes the width set by Info Column Width, and the nav columns share the remaining space equally.
1 One column2 Two columns3 Three columns (default)Toggles the first nav column. When hidden, the column still leaves a gap on desktop (so the remaining columns stay in their original slots) but disappears entirely on mobile.
Toggles the second nav column. Same behavior as Column 1 - gap kept on desktop, removed on mobile.
Toggles the third nav column. Same behavior as Columns 1 and 2.
Toggles the row of social media icons that sits below the description in the left info column. The icons themselves come from the social URLs you fill in under Content - any URL left as #0 is treated as empty and skipped.
Uniform render size for all social media icons. 20px is the comfortable default for a dark footer; bump to 24-28px on a minimal site where social is the only visual hook in the footer.
Text and content alignment for the footer on mobile (below 992px). Centered usually reads better on a single-column stack; left-aligned matches the desktop reading flow.
left Left-aligned (default)center CenteredWidth of the left info column (logo + description + social) on desktop, as a percentage of the row. The nav columns split the remaining space equally. Drop to 25-30% if you have wordy nav menus, push to 45-50% if the description is a longer brand statement.
Horizontal spacing between adjacent navigation columns. 40px is the balanced default; reduce to 20-28px when you have three dense columns, raise to 60-72px for breathing room when only two columns are visible.
Space above the bottom divider line - the thin horizontal rule that separates the main footer content from the bottom bar (copyright + legal links). Larger values make the bottom bar feel more like its own zone.
Vertical space between the description rich text and the row of social media icons below it. Drop to 16-24px to bring social closer to the description; raise to 48-60px when you want social to feel like its own beat.
Everything visitors actually see and click: logo, tagline, social URLs, navigation columns, copyright text, and legal links. Most of these fields are hidden when footer type is Minimal.
The logo block at the top of the left info column - image, link destination, and an optional text company name rendered next to the image.
Master toggle for the entire logo block. Turn off if you only want the description and social row in the left info column.
The footer logo image. Default is the white blox SVG so it reads against the dark footer background. Upload an SVG or a 2x PNG with transparent background so it stays sharp on retina screens.
Tip: Upload your replacement with a unique filename - HubSpot's CDN caches by URL, and overwriting the same path can leave visitors looking at the old logo for hours.
Destination when the logo is clicked. Supports external URLs, HubSpot content pages, files, email addresses, and blog posts. Has its own "Open in new tab" and "No-follow" toggles. Usually points back to the homepage.
Optional company name displayed next to the logo image. Useful when the logo is a mark/symbol only and you want the brand name spelled out alongside. Leave blank to show the image on its own.
Short tagline or description that sits below the logo in the left info column. Keep it to one or two sentences - this is brand reinforcement, not a paragraph of copy. Supports basic rich text formatting.
URLs for each supported social platform. Any field left as #0 is treated as empty and its icon is skipped, so you only see icons for the platforms you've actually filled in. The order in the rendered row follows fields.json: Facebook, Instagram, X, YouTube, LinkedIn.
Full URL to your Facebook page (e.g. https://facebook.com/yourcompany). Leave as #0 to hide the Facebook icon.
Full URL to your Instagram profile. Leave as #0 to hide the Instagram icon.
Full URL to your X (formerly Twitter) profile. Leave as #0 to hide the X icon.
Full URL to your YouTube channel. Leave as #0 to hide the YouTube icon.
Full URL to your LinkedIn company page. Leave as #0 to hide the LinkedIn icon.
The first navigation column on the right side of the footer. Has a column title and a simple menu of links.
Heading rendered at the top of Column 1. Convention is a short label (1-2 words) like "Product", "Company", or "Resources".
Simple Menu reference. Build the menu in HubSpot under Marketing > Files and Templates > Design Tools > Menus (or pick the inline editor inside this field). The menu renders as a vertical list of links inside the column.
The second navigation column.
Heading rendered at the top of Column 2.
Simple Menu for Column 2's links. Same setup as Column 1.
The third navigation column.
Heading rendered at the top of Column 3.
Simple Menu for Column 3's links. Same setup as Columns 1 and 2.
The company name that goes after the copyright symbol in the footer bottom bar. The copyright symbol and current year are added automatically by the module - just provide the legal entity name (e.g. "Acme Corp." or "Acme Holdings, LLC").
Simple Menu of legal links that renders horizontally in the footer bottom bar next to the copyright. Build the menu in HubSpot with your legal links (Terms, Privacy Policy, Cookie Policy, etc).
Developer hooks for adding custom CSS or JS targeting the footer module instance. Leave blank for most pages.
Sets a unique id="..." on the footer element. Useful for anchor links and JS targeting. Must be unique on the page.
Space-separated CSS classes appended to the footer element. Useful when applying page-specific overrides via the page's custom CSS.
All visual styling for the footer - colors for every layer plus the row controls (content width and per-breakpoint padding). Lives in the Styles tab in the editor.
Color controls for every distinct surface in the footer. Defaults are tuned for a dark slate footer with off-white text.
Fill color for the entire footer element. Default is the theme's slate-900, which pairs with the off-white text + muted gray secondary colors below.
Body text color for the description and general copy in the footer. Muted gray by default so it reads softly against the dark background.
Color of the column heading text ("Product", "Company", "Resources" or whatever you set). Off-white by default so the headings are clearly emphasized above the muted link text.
Resting color of the nav links in each column. Matches the body text by default so the nav reads as a quiet list.
Color the nav links shift to on hover. Pure white by default - the lift from gray to white is the entire hover affordance.
Color of the copyright text and legal links in the footer bottom bar. Darker than the main text color by default so the bottom bar reads as secondary.
Resting color of the social media icons. Matches link color by default for visual cohesion.
Color the social icons shift to on hover. Pure white by default, matching the link hover color.
Color of the thin horizontal rule that separates the main footer content from the bottom bar. Sits just above the background color in lightness so it reads as a subtle separator, not a hard line.
Color of the optional Company Name text rendered next to the logo image. Off-white by default so it pairs with light-on-dark logos.
Controls for the footer row's inner container - how wide the content area is and how much padding wraps it. The footer module does not expose a background image / gradient picker here because the Background Color above already covers the surface.
Sets the maximum content width inside the footer. Standard and Slim widths are pulled from Theme Settings > Layout so the footer aligns with the rest of the site automatically.
standard Standard (default; uses theme standard container width)slim Slim (narrower theme container)custom Custom - reveals Container Width inputMaximum width of the footer content on desktop. Only shown when Content Width is set to Custom.
Padding around the footer content, set independently per breakpoint. Each breakpoint exposes top/bottom/left/right inputs. Defaults are tuned for a comfortable footer rhythm:
desktop 80px top, 40px bottom, 0 left, 0 right (above 992px)tablet 60px top, 40px bottom, 0 left, 0 right (575-992px)mobile 60px top, 30px bottom, 0 left, 0 right (below 575px)