Customise your entire site in one place.
The Lupo Digital Theme includes a centralised Theme Settings panel that controls the look and feel of every page and module on your site. You only need to configure these settings once. Your brand colours, fonts, button styles, form styles and more will apply automatically across all templates and modules.
To access Theme Settings, open any page in the HubSpot editor and click Theme in the left sidebar panel.
Colours
Set your two core brand colours here. These flow through to buttons, headings, icons, module accents and interactive elements across the entire site.
-
Primary Colour — Used for buttons, icon backgrounds, active states and key accents
-
Secondary Colour — Used for supporting accents and hover states
Fonts
Choose the typefaces for your headings and body text. Both fields support Google Fonts and any custom fonts uploaded to your HubSpot portal.
-
Heading Font — Applied to all H1–H6 headings across templates and modules
-
Body Font — Applied to paragraph text, labels and navigation links
Buttons
Control the visual style of all buttons across the site, including primary CTAs and form submit buttons.
-
Style, background colour and text colour
-
Border style and border radius
-
Padding and spacing
-
Hover state — colour, background and border
Forms
Style the HubSpot forms embedded across your site consistently without editing each form individually.
-
Form background colour and border
-
Title font and background colour
-
Field background, border and text colour
-
Label and help text colour
-
Submit button style and hover state
Tables
Control the appearance of tables used in rich text content across the site.
-
Header row — background and text colour
-
Body rows — background and text colour
-
Footer row — background and text colour
-
Cell spacing and border style
Header
Configure the global site header appearance.
The theme includes three header layouts. The header layout is set at the template level as well as from the global theme settings. Each template comes preconfigured with a header variant, which you can change by editing it in the page editor.
- Choose header layout
-
Navigation link colour
-
Dropdown menu background, text colour and border
-
Header background colour
See theme setting option for header below:
The header layout can also be changed for individual pages by selecting it in page settings. See screenshot below:
-
Override Header checkbox true
-
Then, select header
Header V1 Layout
Header V2 Layout
Header V3 Layout
Footer
Set the footer background and text colours to match your brand.
The theme includes three footer layouts. The footer layout is set at the template level as well as from the global theme settings. Each template comes preconfigured with a footer variant, which you can change by editing it in the page editor.
- Choose footer layout
-
Footer background colour
-
Footer text colour
See theme setting option for footer below:
The footer layout can also be changed for individual pages by selecting it in page settings. See screenshot below:
-
Override Footer checkbox true
-
Then, select footer
Footer V1 Layout
Footer V2 Layout
Footer V3 Layout
Tip: Make changes in Theme Settings before building your pages. Since colours and fonts cascade to all modules automatically, setting these first ensures every new page you create is already on-brand from the start.