Brand and page editing

Global brand settings

Start with the theme editor. Set primary, secondary and background colours, heading and body typography, individual heading sizes, links and hover states, buttons and form appearance. Separate header and footer controls let you keep those areas consistent across the site. Navigation labels and page content are editable in their modules. Recurring blog interface labels are editable native text controls named “Blog interface” in the content editor. The skip-link, system Back to home and Search labels also have native text controls. System-page introductions use native rich-text modules. These controls default to English and can be translated without editing template code. Native HubSpot form, search and subscription widgets have their own language and text settings.

The default palette uses violet, dark ink and white. Check contrast after changing colours, especially white text over photography, button labels, quiet text and form errors. Long headings and translated labels should be reviewed on mobile. Avoid reducing text sizes simply to force a layout to fit.

Typography controls

Use H1–H6 typography to select a font, weight, style and reference size independently for each heading level. The reference size scales the existing responsive layouts, preserving the hero, card and mobile proportions rather than forcing every heading to one fixed size. Arial remains the default. The default ink colour preserves the intended light text on dark or photographic sections; choosing a custom heading colour applies it to that heading level, so check contrast across the demo.

Buttons and forms have their own font controls, separate from body text, heading, header and footer fonts. Button reference size scales existing button proportions. Form text font controls affect form text and inputs; label emphasis remains consistent with the field hierarchy. Button text, background and hover colours are separate controls. Form and input backgrounds, borders, labels and validation messages are separate controls. Form container background and border are transparent by default to preserve each section’s surface.

Global header and footer

Edit global content once, then confirm its appearance on all templates. Choose a native HubSpot navigation menu created in the account. Replace the default logo with the buyer's own logo and meaningful alternative text. Give every navigation label and link a real destination. Use the language switcher with HubSpot language variations rather than linking unrelated pages as translations.

Module Styles tab

Every custom module has Styles → Text controls. Its body font inherits the theme’s standard body font, and text colour inherits the standard primary colour. Override one instance without changing other modules. Default ink preserves each light, dark or photographic surface. Header and footer retain their dedicated theme fonts until an instance override is chosen. Heading levels continue to use the separate H1–H6 controls. Embedded native forms retain the separate form controls.

Languages

The supplied copy is English. Translate editable content and interface labels for each HubSpot language variation. Language navigation in theme settings enables the official native switcher only when actual translated pages or blog variations exist. The single-language demo has no extra control. The switcher uses HubSpot’s configured destinations and localized language names. It does not create translations. Translate global header/footer content, accessibility labels, card links, quote-source labels, quiz answers and blog/system text alongside each page.

Pages and reusable sections

Pick the template closest to the page's purpose. Use the included section presets for complete compositions and modules for individual elements. Drag sections into a full-width drop zone. Keep HubSpot's twelve-column layout intact. Page editors can change the native editable text, photos, cards and supported style fields.

A polished page needs more than a hero. Replace each demo service, team profile, case study, testimonial and result with truthful customer content. Illustrative business names, quotations and metrics in the preview are not real clients, endorsements or measured results. Delete a section if you cannot support its claims.

Photographs

Choose a subject position that leaves space for the headline. Use the image's focal-position controls where provided. Preview the crop at narrow mobile widths as well as desktop. Put essential words in editable text, not in the image. Use descriptive alt text for informative photos and empty alt text for decorative images. Aim for compressed WebP/JPEG photos below 1 MB each. Reserve eager loading for the first hero image and lazy-load lower content.

Forms and conversion paths

Select a real HubSpot form in each form module. Configure follow-up messages, lawful consent text, recipient notifications and redirect destinations in the account. Do not publish an unconfigured form or a demo success state. Check required fields, error messages, successful submission, CRM creation and the actual notification before using the page for paid traffic. The theme alone does not configure sales routing, email delivery or payments.

Accessibility and motion

Use one meaningful H1 and a logical heading order. Keep visible focus outlines. Do not place navigation actions only behind hover. Meaningful content remains readable when reduced motion is enabled or JavaScript is unavailable. Test the keyboard navigation, mobile menu, accordion controls, search and form messages after replacing content.

Module guide

module-reference.html lists the real field schema for each custom module. Field groups and repeats explain which text, image, style or collection controls are available. Use the actual editor to verify the final experience because field validation and conditional visibility are evaluated by HubSpot.