How to install the theme and start building pages.

1. Upload the theme. Go to Settings → Tools → Content → Themes and upload the theme folder.
2. Select the theme. Go to Marketing → Website → Website Pages, create or edit a page, and select Lead from the theme picker.
3. Configure theme settings. Open the Design tab (paint-roller icon) in the page editor. Changes here apply globally to every page using this theme.

Set five core colors that are used throughout the entire site — buttons, forms, cards, header, footer, and more.

• Primary — Main brand color. Used for buttons, form headers, and active elements.
• Secondary — Subtle background color for form containers and the header top bar.
• Body background — The default page background color.
• Accent 1 — Used for icon fills, table headers, and decorative accents.
• Accent 2 — Used for borders, dividers, and subtle UI elements.

Choose the typefaces for your site. The theme uses two font families by default.

• Primary font — Used for headings, menus, and buttons. Default: Montserrat.
• Secondary font — Used as a secondary typeface. Default: Source Serif Pro.
• Heading font — Controls all headings (H1–H6). Inherits from Primary by default.
• Body font — Controls paragraph text, labels, and general content. Default size: 16px.

Upload your company logo for the website header.

Upload an image and set the alt text. If you've already set a logo in your Brand Settings, it will appear here automatically.

Control how wide your content stretches and how much vertical space sits between sections.

Maximum content width

Choose how wide your page content can get on large screens:

• Compact — 900px
• Default — 1000px
• Comfortable — 1200px
• Custom — Pick any value between 700–1400px

Vertical spacing

Choose the gap between sections on each page:

• Compact — 48px
• Default — 60px
• Comfortable — 80px
• Custom — Pick any value between 20–200px

Fine-tune the look of buttons, forms, icons, cards, tables, and the header/footer. All of these are found under one section in the theme editor.

Buttons

The theme has two button styles you can customize:

• Primary button — Filled background, used for main calls-to-action. You can change the text color, background color, border, corner radius, and hover effect.
• Secondary button — Outlined/ghost style for less prominent actions. Same customization options as primary.

Forms

Style all HubSpot forms on your site at once:

• Title bar — The colored heading above the form. Set its text color and background.
• Labels & help text — Font and spacing for field labels and the small helper text below fields.
• Input fields — Background color, border, corner radius, and placeholder color for text inputs.
• Submit button — Choose between the Primary, Secondary, or Simple button preset.
• Form container — Background color, padding, border, and corner radius of the form wrapper.

Icons

Set the default icon fill color and background color used across modules.

Cards

Set default text color, background, border, and corner radius for card components.

Tables

Customize colors for table headers, body rows, and footer rows. Adjust cell padding and borders.

Website header

Style the site-wide header:

• Top bar — Background color for the narrow utility strip.
• Menu — Font, text color, hover color, and active state for navigation links.
• Dropdowns — Text color, background, and hover styles for dropdown submenus.
• Language switcher — Styles for the multi-language selector (if enabled).
• Background — Overall header background and text color.

Website footer

Style the site-wide footer:

• Menu — Font, text color, hover color, and active state for footer navigation links.
• Background — Footer background and text color.

When creating a new page, you'll be asked to choose a template. Here are the available options.

Page templates

Blog templates

Collapsible sections that let visitors expand and collapse content. Great for keeping long pages clean while still providing detailed information.

How to set it up

1. Choose your icon style. Under the Content tab, pick either "Caret" (an arrow) or "Plus" (a + sign) to indicate the accordion can be opened.
2. Add your accordion items. Each item needs a Title (the clickable header) and Content (what appears when expanded). Click "Add" to create more items.
3. Decide which items start open. Check "Open by default" on any item that should already be expanded when the page loads.
4. Style it (optional). Switch to the Style tab to change the title font, background colors, card style (plain or card), border, and corner rounding.

Works on: Landing Pages, Site Pages, Blog Listings, Blog Posts

A bold, eye-catching quote section with an author photo, name, and optional signature image. Perfect for testimonials or expert endorsements.

How to set it up

1. Write your headline. Fill in "Heading 1" with a short intro like "What our clients say" (leave empty if you only want the quote).
2. Enter the quote. Put the actual quote text in "Heading 2".
3. Add the author. Fill in the author's name and a short description of why they matter (e.g. "CEO at Company X").
4. Upload images. Add a photo of the author (required) and optionally a signature image for a personal touch.
5. Add a CTA (optional). If you want visitors to take action after reading the quote, attach a CTA button.

Works on: Landing Pages, Site Pages, Blog Listings, Blog Posts

A flexible card grid section with a header, multiple content cards (each with a title, text, and button), and a footer. Ideal for pricing plans, feature comparisons, or service overviews.

How to set it up

1. Set the header. Add a main title and optional subtitle that introduce the card section.
2. Create your cards. Each card has a title, a rich text area for content (supports lists and formatting), and an optional button. Click "Add" to create more cards.
3. Configure each card's button. You can either pick a HubSpot CTA (recommended) or manually enter button text + URL. If you use a CTA, the manual fields are hidden automatically.
4. Set up the footer (optional). Below the cards you can add a title, subtitle, button, and a simple text link for secondary actions.
5. Adjust the layout. In the Style tab, set the number of columns for desktop (default: 3) and mobile (default: 2). You can also control card shadow and max width.

Works on: Landing Pages, Site Pages

A navigation trail that shows visitors where they are in your site hierarchy (e.g. Home / Services / Consulting). Helps with orientation and SEO.

How to set it up

1. Choose your divider. The default separator between items is /. You can change it to >, |, or anything else.
2. Toggle the first item. "Show first item" controls whether the homepage/root appears. Keep it on for most pages.
3. Style the fonts (optional). In the Style tab, you can set a different font for the last (current page) item to make it stand out.

Works on: Landing Pages, Site Pages, Blog Listings, Blog Posts

A hero-style section designed for event or product landing pages. Shows a heading, description, date/time, pricing information, an image, and call-to-action buttons. Comes with a dark mode variant.

How to set it up

1. Write your heading and subheading. These are the big, attention-grabbing texts visitors see first.
2. Add body text. Use the rich text field for bullet points or a short description of what the event/product includes.
3. Configure dates. Set the start and end date/time, and choose the timezone (CET or EDT). The module formats these automatically.
4. Set up pricing. Enter the original price and the final price. Enable "strike-through" if you want to show a discount by crossing out the original price. Add a note like "30 day money-back guarantee" in the rich text below.
5. Upload your image. This appears on the right side of the module. Check "overflow image" if you want it to extend beyond the module's boundaries for a dynamic effect.
6. Add CTAs and links. Under "Linking," add one or more CTA buttons (like "Register now") and optional text links (like "Read more below").

Works on: Landing Pages, Site Pages, Blog Listings, Blog Posts

A section showcasing expert testimonials or opinions via video. Each expert gets a card with their name, role, thumbnail, and either a HubSpot-hosted video or a YouTube link.

How to set it up

1. Set a section heading. Something like "What the experts say" to introduce the section.
2. Add your first expert. Click "Add" under Experts to create a card.
3. Fill in their info. Add their name and a short role description (e.g. "Professor, Harvard University").
4. Upload a thumbnail image. This is the image shown on the card before the video plays.
5. Choose a video source. Select "HubSpot video" to pick a video from your File Manager, or "YouTube link" to paste a YouTube URL.
6. Set playback behavior. "Play inline" means the video plays right on the page. Uncheck it to open the video in a popup modal instead.
7. Repeat for more experts. Add as many expert cards as you need.

Works on: Landing Pages, Site Pages, Blog Listings, Blog Posts

A frequently-asked-questions section with expandable answers, optional icons, images, and action buttons per question. Also generates structured data for SEO.

How to set it up

1. Set the section title. Default is "Frequently asked questions." Choose whether it's left-aligned or centered.
2. Add an intro (optional). Use the rich text intro field to write a sentence above the questions.
3. Choose your layout. Toggle "Show 2 columns" on if you have many short questions. Otherwise, keep it single-column.
4. Add your FAQ items. Click "Add" and fill in:

• Heading/Question – The question visitors see.
• Subheader – Optional subtitle shown under the question (before expanding).
• Answer – The full answer (rich text, supports formatting).
• Icon – Either upload an image icon or pick a FontAwesome icon. The image takes priority if both are set.
• Image – An optional image that appears next to the answer when expanded.
• Button – An action button below the answer (e.g. "Learn more") with a URL.

Works on: Landing Pages, Site Pages, Blog Listings, Blog Posts

The site-wide footer with your logo, contact info, social media links, navigation menus, and legal text. Typically placed in your template's footer area.

How to set it up

1. Upload your logos. Add your main logo (top-left of footer) and optionally a smaller sub-logo for the bottom.
2. Enter contact details. Fill in your phone number and email. If you leave either empty, it won't appear.
3. Add social media links. Paste the full URLs for YouTube, Facebook, Twitter/X, LinkedIn, WhatsApp, and TikTok. Any field left empty is automatically hidden.
4. Build your navigation menus. Click "Add" under Menu's to create navigation columns. Each column gets a heading (like "Company" or "Resources") and a list of links you can manage.
5. Add legal text. Put your privacy policy link, cookie settings, and copyright notice in the "Legal texts" rich text field at the bottom.

Works on: Landing Pages, Site Pages, Blog Listings, Blog Posts

A contact section that combines a HubSpot form with a list of contact persons (photo, name, role, phone, email). Makes it easy for visitors to reach you.

How to set it up

1. Set the title. Something like "Contact us today" or "Get in touch."
2. Add a description. Write a short intro above the form explaining what happens after they submit.
3. Select your form. Click the Form field and pick an existing HubSpot form from your account. The form needs to be created first in HubSpot > Marketing > Forms.
4. Add text next to the submit button (optional). Something encouraging like "Quick response guaranteed!" appears beside the submit button.
5. Add contact persons. Under "Service employees," add people visitors can contact directly. Each person gets a photo, name, job title, phone number, and email. You can add up to 10.
6. Set a footer title. This appears above the contact persons, like "Questions? Contact us directly."

Styling options

• Top margin / padding – Control spacing around the module (None, Small, Medium, Large).
• Background color – Change the section background.
• Heading type – Choose H1, H2, or H3 for SEO purposes (usually H2).
• Heading & text color – Override the default colors if needed.

Works on: Landing Pages, Site Pages, Blog Listings, Blog Posts

A site-wide notification bar that appears above the header. Use it for announcements, promotions, or time-limited events. It can be scheduled to appear and disappear automatically.

How to set it up

1. Write your alert text. Keep it short — this is a single-line banner (e.g. "New course available! Register before June 30th").
2. Add a link (optional). Set a URL and link text so visitors can click through to a relevant page.
3. Schedule it. Set a start date/time and end date/time. The alert will only appear between these times — no need to manually remove it.
4. Toggle the background. Enable "Background color" to give the banner a colored background that stands out more.

Appears on: All pages (global)

A responsive grid of images — perfect for client logos, partner badges, certifications, or photo galleries.

How to set it up

1. Add a heading (optional). Something like "Our partners" or "Trusted by."
2. Upload your images. Click "Add" for each image. You need at least 1, and the default is 6 slots.
3. Configure the grid layout. In the Style tab, set the number of columns for desktop and mobile, and the maximum gallery width.
4. Choose image display options. You can:
   • Enable grayscale (on by default) — makes all images black and white.
   • Set a fixed height — forces all images to the same height for alignment.
   • Adjust corner radius — rounds the image corners.
   • Control spacing between images.

Works on: Landing Pages, Site Pages, Blog Listings, Blog Posts

An interactive multi-step questionnaire that guides visitors through questions, optionally collects their details via a form, and shows personalized results based on their answers. Great for product finders, assessments, or lead qualification.

How to set it up

1. Write an intro. Add a title (e.g. "Find your best fit") and introductory text to explain what the questionnaire does.
2. Add your questions. Click "Add" under Questions. For each question:
   • Write the question text.
   • Choose single answer (radio) or multiple answers (checkbox).
   • Add answer options — each with an answer text and optional result output.
3. Configure result behavior. For each question, decide whether to show the output of selected answers or unselected answers on the result page.
4. Link to a form (optional). Under "Related form," select a HubSpot form. Visitors will fill it in after answering all questions, before seeing results. Leave empty to skip the form step.
5. Connect answers to form fields. If your form has hidden fields, put the field's internal name in "Question property." The selected answer is automatically submitted through that field.
6. Set up the result step. Add a title and subtitle for the results page. Optionally add:
   • Followup Suggestions — targeted content blocks shown based on specific answer combinations (using answer keys like q3a2).
   • Fit Statements — short personalized notes inserted into specific question result blocks.
7. Customize button labels. Under "Labels," you can rename all navigation buttons (Next, Back, See result, Start over, etc.) to match your tone of voice.

Works on: Landing Pages, Site Pages, Blog Listings, Blog Posts, Case Studies, Web Interactives

A versatile content block for free-form text, images, and links. Use it whenever you need a simple section with formatted text that doesn't fit a more specialized module.

How to set it up

1. Write your content. Use the rich text editor to add headings, paragraphs, lists, links, and embedded content.
2. Add images (optional). You can attach one or more images that display alongside your text.
3. Add links or CTAs (optional). You have several options:
   • A HubSpot CTA button (managed centrally).
   • Manual CTA links (up to two: primary and secondary).
   • A generic URL field for any link type.
4. Style the background (optional). In the Style tab, set a background color or adjust spacing.

Works on: All page types (Landing Pages, Site Pages, Blog, Knowledge Base, Customer Portal, and more)

A carousel/slider showing testimonial cards from clients or industry leaders. Each card features an author photo, name, role, company logo, and a quote. Visitors can swipe or click through.

How to set it up

1. Set a heading. Something like "What industry leaders say" or "Client testimonials."
2. Add testimonial cards. You need at least 3 items for the slider to work properly. For each card:

• Author Image (required) – A photo of the person giving the testimonial.
• Author – Their name.
• Function – Their role or title (e.g. "Marketing Director at Acme Inc").
• Logo image – Their company logo (appears on the card).
• Show line – Toggle a divider line between the person info and the quote.
• Quote – The testimonial text (rich text, supports formatting).
• Link card – Makes the whole card clickable (e.g. links to a case study).

Works on: Landing Pages, Site Pages, Blog Listings, Blog Posts

A structured comparison or data table. Perfect for pricing comparisons, feature matrices, or any content that works best in rows and columns.

How to set it up

1. Define your columns. Each column represents a category or plan. Add column headers.
2. Add rows. Each row is a feature or data point. Fill in the cell content for each column.
3. Style your table. Use the Style tab for spacing and visual adjustments.

Works on: Landing Pages, Site Pages

Organizes content into clickable tabs. Only one tab's content is visible at a time. Great for grouping related content without making the page too long.

How to set it up

1. Add your tabs. Click "Add" to create each tab. Give it a clear, short title that fits in the tab bar.
2. Fill in the content. Each tab has its own rich text area where you put the content for that panel.
3. Order your tabs. Drag items to reorder them. The first tab is selected by default on page load.
4. Style (optional). Adjust fonts, colors, and spacing in the Style tab.

Works on: Landing Pages, Site Pages, Blog Listings, Blog Posts

Displays a list of upcoming events with dates and call-to-action buttons for registration. Use it on your homepage or events overview page.

How to set it up

1. Add your events. Click "Add" for each event. Fill in the event title, date, and a short description.
2. Add a CTA. Each event can have a button linking to the registration or detail page.
3. Order your events. Put the nearest event first, or sort them however makes sense for your audience.
4. Style (optional). Adjust spacing and colors in the Style tab.

Works on: Landing Pages, Site Pages

Your site-wide navigation bar with logo, menus, and CTA buttons. This appears at the top of every page. It includes responsive mobile navigation (hamburger menu) and supports 40+ languages.

How to set it up

1. Upload your logo. Add your site logo that appears in the top-left corner. It automatically links to your homepage.
2. Build your navigation. Add menu items with links to your main pages. You can create dropdown submenus for grouped content.
3. Add header CTAs. Place one or more call-to-action buttons in the header (e.g. "Get started" or "Contact us").
4. Test on mobile. The header automatically converts to a hamburger menu on smaller screens. Preview your page on mobile to make sure everything looks right.

Appears on: All pages (global)