Templates
47 templates, each opening with the same layout and settings as the demo site.
Choose a template when you create a page or set up a blog. Website page templates are fully drag-and-drop: every section can be edited, moved, cloned or removed. Images and videos are left empty for your own.
Note
Changing a template later does not change pages you already made with it. Each page keeps its own copy of the sections, so edits on one page never affect another.
Homepages
Homepage 1
Website page ·home.htmlThe full homepage: product hero, customer logos, feature spotlight, integrations, solutions, updates, how it works, industries, reviews, features, questions and a call to action.
Homepage 2
Website page ·mobile-app.htmlMobile app landing page: a hero with the app on a tablet and phone, the tools it works with, features, the app in dark and light mode, an analytics chart, integrations, customer quotes and a call to action. Every section is a drag-and-drop module, so it can be edited, moved or removed.
Homepage 3
Website page ·landing-page.htmlA focused campaign page: hero, proof, product video, a customer story and one call to action.
Homepage 4
Website page ·landing-page-background.htmlA campaign landing page with a full-width background-image hero, proof, product video, customer stories and one call to action. Images and video files are left empty for your own.
Homepage 5
Website page ·landing-page-slider.htmlA campaign landing page that opens with a hero slider, followed by proof, product video, features, integrations and one call to action. Images and video files are left empty for your own.
Company and marketing
About page
Website page ·about.htmlCompany story: hero, numbers, the story timeline, how you work, a customer story and a closing call to action. Settings match the SaaSFlow demo About page; images are left empty for your own.
Blank page
Website page ·blank.htmlAn empty full-width drag-and-drop page: build it from sections and modules.
Book a demo page
Website page ·book-demo.htmlBook a demo: a hero with the demo request form (a HubSpot form chosen in the editor, or an image or video instead), trusted-by logos, what to expect, a product spotlight, who it's for, testimonials, FAQs and a call to action. Every section is a drag-and-drop module.
Careers page
Website page ·careers.htmlCareers: a hero with stat badges, the job board (search, filters and a detail panel for each job), why join, the hiring process and a call to action. Every section is a drag-and-drop module.
Case studies page
Website page ·case-studies.htmlCase studies: a hero with result badges, the case study library (industry tabs, search, sort, a featured story and story cards) and a call to action. Every section is a drag-and-drop module.
Case study detail page
Website page ·case-study.htmlOne case study: hero, results, story, sidebar, impact, takeaways and more stories (Case Study Detail module, optionally gated behind a HubSpot form), then a call to action. Link the Case Studies cards to pages made from this.
Charts page
Website page ·charts.htmlCharts: every chart type of the Data Chart module, each with its own sample data. Charts are drawn on the server as HTML, CSS and SVG, so the page loads no charting library. Every section is a drag-and-drop module.
Comparison page
Website page ·comparison.htmlProduct vs competitors: header with a callout card, a comparison table with competitor tabs, why choose us, and a call to action. The competitors are fictional samples: compare only with facts you can support.
Compliance page
Website page ·compliance.htmlSecurity and compliance page: hero with floating badges, the standards you support, platform controls, the compliance cycle, security features, frameworks, evidence, availability stats, FAQs and a call to action. Add your own illustration and screenshots in the Page Header and Feature Spotlight modules. Change the framework claims to match what your company actually holds.
Contact page
Website page ·contact.htmlContact: the contact form (a HubSpot form chosen in the editor) beside a short intro, other ways to reach the team, office locations and FAQs. Every section is a drag-and-drop module.
FAQ page
Website page ·faq.htmlFrequently asked questions: a hero with a search box that filters the questions, the categories beside the questions (Guide Table of Contents lists each group's heading), and a call to action. Add an FAQ Accordion module for each category in the right-hand column; their questions add up to one FAQPage for search engines.
Integrations page
Website page ·integrations.htmlIntegrations: page header with a search box that filters the directory, the integrations directory, how it works, a call to action and FAQs. Every section is a drag-and-drop module, so it can be edited, moved or removed.
Pricing page
Website page ·pricing.htmlPricing: page header with highlights, plans with a monthly/annual toggle, a plan comparison table, two-column FAQs and a closing call to action. Every section is a drag-and-drop module, so it can be edited, moved or removed.
Resource download page
Website page ·resource-download.htmlA gated resource (guide, ebook, report): the content on the left and a form card on the right that stays in view until the footer. The section keeps to the page width. Put everything in the left column so the form follows the whole page; choose the form in the CTA Banner's Content tab (Subscription form). On phones the form comes right after the hero.
Teams page
Website page ·teams.htmlTeams: hero, a tab per team (each with optional stat cards and image), the team's people, how teams work together, and a call to action. Every section is a drag-and-drop module.
Thank you page
Website page ·thank-you.htmlThank you: shown after a form is sent. A confirmation message, what happens next, helpful resources and a way to contact the team. Point a form's "Redirect to another page" at a page made from this template. Every section is a drag-and-drop module.
Video library page
Website page ·video-library.htmlVideo library: a hero with a search box that filters the videos, the categories beside the video rows (Guide Table of Contents lists each row's heading), and a call to action. Add a Video Tutorials module for each category in the right-hand column.
Product
AI scoring product page
Website page ·product-ai-scoring.htmlAI scoring product page: hero with an AI insight card, a score distribution chart, how scoring works, a comparison with manual scoring, a customer story and a call to action.
Analytics product page
Website page ·product-analytics.htmlAnalytics product page: hero with the product, customer logos, a live traffic chart, analytics features, session recordings, key numbers, a customer story, questions and a call to action.
Automation product page
Website page ·product-automation.htmlAutomation product page: header, how a workflow runs, what you can automate, a product video, workflow ideas, customer reviews and a call to action.
Integrations product page
Website page ·product-integrations.htmlIntegrations product page: an orbit of connected tools, how syncing works, sync features, key numbers, questions and a call to action.
Lead capture product page
Website page ·product-lead-capture.htmlLead capture product page: hero with a sign-up form, capture tools, a tour of each tool, key numbers, customer reviews, questions and a call to action.
Reporting product page
Website page ·product-reporting.htmlReporting product page: header, a revenue chart, report types, key numbers, customer reviews, questions and a call to action.
Solutions
Ecommerce solution page
Website page ·solution-ecommerce.htmlEcommerce solution page: hero, store logos, a revenue chart, store features (dark), how to grow, customer reviews, questions and a call to action.
Professional services solution page
Website page ·solution-professional-services.htmlProfessional services solution page: hero, key numbers, use cases, client reporting spotlight, onboarding steps, a client story, questions and a call to action.
SaaS and tech solution page
Website page ·solution-saas.htmlSaaS and tech solution page: hero with floating stat badges, who it is for, why teams choose SaaSFlow (dark), customer logos, how to get started, customer reviews, a contact form and a call to action.
Solutions page
Website page ·solutions.htmlSolutions: hero, solution cards, industry tabs, how it works, why choose us, customer stories and a call to action. Every section is a drag-and-drop module.
Blog
Blog templates are chosen in the blog settings, not when creating a page. See Blog, guides and case studies.
Blog listing
Blog listing ·blog-listing.htmlThe listing itself is a fixed module: HubSpot shows a blog listing page's own saved drag-and-drop content instead of the template's, which replaced the listing with HubSpot's default one. Its texts and options are edited in the blog listing page editor. The areas above and below are free drag-and-drop areas (empty by default) for banners, calls to action or any theme module.
Blog post
Blog post ·blog-post.htmlPost header, article, sidebar and after-article sections. The article text itself is written in the blog post editor.
Case study listing
Blog listing ·case-study-listing.htmlListing for a case study blog. The Case Studies module builds its cards from the blog's posts (title, summary, featured image, tags and each post's case_study module), its tabs from the blog's tags, and features the newest post. Use it with the Case study post template. The areas above and below are drag-and-drop areas for a hero, banners or a call to action.
Case study post
Blog post ·case-study-post.htmlOne case study in a case study blog. The post supplies the title, summary, featured image and story text (written in the blog editor); the case_study module adds results, the company card, quotes, resources, the impact chart, takeaways and optional gating. Keep the module name "case_study": the Case study listing reads each post's results and logo from it.
Guide page
Website page ·guide-page.htmlOne guide as a page: header, "On this page" beside the guide's sections (intro, before you start, steps, troubleshooting, FAQ), a call to action and related guides. The left column's Guide Table of Contents lists the headings in the right column, so add or reorder sections freely. For guides written as blog posts, use the Guide post template.
Guide post
Blog post ·guide-post.htmlOne guide as a blog post. The header reads the post (title, meta description, featured image, first tag, read time); "On this page" lists the H2 headings of the post text. Write the steps in the post editor as H2 sections; a quote shows as a tip box. The checklist, call to action and related guides are set per post in the post editor's module settings.
Guides listing
Blog listing ·guides-listing.htmlGuides as a blog: the same page as the Guides page, with the blog's posts in a grid in place of Popular guides (search, topic filter and pages included). The listing in the middle is a fixed module (edited in the blog listing page editor); the areas above and below are drag-and-drop areas.
Guides page
Website page ·guides.htmlGuides / help center landing page: hero with search, topic cards, popular guides from a blog, video tutorials beside "Need more help?", and a getting started banner. Every section is a drag-and-drop module. For the blog's own listing page, use the Guides listing template.
System
System templates are chosen in the system page settings. See System pages.
404 error page
Error page ·system/404.htmlShown when a page is not found. Edit it in Global content (System 404).
500 error page
Error page ·system/500.htmlShown when the server has an error. Edit it in Global content (System 500).
Backup unsubscribe
Email page ·system/backup-unsubscribe.htmlThe fallback unsubscribe page for marketing emails.
Password prompt
Password page ·system/password-prompt.htmlShown before a password-protected page.
Search results
Search results ·system/search-results.htmlThe site search results page used by the header search.
Subscription preferences
Email page ·system/subscription-preferences.htmlWhere contacts choose which emails they receive.
Subscriptions update confirmation
Email page ·system/subscriptions-confirmation.htmlShown after contacts update their email preferences.