Skip to Content

Custom HubSpot modules

A few modules I’ve built for clients

Each section below is a custom module first built for a client project, rebuilt here with sample content so you can try it: switch the options, open the accordions, move the sliders.

They’re only a handful of examples. HubSpot can do far more than its standard modules suggest, and if you can describe what you need, it can probably be built.

Explore the modules Talk about your project

01 · Navigation

Table of Contents

A table of contents that builds itself from the headings on the page. It sticks to the top as you scroll and shows where you are, which helps on long service pages, guides and resource hubs.

02 · Personalisation

Multi-Variant Content Controller

One page, several audiences. Visitors choose who they are and the hero changes its message, image and colour to match. The choice carries through to the cards and FAQ below, and you can link straight to a version from an email or an ad.

Look established from day one

This is sample copy for one audience. Pick the other option above and the headline, image and colour all change, along with the cards and FAQ further down the page.

See the cards Get in touch

03 · Personalisation

Multi-Variant Cards

Feature cards that change with the audience chosen in the hero above, so each visitor sees the benefits that matter to them.

What a small business gets

Sample cards for the first audience. Pick the other option in the hero and the whole set changes.

  • Look the part

    A site that holds its own next to much bigger competitors.

  • Easy to update

    Change text, images and offers yourself, without waiting on a developer.

  • Leads into HubSpot

    Forms and calculators send their answers straight to your CRM.

  • Room to grow

    New pages and features slot in as the business grows.

04 · Personalisation

Multi-Variant FAQ

FAQs that follow the same choice. Each audience gets its own questions, grouped into tabs by topic.

Questions from small businesses

Can I edit these modules myself?

Yes. Every module has simple fields for its text, images and options, right in HubSpot’s page editor.

Do I need a new website to use custom modules?

No. Custom modules can be added to the HubSpot theme you already have, or built as part of a new one.

What if I want something slightly different?

Most modules start from an idea like “this, but for us”. The ones on this page were all adapted from client projects.

05 · Storytelling

Accordion with Images

Walk visitors through a process one step at a time, with an illustration for each step. A good fit for explaining how a service works.

Here are the Steps to Take

First Step
Steps-1
Eum id-toties insignia, regula est NON-2 si Cedere nam arcu leo fruges in aut sortiri id miseriae vel consiliarorum. Eum id-usus ricissitudincs, pede hic nisi et dis capitis si fundatam expedita.

Second Step
Steps-2
Eum id-toties insignia, regula est NON-2 si Cedere nam arcu leo fruges in aut sortiri id miseriae vel consiliarorum. Eum id-usus ricissitudincs, pede hic nisi et dis capitis si fundatam expedita.

Third Step
Steps-3
Eum id-toties insignia, regula est NON-2 si Cedere nam arcu leo fruges in aut sortiri id miseriae vel consiliarorum. Eum id-usus ricissitudincs, pede hic nisi et dis capitis si fundatam expedita.

Fourth Step
Steps-4
Eum id-toties insignia, regula est NON-2 si Cedere nam arcu leo fruges in aut sortiri id miseriae vel consiliarorum. Eum id-usus ricissitudincs, pede hic nisi et dis capitis si fundatam expedita.
Contact
Steps-1 Steps-2 Steps-3 Steps-4

06 · Data

HubDB Map

The locations live in a HubDB table, so adding a new office or store is a quick edit, not a developer job. Pick a place in the list or on the map and the other follows.

Locations

07 · Calculators

ROI Calculator – Sliders

A quick estimate visitors can play with. A calculator gives people a reason to stay on the page and a number to bring to a sales conversation. The questions and formula here are sample content.

How much time could you save?

Sample calculator. Move the sliders to match how a team works today and the estimate updates as you go.

100
50
20
10
10
Your results
Monthly Annually
Hours saved by your team 0 hrs 0 hrs
Hours saved by your clients 0 hrs 0 hrs

That's the same as 0 working days a month or 0 weeks a year.

Talk through your numbers

08 · Calculators

ROI Calculator – Advanced

A more detailed model: a three-year profit projection with editable pricing, assumptions and charts, for when the sale depends on showing the numbers. All figures are samples.

What could a bundled plan earn?

Sample model. Change any price, the number of accounts or the assumptions, and the three-year projection updates.

What's in your package
What you charge your customers
What the provider charges you
Your margin per account per month Core Plan: 0 Add-on: 0
Adjust assumptions

Core plan assumptions

Add-on assumptions

Your ROI breakdown

Month by month for the first three years, as accounts come up for renewal and join the plan.

Profit per year

Year 1 $0
Year 2 $0
Year 3 $0

09 · Storytelling

Sticky Timeline Scroller

An image stays in place while the story scrolls beside it, changing as each step comes into view. Works well for processes, company histories and case studies.

How a custom module comes together

  1. Step 01

    Discovery

    We talk through what the page needs to do, who it’s for, and what your team will want to change later.

  2. Step 02

    Design

    The module is designed to fit your brand and sit naturally alongside the rest of your pages.

  3. Step 03

    Build

    I build it in HubSpot with plain-language editing fields, so your team can update it without help.

  4. Step 04

    Launch

    It goes live on your site, and your team gets a short walkthrough of how to use it.

10 · Storytelling

Horizontal Scroll Cards

Keep scrolling down and the cards slide sideways while the panel holds still. You can also drag the cards or click the bars to jump to one. The card in the centre is in focus and the rest fade back, so it suits a short sequence: how a service works, product features, or a set of videos.

How it works

Getting started is simple

Tell us what you need

A short form or a quick call. Either way, it takes a few minutes and there’s nothing to install.

Get a plan that fits

You get a recommendation built around how you work, with pricing upfront.

Set up alongside your team

Setup happens with your team, not around them, so nothing stalls while you wait.

Everything in one place

Progress, documents and next steps live in a single dashboard.

Help when you want it

Real people on the other end, by chat, email or phone.

And plenty more

Have something else in mind?

These are just a few examples of what’s possible in HubSpot. If there’s a page, tool or feature you’ve wanted but haven’t seen in a standard module, let’s talk about building it.

Talk about your project