Documentation

Splash Lite — free HubSpot drag-and-drop theme

Everything you need to install, edit and ship a site with Splash Lite — natively in HubSpot's drag-and-drop editor, no code required.

Splash Lite · free edition

Overview

Splash Lite is a complete, free HubSpot CMS theme — not a trial. It ships drag-and-drop modules, reusable sections, page templates and system pages, including a blog.

Edit module content through HubSpot's fields, and adjust shared styles through theme settings. Preview your changes before publishing. The theme is built with right-to-left languages in mind.

Getting started

1. Install the theme

From the HubSpot Marketplace listing, click Install theme. It lands in Design Manager → @marketplace and becomes available to every new page.

2. Create your first page

Go to Content → Website Pages → Create, then pick a Splash Lite template. Start with Home for a full page, or Blank canvas to compose from scratch.

3. Edit and ship

Click any module to edit its fields. Use Add section to drop in a ready-made group of modules. Set your colours, fonts and spacing once in Theme settings and every page follows.

Tip: set your logo and brand colours in HubSpot's Brand settings first — Splash Lite inherits them automatically, so your first page is on-brand before you edit anything.

Templates

Splash Lite includes page templates and system templates. Start with the template suited to your page, and use the editing controls available for that template.

  • Home — a full homepage: hero, logo slider, statistics, credentials, testimonials, value narrative, services and CTA.
  • About — hero, value narrative, a statistics band and testimonials.
  • Services — hero, services grid, an image-and-text feature and an FAQ.
  • Case studies — case study cards with a credentials bar and testimonials.
  • Landing page — a focused lead-gen layout with room for a form, video or rich text.
  • 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 - Lite — a scroll-led narrative layout with a hero, statement and outcome explorer.
  • 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.
  • Blog listing — a card grid of your posts.
  • Blog post — an 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

Every module appears in the editor's Add menu with its own icon, and reads your global theme tokens so styling stays consistent automatically.

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. The pinned Spotlight stages (Scroll statement and Scroll narrative hero) have Alignment only.
  • 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

Site headerLogo, navigation menu, CTA button, optional language switcher. Logo only layout and logo height; the setting applies site-wide.
Site footerMulti-column footer with navigation groups, social links and a legal line. Logo only layout and logo height; the setting applies site-wide.
Section headingEyebrow, heading and intro for any section.
Long-form textRich text for articles, policies and long copy.

Content

HeroHeadline, intro, two buttons, trust pills and an optional background image or video.
Image and textSplit layout pairing an image with copy and a CTA.
Services gridIcon cards for services, features or capabilities.
Growth narrativeNumbered story rows for explaining a point of view.

Social proof

Logo sliderContinuous marquee, colour 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.
TestimonialsGrid, slider or carousel, with an optional category toggle.
Recognition countersLarge statistics with captions on a dark band.
Trust barCredential badges with icons.

Conversion

Call to action bandHeading, copy and buttons in a full-width band.
Frequently asked questionsAccessible accordion.
Case studiesCards with challenge, solution and a headline metric.
Pricing tablePlan cards with features, pricing and a highlighted recommendation.
Filterable listingSearchable card grid whose filter dropdowns build themselves from your tags.

Narrative & registration

Scroll Narrative HeroHero for a narrative page, with editable heading and introductory content.
Scroll StatementA full-width statement for separating parts of a narrative.
Outcome ExplorerFilterable cards for presenting outcomes and examples.
Registration PanelPage details beside a configurable HubSpot form area.
Background and styling controls vary by module. Review the available fields and Styles options in the editor, and preview the page before publishing.

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.

All sections

Sections are pre-composed groups of modules in the Add section picker. Drop one in, then edit each module inside it exactly as you would anywhere else.

  • Hero — full bleed — an edge-to-edge hero.
  • Social proof — logos + testimonials — a logo slider above testimonial cards.
  • Services showcase — a section heading with a services grid.
  • Story feature — image-and-text followed by a narrative block.
  • Results band — recognition counters with a trust badge bar.
  • Frequently asked questions — a heading with an accordion FAQ.
  • CTA banner — a closing call-to-action band.

Sections are starting points, not locked layouts — add or delete modules inside them freely.

Theme settings & tokens

Open Design Manager → Splash Lite → Edit theme settings, or click Theme settings inside any page editor. Changes apply across every page.

GroupControls
ColoursPrimary, secondary, action, deep navy, text, warm and cool backgrounds
TypographyHeading and body fonts, h1–h6 sizes, link and hover colours
ButtonsBackground, text, hover, corner radius
FormsBackground, border, label, field border, button styling
LayoutContainer width, section spacing, card corner radius
Header & footerBackground, text and logo controls

Primary colour, secondary colour and the header logo inherit from your HubSpot brand settings by default, so a new install matches your brand immediately. Override any of them at any time.

Blog setup

Splash Lite ships a blog listing and a blog post template. In Settings → Content → Blog, set the listing template to Blog listing and the post template to Blog post.

Post cards pull their image, title, summary, date and tags automatically. Comments and the author box are styled to match the theme.

Lite also includes the Filterable listing module — a searchable card grid whose filter dropdowns build themselves from your tags. Tag items as Dimension: Value (for example Topic: RevOps); Splash reads the part before the colon as the filter name and the part after it as the option. Dimensions with no matches hide themselves.

RTL & bilingual sites

Splash Lite is built with CSS logical properties, so it mirrors correctly in right-to-left languages such as Hebrew and Arabic — no separate stylesheet.

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.

Upgrading to full Splash

Splash Lite is the free edition: a complete theme with a smaller set of modules and sections and a blog. The paid Splash theme adds more modules, sections and page templates, including:

  • A filterable blog listing wired into the blog templates, plus blog featured, categories and table-of-contents modules
  • A feature comparison matrix to sit alongside your pricing table
  • Revenue calculator and maturity assessment
  • Team grid, process timeline, tabs, integration map, funnel visualisation and more
  • Case study, event, resources, contact, team and webinar landing page templates
See Splash

Updates

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.

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 Lite'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 Lite 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 or Splash Lite 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 are working on.

Splash Lite is built and maintained by IV-Lead, a HubSpot Solutions Partner.