---
title: Lead theme setup guide
---

[Skip to content](https://frontendstars.nl/lead-theme-setup-guide#main-content)

- Kwaliteit
- Klantvriendelijk
- Geen overheadkosten

- [Wat is HubSpot?](https://frontendstars.nl/wat-is-hubspot)
- [Wie zijn wij?](https://frontendstars.nl/ons-team)

[Contact](https://frontendstars.nl/meeting)

[![logo-frontendstars-transparant](https://frontendstars.nl/hs-fs/hubfs/logo-frontendstars-transparant.png?width=857&height=137&name=logo-frontendstars-transparant.png)](https://frontendstars.nl)

- [Klantportalen & B2B webshop](https://frontendstars.nl/portal-showcase)
- [Websites](https://frontendstars.nl/websites-in-hubspot)
- [Modules](https://frontendstars.nl/nl/modules)

Hoofdnavigatie openen

[Contact](https://frontendstars.nl/meeting)

Hoofdnavigatie sluiten

- [Klantportalen & B2B webshop](https://frontendstars.nl/portal-showcase)
- [Websites](https://frontendstars.nl/websites-in-hubspot)
- [Modules](https://frontendstars.nl/nl/modules)

- [Wat is HubSpot?](https://frontendstars.nl/wat-is-hubspot)
- [Wie zijn wij?](https://frontendstars.nl/ons-team)

Lead Theme

## Theme Settings

[Getting Started](https://frontendstars.nl/lead-theme-setup-guide#sg-getting-started) [Colors](https://frontendstars.nl/lead-theme-setup-guide#sg-colors) [Fonts](https://frontendstars.nl/lead-theme-setup-guide#sg-fonts) [Logo](https://frontendstars.nl/lead-theme-setup-guide#sg-logo) [Spacing & Layout](https://frontendstars.nl/lead-theme-setup-guide#sg-spacing) [Styling](https://frontendstars.nl/lead-theme-setup-guide#sg-styling) [Templates](https://frontendstars.nl/lead-theme-setup-guide#sg-templates)

## Modules

[Accordion](https://frontendstars.nl/lead-theme-setup-guide#sg-accordion) [Big Quote](https://frontendstars.nl/lead-theme-setup-guide#sg-bigquote) [Dynamic Cards](https://frontendstars.nl/lead-theme-setup-guide#sg-dynamic-cards) [Breadcrumbs](https://frontendstars.nl/lead-theme-setup-guide#sg-breadcrumbs) [Events Leader](https://frontendstars.nl/lead-theme-setup-guide#sg-events-leader) [Experts Video](https://frontendstars.nl/lead-theme-setup-guide#sg-experts-video) [FAQ](https://frontendstars.nl/lead-theme-setup-guide#sg-faq) [Footer](https://frontendstars.nl/lead-theme-setup-guide#sg-footer-module) [Form with Contact](https://frontendstars.nl/lead-theme-setup-guide#sg-form-new) [Header Alert](https://frontendstars.nl/lead-theme-setup-guide#sg-header-alert) [Image Gallery](https://frontendstars.nl/lead-theme-setup-guide#sg-image-gallery) [Questionnaire](https://frontendstars.nl/lead-theme-setup-guide#sg-questionnaire) [Rich Text Field](https://frontendstars.nl/lead-theme-setup-guide#sg-rich-text) [Slider Testimonials](https://frontendstars.nl/lead-theme-setup-guide#sg-slider-testimonials) [Table](https://frontendstars.nl/lead-theme-setup-guide#sg-table) [Tabs](https://frontendstars.nl/lead-theme-setup-guide#sg-tabs) [Upcoming Events](https://frontendstars.nl/lead-theme-setup-guide#sg-upcoming-events) [Website Header](https://frontendstars.nl/lead-theme-setup-guide#sg-website-header)

Part 1 — Theme Settings

## Getting Started

Theme

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.

Many settings (primary color, logo, fonts) automatically pull from your HubSpot **Brand Settings**. You can override any of them in the theme editor.

## Colors

Theme

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

Theme settings → **Colors**

Primary

Secondary

Body BG

Accent 1

Accent 2

- **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.

Primary, Secondary, Accent 1, and Accent 2 auto-fill from your Brand Settings. Change them here to override.

## Fonts

Theme

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

Theme settings → **Fonts**

- **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.

You can fine-tune the size and style of each individual heading level (H1–H6), links, and blockquotes under **More settings → Text**.

## Logo

Theme

Upload your company logo for the website header.

Theme settings → **Logo**

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

## Spacing & Layout

Theme

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

Theme settings → **Spacing**

### 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

## Styling (Buttons, Forms & more)

Theme

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.

Theme settings → **More settings**

### 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.

## Templates

Theme

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

### Page templates

Home

About Us

Landing Page

Blank

Courses Overview

Course Detail

### Blog templates

Blog Post

Blog Listing

Use the **Blank** template if you want to start from scratch and build your page entirely with modules.

Part 2 — Modules

## Accordion

Page module

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

In the page editor, search for **"Accordion"** in the module panel on the left, then drag it onto your page.

### 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.

Use the "Card" style preset under Style \> Accordions for a more elevated, modern look with subtle borders.

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

## Big Quote

Page module

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

Search for **"Big Quote"** in the module panel and drag it onto your page.

### 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.

If you want to link to this section from elsewhere on the page, fill in the "Anchor" field with a short text like `testimonial`, then link to `#testimonial`.

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

## Block with Dynamic Cards

Page module

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.

Search for **"Block with dynamic cards"** in the module panel.

### 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.

For pricing cards, use a list in the rich text field for feature bullet points, and put the price in the card title.

Works on: Landing Pages, Site Pages

## Breadcrumbs

Page module

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

Search for **"Breadcrumbs"** and drag it near the top of your page, typically below the header.

### 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.

Breadcrumbs are generated automatically from your page hierarchy in HubSpot. Make sure your pages are nested correctly under Settings \> URL for the trail to make sense.

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

## Events Leader

Page module

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.

Search for **"Events\_leader"** in the module panel. Best placed at the top of your page as a hero section.

### 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").

In the Style tab, you can change the date format between Short, Medium, Long, and Full to match your audience's expectations.

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

## Experts Video

Page module

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.

Search for **"experts video"** in the module panel.

### 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.

For YouTube, paste the full URL (e.g. `https://www.youtube.com/watch?v=...`). The module handles the embed automatically.

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

## FAQ

Page module

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

Search for **"faq"** in the module panel.

### 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.

FAQ sections are great for SEO. Search engines can display these as rich results. Keep your questions clear and answers concise.

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

## Footer

Page module

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.

Search for **"Footer"** in the module panel. Usually already placed in your page templates.

### 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.

You can add as many menu columns as you need. Keep them balanced (3-4 links each) for a clean look.

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

## Form with Contact

Page module

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.

Search for **"Form with contact"** in the module panel.

### 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.

Make sure your HubSpot form has a thank-you message configured. The default inline message is "Thanks for submitting the form."

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

## Header Alert

Global module

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.

This is a **global module** — you edit it once and it updates on all pages. Go to **Settings \> Website \> Global Content** in HubSpot, or find it in your page editor's global sections.

### 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.

Leave the text empty or don't set dates if you want the alert hidden. It only shows when there's text AND the current time is within the scheduled window.

Appears on: All pages (global)

## Image Gallery

Page module

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

Search for **"Image gallery"** in the module panel.

### 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.

For a client logo bar, enable grayscale and set a fixed height so all logos look uniform regardless of their original size.

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

## Questionnaire with Form

Page module

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.

Search for **"Questionnaire with form"** in the module panel.

### 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.

Answer keys use the format `q[question number]a[answer number]`. For example, `q2a1` means "the first answer of the second question." Use these to create conditional followup suggestions.

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

## Rich Text Field

Page module

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.

Search for **"rich-text-field"** in the module panel.

### 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.

This module works on almost every page type in HubSpot, including Knowledge Base and Customer Portal. It's your go-to for simple content.

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

## Slider Testimonials

Page module

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.

Search for **"Slider testimonials"** in the module panel.

### 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).

Add more than 3 testimonials for the best sliding experience.

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

## Table

Page module

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

Search for **"table"** in the module panel.

### 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.

Keep tables simple on mobile. Consider using the "Block with Dynamic Cards" module instead if your comparison has many items — cards work better on small screens.

Works on: Landing Pages, Site Pages

## Tabs

Page module

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.

Search for **"Tabs"** in the module panel.

### 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.

Use 3–5 tabs for the best user experience. Too many tabs become hard to navigate, especially on mobile.

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

## Upcoming Events

Page module

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

Search for **"Upcoming events"** in the module panel.

### 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.

Remove past events regularly, or combine this with the Events Leader module for your next big event.

Works on: Landing Pages, Site Pages

## Website Header

Global module

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.

This is a **global module**. Edit it once via **Settings \> Website \> Global Content** in HubSpot, and it updates everywhere.

### 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.

Keep your main navigation to 5–7 items maximum. Use dropdowns for subcategories instead of cluttering the top level.

Appears on: All pages (global)

Lead Theme — Complete Setup Guide

[![logo frontendstars HubSpot development](https://frontendstars.nl/hs-fs/hubfs/logo-frontendstars-transparant.png?width=857&height=137&name=logo-frontendstars-transparant.png "logo frontendstars HubSpot development")](https://frontendstars.nl)

![HubSpot Solution](https://frontendstars.nl/hubfs/HubSpot%20Solution.webp)

## HubSpot&AI

- Cialdini
- [DeRegtCables](https://deregtcables.com/)
- [ContentKalender](https://contentkalender.nl/)
- [Transitio](https://transitio.nl/)
- [Stryfes](https://stryfes.com/)

- [B2B webshops](https://frontendstars.nl/portal-showcase)
- [Klantportalen](https://frontendstars.nl/portal-showcase)
- Api Koppelingen
- AI themes
- AI Data clean up

#### Contact

T +31 (0)6 40595177  
[marieke@frontendstars.nl](mailto:marieke@frontendstars.nl)

Gerard Doustraat 103  
6717 MJ Ede  
Nederland

- [Algemene voorwaarden](https://frontendstars.nl/algemene-voorwaarden-frontendstars)