On this page
Overview
Splash is a premium, fully editable HubSpot CMS theme: 40 drag-and-drop modules, 20 reusable sections, and 20 page templates plus 7 system pages. It's designed in Lovable and rebuilt natively for HubSpot's editor, so your marketing team edits content and layout without touching code — and without breaking the design.
- Fields-driven modules with sensible defaults, locked against accidental rebrands.
- A full design-token system: colors, typography, spacing, radius, buttons, and forms.
- Bilingual / RTL-ready, reduced-motion safe, and Lighthouse-passing.
Getting started
1. Install the theme
From the Marketplace listing, click Purchase then Install. Splash lands in Design Manager → @marketplace and becomes available to every new page.
2. Set your brand once
Before building, set your logo and brand colors in HubSpot's Brand settings. Splash's primary color, secondary color, and header logo inherit from them automatically, so your first page is on-brand before you edit anything.
3. Create a page
Go to Content → Website Pages → Create and pick a Splash template. Start with Home for a full page, or Blank canvas to compose from scratch.
4. Edit and ship
Click any module to edit its fields. Use Add section to drop in a ready-made group of modules. Adjust global styling once in Theme settings and every page follows.
Templates
Splash ships 20 page templates plus 7 system pages. Each is a drag-and-drop layout — pick the closest starting point, then add, remove, or reorder modules.
Core pages
- Home — full homepage: hero, logo strip, stats, credentials, testimonials, value narrative, pipeline, services, case studies, CTA.
- Home with metrics focus — a metrics-led homepage variant leading with statistics and integrations.
- About — narrative, timeline, statistics band, and team grid.
- Services — services grid, feature grid, and a process stepper.
- Pricing — pricing table, comparison matrix, and FAQ.
- Contact — contact block with form, plus an FAQ band.
- Team and Team member — team overview and an individual profile layout.
- Blank canvas — an empty drag-and-drop canvas.
Content & conversion
- Case study — narrative, metric cards, image-and-text, and testimonials.
- Resources — a downloadable resource library.
- Event — event details, agenda stepper, and FAQ.
- Frequently asked questions — accordion FAQ with a contact block.
- Landing page — focused lead-gen layout with room for a form, video, or rich text.
- Landing page for webinar — hero, video, speakers, and registration CTA.
- Thank you — post-conversion page with follow-on resources.
- Coming soon — a pre-launch holding page.
- Legal and policy — long-form text layout for privacy, terms, and policy pages.
Blog
- Blog listing — card grid with a filterable listing (see Blog & filterable listing).
- Blog post — article layout with author box and themed comments.
System pages
404 and 500 errors, password prompt, search results, email subscription preferences, subscription confirmation, and backup unsubscribe.
All 40 modules
Every module appears in the editor's Add menu with its own icon, and reads the global theme tokens so styling stays consistent automatically. Each exposes a Background option under its Styles tab — Transparent, Warm, Cool, or Dark navy — so you can build an alternating rhythm down the page.
Structure & layout (7)
- Site Header
- Logo, navigation menu, CTA button, optional language switcher.
- Site Footer
- Multi-column footer with navigation groups, social links, and a legal line.
- Page Header
- Title, intro, and breadcrumb for interior pages.
- Section Heading
- Eyebrow, heading, and intro for any section.
- Long-Form Text
- Rich text for articles, policies, and long copy.
- Image and Text
- Split layout pairing an image with copy and a CTA.
- Custom Code
- Page-level HTML/CSS/JS for trusted authors — update-safe, no fork required.
Hero & narrative (5)
- Hero
- Headline, intro, two buttons, trust pills, optional background image or video.
- Growth Narrative
- Numbered story rows for explaining a point of view.
- Approach Stepper
- Numbered circles with connectors for a process or pipeline.
- Process Timeline
- Chronological milestones.
- Funnel Visualization
- Stage-by-stage funnel or pipeline graphic.
Social proof & credibility (8)
- Logo Slider
- Continuous marquee, color or grayscale, pause on hover.
- Logo Strip
- Static row of client logos.
- Logo Grid
- Multi-row logo grid.
- Testimonials
- Grid, slider, or carousel with an optional category toggle and monogram avatars.
- Recognition Counters
- Large statistics with captions on a dark band.
- Statistics Band
- Headline numbers in a full-width band.
- Metric Cards
- KPI cards with label, value, and supporting note.
- Trust Bar
- Credential badges with icons.
Services, features & proof (5)
- Services Grid
- Icon cards for services or capabilities.
- Feature Grid
- Feature cards with icons and descriptions.
- Case Studies
- Cards with challenge, solution, and a headline metric.
- Team Grid
- Team member cards with photo, role, and links.
- Integration Map
- Connected-systems diagram with badges.
Conversion & commerce (6)
- Call to Action Band
- Heading, copy, and buttons in a full-width band.
- Pricing Table
- Plan cards with features, pricing, and a highlighted recommendation.
- Comparison Matrix
- Feature-by-plan comparison table.
- Revenue Calculator
- Interactive inputs producing a projected result.
- Maturity Assessment
- Scored questionnaire with a result band.
- Contact Block
- Contact details alongside a HubSpot form.
Content, media & blog (9)
- Filterable Listing
- Searchable card grid whose filter dropdowns build themselves from your tags.
- Resource Library
- Downloadable resource cards with optional gating.
- Blog Featured Post
- Highlight a chosen post.
- Blog Categories
- Category navigation for a blog.
- Blog Table of Contents
- Auto-linked headings for long posts.
- Frequently Asked Questions
- Accessible accordion.
- Tabs
- Tabbed content panels.
- Video Player
- Responsive embedded video.
- Event Details
- Date, location, agenda, and registration CTA.
All 20 sections
Sections are pre-composed groups of modules in the editor's Add section picker. Drop one in, then edit each module inside it exactly as you would anywhere else. Sections are starting points, not locked layouts — add or delete modules inside them freely.
| Group | Sections |
|---|---|
| Layout & intro | Hero — full bleed · Featured content · Features overview |
| Proof | Social proof — logos + testimonials · Results — stats + case studies · Metrics band · Case study showcase · Team introduction |
| Explain | Services showcase · Process timeline · Tabbed content · Integrations overview · Video feature |
| Convert | Pricing · Comparison table · CTA banner · FAQ + contact · Resource downloads |
| Advanced | Filterable listing · Custom Code / HTML |
Theme settings & design tokens
Open Design Manager → Splash → Edit theme settings, or click Theme settings inside any page editor. Changes apply across every page and template.
| Group | Controls |
|---|---|
| Colors | Primary, secondary, action, deep navy, text, warm and cool backgrounds |
| Typography | Heading and body fonts, h1–h6 sizes, link and hover colors |
| Buttons | Background, text, hover, corner radius |
| Forms | Background, border, label, field border, button styling |
| Layout | Container width, section spacing, card corner radius |
| Header & footer | Background, text, and logo controls |
Primary color, secondary color, and the header logo inherit from your HubSpot brand settings by default. Override any of them at any time.
Blog & filterable listing
In Settings → Content → Blog, set the listing template to Blog listing and the post template to Blog post. Comments and the author box are styled to match the theme.
Splash's blog listing uses the Filterable Listing module: filter dropdowns build themselves from how you tag your posts, and a keyword search filters live without a page reload.
Dimension: Value — for example Topic: RevOps or Platform: HubSpot. Splash reads the part before the colon as the filter name and the part after it as the option. Dimensions with no matching posts hide themselves automatically, so you can add or remove filters just by retagging.Hero background video
The Hero module accepts a background video. Under the module's Media group, paste a direct .mp4 URL into Background video URL.
- Upload your
.mp4to Marketing → Files in your HubSpot portal. - Copy its public URL.
- Paste it into the Hero module's Background video URL field.
RTL & bilingual sites
Splash is built with CSS logical properties, so it mirrors correctly in right-to-left languages such as Hebrew and Arabic — no separate stylesheet required.
Create a language variant of any page in HubSpot and set its language; the layout flips automatically. Add the language switcher in the site header so visitors can move between versions. No interface text is hard-coded — every label is an editable field, so translated copy replaces it cleanly.
Updates, forking & child themes
Theme updates arrive through the HubSpot Marketplace. Your page content is never overwritten — updates apply to the theme's code, not to the content you've entered.
If you edit the theme's code directly, HubSpot treats it as a fork and it stops receiving update-safe changes. To customize safely:
- Use Theme settings and module fields for styling and content — always update-safe.
- Use the Custom Code module for page-level HTML, CSS, or JS — also update-safe.
- For deeper changes, create a child theme so your overrides survive updates.
Before applying an update to a production site, clone a key page and preview it against the new version.
Accessibility & performance
- Every animation honors
prefers-reduced-motionand renders a still state. - Interactive widgets are keyboard-operable with visible focus states.
- Images carry
altandloadingattributes throughout. - Lighthouse: desktop performance 98 / accessibility 92; mobile performance 91 / accessibility 93.
AI Kit (optional)
The Splash AI Kit is an optional add-on: a set of Claude and Lovable playbooks plus a files library for rebrand sprints. It speeds up a rebrand, but it is never a dependency — Splash is fully editable with native HubSpot tools on its own.
Support
Email chen@iv-lead.com with your portal ID and a link to the page you're working on. We typically respond within 1 business day.
Splash is built and maintained by IV-Lead, a HubSpot Solutions Partner based in Tel Aviv.