Setting up .HUB marketplace modules

1. Open the module listing in the HubSpot Marketplace and click Install (or Buy). The module is copied into your account under Design Manager → @marketplace.
2. Open the page you want to edit (Marketing → Website → Website pages or Landing pages) and click Edit.
3. In the left panel choose Add → Modules, search for the module by name and drag it into any drag-and-drop area of your page.
4. Click the module on the canvas to open its Content tab, then switch to the Styles tab for colours, fonts and spacing.
5. Click Publish (or Update). Module updates from the Marketplace are applied automatically when you install a new version.

Theme inheritance. Font and colour fields are set to Inherit from theme by default, so a module matches your site as soon as it is dropped in. Override any of them per instance in the Styles tab, or change them site-wide in Settings → Website → Themes → Edit theme settings.

Live demos: Client Review Slider · Interactive Calculator · Tabbed Class Tier Cards

See it configured on the live demo. The Content tab has three groups.

Intro panel — the tinted card that introduces the section.

• Section number and Kicker text form the small label above the heading (e.g. “08 Client words”). Leave the number empty to hide it.
• Section heading and Heading tag (H2 by default; pick H1 only if it is the first heading on the page).
• Anchor ID for navigation lets you link to the section from menus (e.g. #client-reviews).
• Show call-to-action button, Button caption and Button link — turn the button off if the section does not need one.

Reviews — one entry per testimonial. Click + Add to add a review, drag the handle to reorder, or open an entry and click the bin icon to remove it. Each review has:

• Quote headline — a short one-liner shown in bold. Quotation marks are added automatically.
• Full quote — the review text.
• Star rating — 0–5; set 0 to hide the stars.
• Client name and Client role or project.
• Avatar image — optional square photo or logo; when empty, Avatar initials (e.g. “BT”) are shown on a gradient circle.

Slider settings — Auto-advance slides and Seconds per page (auto-advance pauses on hover and focus and never runs for visitors who prefer reduced motion), plus screen-reader labels for the previous/next buttons and the page dots that you can translate.

How the layout works. The module shows up to four reviews per page on desktop (two beside the intro panel, two wide cards below) and two per page on tablets and phones. With one, two or three reviews on a page the grid rebalances automatically, so you can start with a single review and grow. Navigation (dots and arrows) appears only when there is more than one page.

Styles tab, in order:

• Text — heading and body font, heading/name colour, quote colour, accent colour (stars, kicker, active dot, hover states) and section heading size.
• Background — section background, intro panel style (soft gradient or flat colour), panel colour, review card colour and the second colour of the avatar gradient.
• Button — background, text and hover colours of the call-to-action.
• Corner — card corner radius and shadow (none / soft / strong).
• Spacing — vertical section padding, gap between cards and the content max width.
• Alignment — intro panel on the left or on the right of the cards.
• Animation — fade cards in when the page changes (automatically disabled for reduced-motion visitors).

Tips. Keep headlines under ~60 characters so cards stay the same height. Use a section anchor to link a header button straight to the reviews. To place the slider on several pages, add it to a global partial or save the configured module as a section template.

See two configured instances — a light “cost of manual work” and a dark “quick estimate” — with every formula explained on the live demo.

The module ships with a “cost of manual work” scenario (people × hours a week × hourly cost). Every label, range and formula is editable, so the same module becomes an ROI estimate, a price calculator, a savings or capacity planner.

Intro copy — anchor ID, kicker, heading (wrap a word in <em>…</em> to colour it with the gradient), heading tag and lead paragraph.

Sliders — one to four inputs. Each has a label, minimum, maximum, step, start value and an optional prefix/suffix shown next to the number (e.g. $, h, %). Sliders are numbered by their order: {s1}, {s2}, {s3}, {s4}.

Results — one to four live figures. Each result has a caption, an optional prefix/suffix, decimal places, a Highlight toggle and a How to calculate setting:

• Multiply all sliders together × factor — every slider is multiplied, then the factor is applied (e.g. people × hours × rate × 52). A slider you add later is included automatically.
• Add all sliders up × factor — every slider is summed, then the factor is applied. Also includes new sliders automatically.
• Custom formula — for anything else: {s1} * {s2} * 4.33, ({s1} - {s2}) / {s2} * 100, {s1} * 29 + {s2} * 9. Only slider references, numbers, + - * / and brackets are accepted, so formulas are safe to hand to editors. A slider not mentioned in a custom formula is ignored — add it to the formula when you add it to the sliders.

Results panel — number format (US, EU, FR or UA separators), a note under the figures, and an optional call-to-action button with caption and link.

• Text — heading and body font, heading/figure colour, body colour, caption colour, accent colour (kicker, slider thumbs and fill, highlighted results), heading gradient end colour, heading size and result figure size.
• Background — Color scheme (Light, or Dark with a built-in dark palette and a white button — accent, gradient and a custom button colour still apply), Divider lines between sliders, section background, results panel background and slider track colour.
• Button — background, text and hover colours.
• Corner — results panel corner radius.
• Spacing — section padding, gap between the sliders and the panel, content max width.
• Alignment — results panel on the right (default) or on the left of the sliders. On phones the panel always stacks below.
• Animation — figures count up to their new value; automatically off for visitors who prefer reduced motion.

Tips. Keep slider ranges realistic so the figures stay believable. Put the most persuasive figure last and switch on Highlight. If a custom formula is mistyped the figure shows 0 — check brackets and that every reference is written as {s1}. Both a light and a dark instance are on the live demo.

Drop the module into a page, then in the Content tab add one tab per class or tier and, inside each tab, the cards it should show (title, description, price or label and a button). Reorder tabs and cards by dragging their handles. The Styles tab follows the same order as above — Text, Background, Button, Corner, Spacing, Alignment, Animation — and inherits your theme colours and fonts by default. See the live demo for a configured example.

• The module looks unstyled in the editor. Reload the editor once after installing — the module's CSS is loaded on first render.
• Fonts differ from my site. Check that the font fields in the Styles tab are still set to Inherit from theme, or pick the same font your theme uses.
• A field I changed in a new version does not show on an old page. Field defaults only seed new module instances; on an existing page open the module and set the field yourself.
• Something else? E-mail maryberezhna@gmail.com with a link to the page and a screenshot — we usually reply within two business days.