Before you begin
What you need
You need access to a HubSpot account where the theme is installed and permission to create or edit website pages. Ask a Super Admin to install the theme and grant the required content permissions if you cannot see it in the page editor.
Standard theme pages and modules work in supported Content Hub accounts. Native HubSpot CTAs, HubSpot-hosted video, and site search require an eligible paid subscription. Availability also depends on your account's product tier and permissions.
Prepare these assets first
- Primary logo and a light or dark alternate logo, ideally SVG or transparent PNG.
- Brand colors, heading and body fonts, button preferences, and approved image style.
- Primary and footer navigation menus created in HubSpot.
- Forms, thank-you destinations, subscription types, and notification recipients.
- Real customer proof, pricing, legal pages, social links, and company contact details.
Quick start
Go from installation to a branded first page
-
1
Install the theme
Complete the purchase or installation from HubSpot's marketplace. Confirm that SaaS Growth appears when you create a website or landing page.
-
2
Create the Theme Tuning Page
Create a temporary website page using the Theme Tuning template. Open its theme settings and establish your global design system before editing production pages.
-
3
Configure global content
Edit the global header and footer. Select real HubSpot menus, upload your logo, replace the footer summary, set the main CTA, add social profiles, and review every utility link.
-
4
Choose the right starting page
Use a purpose-built template for common page goals, or use the Master Page when you want to assemble a custom page from proven section variants.
-
5
Replace demo content
Update all copy, images, menus, forms, links, proof, contact details, policy text, and SEO settings. Preview desktop, tablet, and mobile layouts before publishing.
Theme Tuning Page
Set the visual system once, then review it in one place
The Theme Tuning Page is a visual quality-control page for global styling. It displays colors, typography, buttons, form controls, surfaces, cards, spacing, and representative modules together so you can see how a theme-level change affects the whole site.
Recommended workflow
- Create a page with the Theme Tuning template.
- Open Edit → Theme in the HubSpot page editor.
- Set the brand palette and confirm readable contrast.
- Set heading/body fonts and review the complete type scale.
- Tune buttons, form fields, radii, shadows, spacing, header, and footer.
- Preview at desktop, tablet, and mobile widths.
- Publish privately or keep the page unpublished after setup.
Why it is useful
It prevents slow page-by-page styling decisions and exposes inconsistent combinations early. Your team can approve the core design system on one page, then build production pages with much less rework.
Master Page
Use the full section library to assemble custom pages faster
The Master Page brings the theme's major module layouts and style variants into one long, editable reference page. It is useful when a purpose-built template is close to what you need but not an exact match.
Create a page from the Master Page, clone the page for your project, and remove sections you do not need. Keep one clean copy as a visual library so future editors can compare available layouts without opening every template.
What you can do on the Master Page
- Compare centered, split-media, background-image, form, mockup, and minimal hero treatments.
- Review proof, metrics, feature, process, pricing, testimonial, FAQ, resource, integration, team, form, and CTA sections.
- Select a module to see its content, layout, style, surface, alignment, spacing, and CTA controls.
- Duplicate useful sections, reorder the page, and replace the preset content with your own.
Global styling
Theme settings reference
Theme settings are shared across SaaS Growth templates. Use them for site-wide decisions; use an individual module's Style tab only when one section needs a deliberate exception.
| Setting group | Controls | Use it for |
|---|---|---|
| Brand | Logo and brand identity | Consistent identity in the global header, footer, and branded components. |
| Global colors | Primary, secondary, accent, text, muted, surface, and border colors | The shared palette used by sections, cards, links, and interface states. |
| Typography | Body and H1–H6 font, size, weight, line height, and color | A complete responsive reading hierarchy. |
| Links | Default and hover color | Accessible inline links and text actions. |
| Buttons | Primary, secondary, soft, inverted, and link styles | CTA hierarchy, hover states, radius, height, and spacing. |
| Forms | Background, borders, labels, fields, spacing, and submit button | Consistent lead forms across hero and form modules. |
| Header and footer | Position, typography, backgrounds, colors, accents, and logo size | Global navigation and footer presentation. |
| Layout | Container width, section spacing, gaps, card radius, and shadows | Site-wide density and surface treatment. |
| Effects | Motion style | Consistent, restrained entrance and interaction behavior. |
Templates
Choose a template by the visitor's goal
Home
Lead Generation for conversion-led sites, Product Story for product education, and Enterprise Trust for credibility and risk reduction.
Landing pages
Campaign for focused offers, Resource for gated content, and Webinar for registrations and speakers.
Services
Services Overview, Consulting, and Implementation for service positioning, outcomes, process, and conversion.
Company
About for story and proof, and Team for leadership or expert profiles.
Pricing
Simple Pricing for clear packages and Pricing Comparison for detailed feature evaluation.
Contact and support
Contact, Demo Request, and FAQ for routing questions, capturing demand, and reducing objections.
Resources
Resources, Resource Detail, and Case Study for content libraries, long-form assets, and customer stories.
Legal starter pages
Privacy Policy, Terms of Service, and Security are editable starting points. They must be replaced with content reviewed for your business before publishing.
Blog
Separate Blog Listing and Blog Post templates provide a consistent reading and discovery experience.
Modules
Reusable building blocks included with the theme
Most modules separate Content, Setup, and Style controls. Start with content, select a layout variant, then use style controls only where the page needs a local override.
Global content
Configure the header and footer before duplicating pages
Global content updates every page that uses the same global partial. In the page editor, select the header or footer, choose Open in global content editor, make your changes, and publish the global content.
Header checklist
- Upload and verify the logo.
- Select the primary HubSpot menu.
- Set the main CTA label and destination.
- Check desktop and mobile navigation.
- Use the page-level header control only when a hero needs a special treatment.
Footer checklist
- Replace the brand summary and CTA.
- Select the footer menu.
- Update social profile URLs or remove unused networks.
- Replace copyright text.
- Set Privacy, Terms, Security, and other utility links using the structured link editor.
Connected HubSpot content
Forms, CTAs, menus, and blog content
Forms
Create the real HubSpot form first, including consent text, notification recipients, automation, and thank-you behavior. Then select it inside the Hero Banner or Form Section module. Test submission, validation, error, thank-you, and mobile states.
Calls to action
Standard module links work wherever a normal destination is sufficient. If you replace one with a native HubSpot CTA, confirm that your subscription supports the feature and test its tracking and smart-content behavior.
Blog
Assign the SaaS Growth Blog Listing and Blog Post templates in HubSpot's blog settings. Select the intended blog in Recent Blog Posts modules, then verify author, date, featured image, tags, pagination, subscription, and sidebar content with real posts.
Before publishing
Launch checklist
- Replace every sample logo, avatar, testimonial, metric, customer name, integration reference, and image.
- Confirm all buttons, text links, menu items, social profiles, downloads, and utility links.
- Select real forms and test submission, consent, notifications, automation, and thank-you paths.
- Add a unique page title, meta description, canonical URL, social image, and meaningful image alt text.
- Use one H1, keep heading order logical, and test keyboard focus, accordions, tabs, menus, and form labels.
- Preview common desktop, tablet, and mobile widths and check for overflow or cropped media.
- Compress large images, use appropriately sized files, and avoid unnecessary video above the fold.
- Review cookie consent, privacy, terms, security, accessibility, and other notices with qualified advisors.
- Publish global header/footer changes as well as the page itself.
Troubleshooting
Common issues and practical fixes
The theme or template is not visible
Confirm the theme is installed in the same HubSpot account and business unit where you are creating the page. Check your content permissions, then start from Website Pages or Landing Pages and filter templates by SaaS Growth.
Theme settings changed but the page looks unchanged
Publish the theme settings, refresh the page editor, and confirm the section does not have a module-level style override. Also check whether the page uses a different theme or cloned stylesheet.
The header or footer update is missing
Open the global content editor and publish the global content. Saving only the page does not publish unpublished global changes.
A menu is empty or shows the wrong links
Create or update the menu in HubSpot navigation settings, then select that menu in the Site Menu module inside the global header or footer.
A form does not appear
Select a published HubSpot form in the module, confirm your user can access it, and verify the form belongs to the same account. Review consent and language settings before testing.
Recent blog posts are empty
Select the correct blog, confirm it contains published posts, and review any post-count or filtering settings in the module.
Content is hidden behind the header
Review the global header position and the page's Page Header Settings module. Transparent or overlay headers should be paired with a hero that provides sufficient top spacing and contrast.
A page has horizontal scrolling on mobile
Check oversized custom images, embeds, long unbroken URLs, custom rich-text tables, and third-party scripts first. Preview each section separately to isolate the element causing overflow.
Customer support
Still need help?
Email kashyap@trancekode.tech with your HubSpot account ID, page URL, template name, a screenshot or short recording, the device/browser affected, and the result you expected. Do not send passwords, private customer records, access tokens, or other sensitive data.
Support includes: theme installation questions, configuration guidance, reproducible theme defects, and clarification of included templates or modules.
Not included unless separately agreed: custom development, content migration, copywriting, third-party integration work, analytics strategy, or legal review.