On this page
Overview
Splash is a premium HubSpot CMS theme with drag-and-drop modules, reusable sections, page templates and system pages. It's designed in Lovable and rebuilt natively for HubSpot's editor, so your marketing team edits content and layout with HubSpot's own tools.
- Fields-driven modules with sensible defaults.
- A full design-token system: colors, typography, spacing, radius, buttons, and forms.
- Built with right-to-left languages in mind.
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 includes page templates and system templates. Start with the template suited to your page, and use the editing controls available for that template.
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.
- Blank canvas, minimal — an empty canvas with a logo-only header and a centred logo-only footer. Both belong to the page, so editing them never changes your site-wide header or footer.
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.
- Campaign landing page — starts with its own header and footer and an empty content area. Add modules and sections in the editor to build the page.
- Spotlight Motion — a scroll-led narrative layout with a hero, statement and outcome explorer.
- Webinar Motion and Webinar Motion - Hebrew — scroll-led webinar layouts with event details and a configurable registration area. For the Hebrew edition, set the page language to Hebrew and preview the right-to-left layout.
- 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.
Modules available in the editor
The modules listed below are available in the editor's Add menu. Background and styling controls vary by module; review the available fields and Styles options in the editor, and preview the page before publishing.
Alignment, width and spacing
Most Splash section modules have Alignment, Content width, Space above and Space below in their Styles tab. The Outcome explorer and Register panel keep them in a Layout group.
- Alignment (Module default, Left, Centre or Right) moves the eyebrow, heading, intro text and buttons. Cards, grids, pricing columns and tables keep their layout.
- Content width: Narrow (760px), Wide (1440px) or Full width. The background still runs the full width of the page.
- Space above and Space below: More (1.5x), Compact (half) or None. For exact pixel values, including separate phone values, use HubSpot's own section and module spacing.
- Exceptions: the hero offers Start, Centre, Left and Right. Section heading keeps its own Left, Centre and Right field. Contact block and Conversion copy have no Content width because they sit in a column, and Conversion copy uses HubSpot's own module spacing. The pinned Spotlight stages (Scroll statement and Scroll narrative hero) have Alignment only. The floating video card has none of these controls.
- Native HubSpot modules (form, rich text, image, CTA, video) that fill a full-width row sit in the same centred container as Splash modules, with 24px side padding. A native module in a column is not changed. On pages built before 5.1.2, a full-width native module that ran edge to edge is now inset, so preview those pages after updating. For a narrower centred form, set the section's maximum width in its section styles.
- Phone padding and margin set in HubSpot's section and module spacing now apply on phones. Before 5.1.2 they were ignored, so check any page where phone values were set.
Structure & layout
- Site Header
- Logo, navigation menu, CTA button, optional language switcher. Logo only layout and logo height.
- Site Footer
- Multi-column footer with navigation groups, social links, and a legal line. Logo only layout and logo height.
- 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.
Hero & narrative
- 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.
- Scroll Narrative Hero
- Hero for a narrative page, with editable heading and introductory content.
- Scroll Statement
- A full-width statement for separating parts of a narrative.
Social proof & credibility
- Logo Slider
- Continuous marquee, color or grayscale, pause on hover. Styling → Logo size sets the logo height: Small 28px, Medium 40px (default) or Large 52px, stepping down to 22 / 30 / 38px on mobile.
- 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
- 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
- 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.
- Conversion Copy
- Heading, supporting copy and optional proof points for a conversion section.
- Registration Panel
- Page details beside a configurable HubSpot form area.
Content, media & blog
- 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.
- Outcome Explorer
- Filterable cards for presenting outcomes and examples.
- Floating Video Card
- A dismissible floating card linking to a video or call to action.
The Campaign template includes its own header and footer components. These are part of the template and are not available in the editor's Add module menu. Form Split ships as the Form split — native form section; a legacy Form Split module also exists in the theme and is not offered for new content.
All 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 · Form split — native form |
| Advanced | Filterable listing |
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 in HubSpot and set its language. Preview the page in that language and review its layout, navigation and interface labels before publishing.
Alignment choices labelled Left and Right are fixed positions: they stay on that side on right-to-left pages too. The hero's Start alignment follows the page direction.
Updates & child themes
Theme updates arrive through the HubSpot Marketplace. Customize through the editor and theme settings, and review updates in a preview before applying them to a live site.
For deeper code changes, consider a child theme and review the resulting pages in a preview before using them on a live site.
Before applying an update to a production site, clone a key page and preview it against the new version.
Accessibility
Splash is built with accessibility in mind, but the result depends on the content you add. Add alt text to your images, check colour contrast after changing brand colours, and test your finished pages with the tools you use.
AI Kit
The Splash AI Kit helps the AI tool you already use (Claude, ChatGPT, Gemini, Lovable, Perplexity, Grok or Base44) plan, write and design pages, sections and blog posts with Splash's real modules and fields. It includes the module and template reference, ready prompts, skills, a Claude plugin, worked examples and starter images.
It's free for Splash and Splash Lite customers and optional: Splash is fully editable with HubSpot's own tools.
Download the Splash AI Kit 2.0.0 (zip, 7 MB)
Start with README.md. LICENSE-AND-USE.md covers use: use it with portals that have Splash installed; don't resell or redistribute it. AI tools draft; you review and publish.
Support
Email chen@iv-lead.com with your portal ID and a link to the page you're working on.
Splash is built and maintained by IV-Lead, a HubSpot Solutions Partner based in Tel Aviv.