Header - Landing Page
Simple header with a logo and dark background.
View a live demo of this partial here.
The following is a detailed listing of the styling edits made to the partial’s sections, the modules used in the sections, and field changes from the modules’ default state.
Section 1
Section Styles
Alignment and spacing > Padding
Top: 45
Bottom: 45
Background > Background color
theme.global.colors.backgrounds.medium_dark.color
Modules
Content Type
Company Logo
Styles > Module > Alignment
Desktop: Center
Usage Guide
This header partial is specifically designed for landing pages where you want to maintain focus on your main content without navigation distractions. Unlike the standard site header, this simplified version eliminates menu items and secondary elements that might lead visitors away from your conversion goals.
The dark background theme automatically applies your site’s medium-dark color from the global theme settings, ensuring brand consistency across all your landing pages. You can modify this color through Design Manager > Theme Settings > Colors if needed, and the change will reflect across all instances where this partial is used.
When customizing this header, access it through Design Manager > Templates > Partials and look for “Header - Landing Page.” The centered logo alignment works particularly well for campaigns, event registration pages, and lead generation forms where you want to establish credibility without overwhelming the design.
Best practices for implementation: This header pairs effectively with landing page templates that have minimal navigation requirements. Consider using it for A/B testing scenarios where you’re comparing navigation-heavy pages against focused, single-purpose designs. The 45px top and bottom padding provides comfortable breathing room on desktop and mobile devices.
You can easily swap this partial with other header variants by editing your landing page templates in the page editor. Simply drag and drop different header partials to test which performs better for your specific conversion objectives. The Logos module supports both uploaded image files and HubSpot’s company logo setting, giving you flexibility in how you manage brand assets across multiple campaigns or microsites within your HubSpot portal.