01
Marketing
Home
Hero, featured homes, approach, process, reviews and contact.
Introduction
Haven is a drag-and-drop HubSpot theme that helps builders show off projects, homes and floor plans, without writing a line of code.
35
Custom modules, grouped by purpose and ready to drag onto any page.
Drag and drop
Build every page from modules in the HubSpot page editor.
Fully responsive
Layouts adapt to desktop, tablet and mobile screens.
Easy to brand
Change colours, fonts and buttons once in theme settings.
Requirements
A HubSpot account with CMS Hub. [CONFIRM MINIMUM CMS HUB TIER BEFORE SUBMISSION]
Installation
Up and running in four steps.
Follow these in order. The whole setup takes about ten minutes.
01
Install the theme
Open the Haven listing in the HubSpot Template Marketplace and choose Install. The theme is added to your Design Manager.
Template MarketplaceInstall theme
02
Create a page
Go to Content, then Website Pages, then Create, and pick Haven from the theme list.
ContentWebsite PagesCreate
Choose a theme: Haven
03
Choose a template
Select a template such as Home, About or Project Listing, then add modules to the page.
HomeAboutProject Listing
04
Set your brand
Open Settings, then Website, then Themes, and update colours, fonts and buttons in the Haven theme settings.
SettingsWebsiteThemes
Edit theme settings
Tip. Start from the demo Home page, replace the sample text and images, then remove any modules you do not need.
Theme Settings
One change, every page.
All global styling lives in the theme settings. Find them in the page editor under Theme settings, or in Design Manager under Edit theme settings.
Colours
Five brand colours control the whole theme.
Primary#5C5446--color-primary
Base light#FFF8F0--color-base-light
Base dark#1C1C1C--color-base-dark
Accent light#F1F5F9--color-accent-light
Accent dark#1E293B--color-accent-dark
Typography
Heading, body and italic accent fonts, plus text sizes.
Aa
Instrument SansHeadings
Aa
SatoshiBody text
Aa
Instrument SerifItalic accents
Buttons
Button style, colours and hover states.
PrimaryOutline
Header and Footer
Logo, navigation menu, footer links and social icons.
Forms
Field, label and submit button styling for every HubSpot form.
Page Templates
Eight templates, ready to edit.
Every page a real estate site needs. Rearrange or replace any section with drag and drop.
01
02
Marketing
About
Company story, awards, team and key features.
03
Marketing
Contact
Contact form, details and client testimonial.
04
Homes
Project Listing
A grid of home cards that link to the detail page.
05
Homes
Project Detail
Gallery, details, features, amenities and floor plans.
06
Campaign
Landing Page
A focused page with a simple header for campaigns.
07
Blog
Blog Listing
Blog index with pagination.
08
Blog
Blog Post
Single article layout with related posts.
System Pages
Styled to match.
These 11 pages use HubSpot's built-in logic with Haven's styling. Edit their text in Design Manager.
404
Error page shown when a page is not found.
500
Error page shown when something breaks on the server.
Search Results
Results page for the site search.
Password Prompt
Gate for password-protected pages.
Membership Login
Sign-in page for members.
Membership Register
Sign-up page for new members.
Reset Password Request
Ask for a password reset email.
Reset Password
Set a new password.
Subscription Preferences
Let people choose which emails they get.
Subscriptions Confirmation
Confirms a changed subscription.
Backup Unsubscribe
Fallback unsubscribe page.
Modules
All 35 modules.
Add them from the Modules panel in the page editor, then edit the content in the left sidebar. Use the filters to browse by group.
Heroes
Hero
Full-width hero with heading, text and call to action.
Heroes
Hero Video
Hero with a video that opens in a popup.
Heroes
Detail Page Hero
Header banner for project and detail pages.
Navigation
Website Header
Page title banner for inner pages.
Navigation
Landing Page Header
Simplified header for landing pages.
Navigation
Footer
Full footer with menus, contact details and social links.
Navigation
Footer No Navigation
Minimal footer for landing pages.
Homes
Featured Homes
Highlight selected homes with image and details.
Homes
Home Listing
Grid of home cards linked to the detail page.
Homes
Homes Slider
Slider of homes with navigation controls.
Homes
Project Details
Key facts about a project at a glance.
Homes
Property Details Tabs
Tabbed details for a single property.
Homes
Property Features and Amenities
List of features and amenities with icons.
Homes
Floor Plan
Floor plan images that open in a zoomable viewer.
Content
Intro Text
Eyebrow, heading and paragraph introduction.
Content
Media With Text
Image or video beside a text block.
Content
Video With Text
Video section with supporting copy.
Content
Video Block
Stand-alone video with a popup player.
Content
Key Features
Grid of highlights with icon, title and text.
Content
Approach List
Hover-driven list that explains your approach.
Content
Process
Numbered steps that show how you work.
Content
Accordion
Expandable question and answer list.
Content
Cards
Flexible card grid with image, title and text.
Content
Pricing Card
Pricing option with features and a button.
Content
Counter
Animated number counters for key stats.
Content
Button
Stand-alone button with style options.
Media
Image Gallery
Responsive image grid with lightbox.
Media
Image Slider
Continuous scrolling image slider.
Social Proof
Our Awards
Awards and recognition with logos.
Social Proof
Review Section
Client reviews with platform logo and star rating.
Social Proof
Testimonial Slider
Slider of client testimonials.
Social Proof
Team
Team members with photo, name and role.
Forms and Blog
Contact Form
Section with a HubSpot form and contact details.
Forms and Blog
Contact Form Testimonial
Form paired with a testimonial slider.
Forms and Blog
Blog Listing
Grid of blog posts with pagination.
Demo Content
Make it yours.
The demo uses a fictional brand with sample homes, text and images. Replace all of it with your own before going live.
- Demo images are original and are not included for commercial reuse. Upload your own to the HubSpot File Manager.
- Home cards in the listing module use sample data and blank links. Add your own links to each card.
- The demo blog has 9 sample posts so you can see pagination. Edit or delete them from Content, then Blog.
Sources and Credits
Open-source credits.
Haven uses these libraries and fonts. [CONFIRM THIS LIST AGAINST THE FINAL THEME BEFORE SUBMISSION]
SwiperMagnific PopupFancyboxPanzoomInstrument SansInstrument SerifSatoshi
FAQ
Answers to your frequently asked questions.
Cannot find what you need? Reach out below.
How do I change the colours and fonts?
Open the theme settings in the page editor and update the Colours and Typography groups. Changes apply to every page.
How do I add or edit a home?
Edit the home listing module on the Project Listing page. Each card has its own image, title, details and link.
How do I connect my own form?
In the contact modules, choose a form from your HubSpot account in the form field. It picks up the theme's form styling.
Can I change the header and footer?
Yes. Edit them from the theme settings and the global modules, and choose the menus you want to show.
Why are my demo images missing?
Demo images are for preview only. Upload your own images in the File Manager and select them in each module.
Support
Need a hand?
Check this documentation and the FAQ first, then get in touch.
Email[SUPPORT EMAIL]
Hours and response time[SUPPORT HOURS AND RESPONSE TIME]
Before you writeInclude your page URL and a screenshot.