HubSpot Marketplace Module

Process Timeline Pro for HubSpot CMS

Five Process and Timeline Layouts in One Module

Horizontal "how it works" steps, a vertical timeline, an alternating milestone spine, a grid of numbered cards, and a progress tracker. Add your steps in one repeater, choose a layout, and publish. Everything is editable from the Style tab, and it ships as under 8KB of vanilla JavaScript. No code, no theme dependency, no HubDB.

Get the Module arrow_outward Works with any HubSpot CMS theme · Pure vanilla JavaScript · $9.99

Process Timeline Pro module for HubSpot CMS showing process steps, a timeline, and a progress tracker

Five common layouts, one module, no code

view_timeline

Five Layouts in One Module

Horizontal steps, vertical timeline, alternating spine, numbered cards, and a progress tracker. One-click switch from a dropdown; every layout is responsive and collapses neatly on mobile.

palette

Style Every Pixel From the Editor

Fonts, colors, markers (numbers, letters, dots, or Font Awesome icons), connectors, card background, border, shadow, padding, and animation are all editor fields, inheriting your theme. Nothing hardcoded.

speed

Fast, Accessible, SEO-Ready

Under 8KB of vanilla JavaScript with no jQuery, reduced-motion-aware animations, semantic lists with a configurable heading level, and opt-in HowTo or ItemList JSON-LD with deep-linkable steps.

format_list_numbered

Markers Your Way

Markers can be numbers, Roman numerals, letters, dots, or Font Awesome icons from HubSpot's icon picker. Each step can show an image, an icon, or just text, so the same module suits a process, a roadmap, or a milestone timeline.

repeat

One Repeater, Any Length

Add your steps once in a single repeater and reuse them across every layout. Reorder, add, or remove a step and the connectors and numbering update on their own, with no manual relinking.

smartphone

Tidy on Every Screen

On phones the horizontal layout stacks and the alternating one moves to a single side, so the connectors stay clean and the steps stay readable from desktop down to mobile.

What you can build

Process Timeline Pro fits anything that happens in a sequence. Here are four common uses.

How it works

A clean horizontal row of numbered steps for a homepage or product page, with an icon or image per step and HowTo schema turned on for rich results.

Company timeline

A vertical or alternating milestone spine for an about page, each entry dated and described, scroll animations respecting reduced-motion.

Onboarding or roadmap

A progress tracker that shows where a process stands, or a grid of numbered cards laying out an onboarding flow or product roadmap.

Service or sales process

Walk prospects through your delivery process step by step, branded to match your theme, with markers as numbers, letters, or your own icons.

Works with any HubSpot theme

Process Timeline Pro is a standalone module. Install it in any HubSpot CMS portal and drop it on any page, including website pages, landing pages, and blog posts. No theme dependency, no jQuery, no HubDB, no external libraries. Pure vanilla JavaScript.

Questions

What layouts does it include?

add

Five in one module: horizontal how-it-works steps, a vertical timeline, an alternating milestone spine, a grid of numbered cards, and a progress tracker. Add your steps in one repeater, switch the layout from a dropdown, and publish. Every layout is responsive and collapses neatly on mobile.

How much can I style?

add

Everything is editable from the Style tab: fonts, colors, markers, connectors, cards, spacing, and animation, all inheriting your theme with nothing hardcoded. Markers can be numbers, Roman numerals, letters, dots, or Font Awesome icons from HubSpot's icon picker, and each step can show an image, an icon, or just text.

Is it fast and accessible?

add

Yes. It is about 8KB of vanilla JavaScript with no jQuery, the scroll animations respect reduced-motion settings, and the markup uses proper lists with a heading level you choose. On phones the horizontal layout stacks and the alternating one moves to a single side, so the connectors stay tidy.

Is it good for SEO?

add

You can turn on HowTo or ItemList JSON-LD structured data with deep-linkable steps, so a how-it-works or step-by-step section is eligible for rich results. It is a standalone module with no theme dependency and no HubDB, and it works on any HubSpot CMS theme.

Lay out any process with Process Timeline Pro

Five layouts in one module, markers your way, every pixel styleable from the editor, under 8KB of vanilla JavaScript, accessible, and SEO-ready with opt-in HowTo and ItemList schema. No code required.

Get the Module arrow_outward