Horizontal Panels Pro for HubSpot

A section that holds still while its panels move sideways. Panel width, scroll distance and pin offset are fields. Progress runs as a bar, dots or a counter, arrows and the arrow keys step between panels, and phones get a swipe or a plain stack instead of a pin.

Half-width panels

Two panels on screen, bar progress

The default shape. Two panels are visible at a time so the next one is always half-read, which is what pulls people through. The bar tracks scroll position exactly; the arrows move the page rather than the track, so nothing can drift out of sync.

Case studies

Work that moved the number

Scroll down and the panels move sideways. The section holds still until the last one arrives.

9 days to 1

Fintech

Cut onboarding from nine days to one

A rebuilt application flow, a shorter form, and a status page the applicant can actually read.

Read the case study
40 clinics

Healthcare

One booking path across forty clinics

Every location on the same template, with availability pulled from a single source instead of forty.

Read the case study
1,200 parts

Manufacturing

A product catalogue sales could edit

Twelve hundred parts, specification tables, and no developer standing in the way of a price change.

Read the case study
Top 3 organic

Education

Course pages that rank on their own

Structured content, clean headings, and a search that reaches every programme in the catalogue.

Read the case study
Quotes in-page

Logistics

Quotes in the browser, not the inbox

A freight calculator that answers the question on the page and hands sales a qualified lead.

Read the case study

Full-viewport panels

One panel at a time, on a dark surface

Full-width panels turn the section into a slide deck driven by scroll. Progress reads as a counter instead of a bar, and the scroll hint sits under the controls. Nothing here is a dark-mode switch. Every colour is its own field.

Product tour

Four things it does before you ask

Step one

It pins without a library

The section holds itself in place with sticky positioning and moves the track with a transform. No GSAP, no ScrollMagic, nothing to collide with whatever the host theme already loads.

Step two

Scroll distance is yours to set

Decide how much page scroll it takes to cross one panel. Lower feels quick and modern, higher gives long copy room to be read before it leaves.

Step three

It knows about your sticky header

Set the pin offset to the height of the header on the host page and the panels stop hiding underneath it.

Step four

Phones get something that works

Pinning is switched off below a breakpoint you choose. Panels become a swipe with scroll-snap, or stack under each other, whichever suits the page.

1 of 4

Keep scrolling, the section moves sideways

Third-width panels

Three across, stepped with dots

Narrow panels suit short items: a process, a set of principles, a timeline. The dots are buttons: clicking one scrolls the page to that panel, and the arrow keys do the same from the keyboard.

How it runs

Six steps, start to launch

Week one

Audit

What exists, what ranks, what breaks.

Week two

Architecture

Templates, modules, and the fields your editors will actually use.

Week three

Design

One page taken all the way, then the system that follows from it.

Week four

Build

Every value a field. Nothing hard-coded that an editor might need.

Week five

Migration

Content moved with redirects mapped before anything goes dark.

Week six

Launch

A rendered-page QA pass, then the switch.

Fixed-width panels

A picture wall on rails

Panels can be a fixed pixel width instead of a share of the screen, which keeps image crops identical on every viewport. The image shape, corner radius and fit are fields, and the panel content sits under the picture.

What it does

The section stays where it is while the page scrolls, and the row of panels inside it moves sideways by the same distance. When the last panel arrives, the section releases and the page carries on. Everything is driven by scroll position. The arrows and dots move the page rather than the track, so the two can never fall out of step.

Panels

Each panel takes an eyebrow, a title, body text, an image, a badge and a link. Leave any of them empty and it is left out of the markup rather than rendered blank. Panels are a repeater, so an editor adds and reorders them without touching a template.

Panel width

Panel width sets how much of the screen one panel occupies: full viewport, wide, half, a third, or a fixed pixel width. Narrow panels put more of them on screen and read as a list; full-width panels read as a deck. Fixed width keeps image crops identical across viewports.

Scroll distance

Scroll distance controls how much page scrolling it takes to cross one panel. Below 100% the panels move faster than the page; above it they linger, which suits longer copy. It is a percentage, so the feel stays the same whatever the panel width.

Pin offset

If the host page has a sticky header, set the pin offset to its height. The section then pins below the header instead of underneath it.

Progress and arrows

Progress runs as a bar, a row of dots, or a counter that reads 2 of 6. The dots are buttons. Arrows step to the next and previous panel and disable themselves at either end. The left and right arrow keys do the same thing when the section has focus.

Small screens

Pinning is switched off below a breakpoint you set, because holding a section still fights the browser's own scrolling on a phone. Below it, panels either become a native swipe with scroll-snap or stack under each other.

Reduced motion

Anyone who has asked their system for less motion gets the panels as a plain horizontal scroller with no pinning and no transform. That is a media query rather than a setting, so it follows the reader.

Style

Every colour, size, weight, letter spacing, radius and space is a field on the Style tab, grouped by what it affects: typography, section, container, heading, panels, image, panel text, badge, link, progress and arrows. Body and heading fonts and the accent colour inherit from the HubSpot theme, and each can be overridden per instance.

Accessibility

The section carries a label you write, the arrows carry descriptions you write, the dots expose which panel is current, and images take their own alt text. Keyboard users can step through panels with the arrow keys.

Notes on this page

Four instances of the same module, differing only in fields: half-width panels with a bar, full-viewport panels on a dark surface with a counter, third-width panels with dots, and fixed-width panels with images. No CSS on this page touches the module.

Horizontal Panels Pro — Studio Nope