Page templates define the structure and layout for different types of content pages. Each template is designed for a specific purpose and includes drag-and-drop areas for easy content editing.
Available Page Templates
Home Template
File: templates/home.html
Purpose: Homepage template with hero banner and multiple content sections.
Template Annotations
<!--
templateType: page
isAvailableForNewContent: true
label: Home
screenshotPath: ../images/template-previews/home.png
-->
Structure
{% extends "./layouts/base.html" %}
{% block body %}
{% dnd_area "dnd_area"
label="Main section",
class="body-container body-container--home"
%}
{# Hero banner #}
{% include_dnd_partial path="../sections/hero-banner.html" %}
{# Two column image right #}
{% include_dnd_partial path="../sections/row-content-img-right.html" %}
{# Two column image left #}
{% include_dnd_partial path="../sections/row-content-img-left.html" %}
{# Call to action #}
{% include_dnd_partial path="../sections/call-to-action.html" %}
{# Three column image with text #}
{% include_dnd_partial path="../sections/multi-column-content.html" %}
{% end_dnd_area %}
{% endblock body %}
Included Sections
Hero Banner - Large banner with headline and CTA
Two Column Content - Content with image (left or right)
Call to Action - Centered CTA section
Multi-Column Content - Three column layout with images and text
About Template
File: templates/about.html
Purpose: About page with two-column layout featuring an image and rich text.
Template Annotations
<!--
templateType: page
isAvailableForNewContent: true
label: About
screenshotPath: ../images/template-previews/about.png
-->
Structure
{% extends "./layouts/base.html" %}
{% block body %}
{% dnd_area "dnd_area"
label="Main section",
class="body-container body-container--about"
%}
{# Two column image left #}
{% dnd_section
vertical_alignment="TOP"
%}
{% dnd_module
path="@hubspot/linked_image",
img={
"alt": "Worker pouring Watermelon Juice for the other coworkers.",
"loading": "disabled",
"max_height": 450,
"max_width": 800,
"size_type": "auto_custom_max",
"src": "https://resources.freshjuice.dev/images/800/pour-watermelon-juice.jpg"
},
offset=0,
width=6
%}
{% end_dnd_module %}
{% dnd_module
path="@hubspot/rich_text",
html="<h1>About FreshJuice</h1><p>We are a free and open-source hubspot multi-purpose theme...</p>"
offset=6,
width=6
%}
{% end_dnd_module %}
{% end_dnd_section %}
{% end_dnd_area %}
{% endblock body %}
Features
Two-column layout with image on the left
Rich text content on the right
Fully editable in drag-and-drop editor
Default content with placeholder image
File: templates/contact.html
Purpose: Simple contact page template with cards section.
Template Annotations
<!--
templateType: page
isAvailableForNewContent: true
label: Contact
screenshotPath: ../images/template-previews/contact.png
-->
Structure
{% extends "./layouts/base.html" %}
{% block body %}
{% dnd_area "dnd_area"
label="Main section",
class="body-container body-container--contact"
%}
{# Cards #}
{% include_dnd_partial path="../sections/cards.html" %}
{% end_dnd_area %}
{% endblock body %}
Features
Minimal structure for flexibility
Includes cards section by default
Content editors can add forms and additional modules
Pricing Template
File: templates/pricing.html
Purpose: Pricing page with pricing table section.
Template Annotations
<!--
templateType: page
isAvailableForNewContent: true
label: Pricing
screenshotPath: ../images/template-previews/pricing.png
-->
Structure
{% extends "./layouts/base.html" %}
{% block body %}
{% dnd_area "dnd_area"
label="Main section",
class="body-container body-container--pricing"
%}
{# Pricing #}
{% include_dnd_partial path="../sections/pricing.html" %}
{% end_dnd_area %}
{% endblock body %}
Features
Pre-configured pricing section
Drag-and-drop area for adding more content
Fully customizable pricing table module
Landing Page Template
File: templates/landing-page.html
Purpose: Conversion-focused landing page with simplified header and footer.
Template Annotations
<!--
templateType: page
isAvailableForNewContent: true
label: Landing page
screenshotPath: ../images/template-previews/landing-page.png
-->
Structure
{% extends "./layouts/base.html" %}
{% block header %}
{% global_partial path="./partials/header-no-navigation.html" %}
{% endblock header %}
{% block body %}
{% dnd_area "dnd_area"
label="Main section",
class="body-container body-container--landing-page"
%}
{# Hero banner #}
{% include_dnd_partial path="../sections/hero-banner.html" %}
{# Three column image with text #}
{% include_dnd_partial
path="../sections/multi-column-content.html",
context={
"background_color": "#FFFFFF"
}
%}
{% end_dnd_area %}
{% endblock body %}
{% block footer %}
{% global_partial path="./partials/footer-for-lp.html" %}
{% endblock footer %}
Features
Simplified Header - No navigation menu to reduce distractions
Simplified Footer - Minimal footer for better conversion
Hero Banner - Large, attention-grabbing hero section
Multi-Column Content - Showcase benefits or features
Context Passing - Demonstrates passing context to partials
The landing page template overrides the default header and footer blocks to use simplified versions, reducing distractions and improving conversion rates.
HubDB Template
File: templates/hubdb.html
Purpose: Dynamic page template for displaying HubDB table data.
Template Annotations
<!--
templateType: page
isAvailableForNewContent: false
label: HubDB
screenshotPath: ../images/template-previews/hubdb.png
-->
This template requires CMS Hub and should not be used in accounts without HubDB access. If you’re creating a marketplace asset, this template should be removed as HubDB templates are not accepted in the marketplace.
Testing Configuration
{# Testing config #}
{% set testing = true %} {# Set to false for production #}
{% set testing_table_id = null %} {# Set to HubDB table id (integer) #}
{% set testing_row_id = null %} {# Set to a HubDB table row id (integer) #}
{% set testing_page_level = 0 %} {# 0 for root, 1 for dynamic page #}
Structure
{% extends "./layouts/base.html" %}
{# Testing/production logic #}
{% if testing %}
{% set table_id = testing_table_id %}
{% set row = hubdb_table_row( table_id, testing_row_id ) %}
{% set page_level = testing_page_level %}
{% else %}
{% set table_id = dynamic_page_hubdb_table_id %}
{% set row = dynamic_page_hubdb_row %}
{% set page_level = dynamic_page_route_level %}
{% endif %}
{% set rows = hubdb_table_rows( table_id ) %}
{% block body %}
<div class="body-container body-container--hubdb">
<section class="content-wrapper content-wrapper--vertical-spacing">
{% if table_id %}
{# Root level - display all rows #}
{% if page_level == 0 and rows|length > 0 %}
<header>
<h1>
{% module "page_title" path="@hubspot/text",
label="Page title",
value="Root Page Title"
%}
</h1>
</header>
<ul>
{% for row in rows %}
<li>
<a href="{{ request.path }}/{{ row.hs_path }}">{{ row.name }}</a>
</li>
{% endfor %}
</ul>
{# Detail level - display single row #}
{% elif page_level == 1 and row %}
<header>
<h1>{{ row.name }}</h1>
</header>
<table>
<thead>
<tr>
<th>Label</th>
<th>Name</th>
<th>Value</th>
</tr>
</thead>
<tbody>
{% for col in hubdb_table( table_id ).columns %}
<tr>
<th>{{ col.label }}</th>
<td><code>{{ col.name }}</code></td>
<td>{{ row[ col.name ] }}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endif %}
{% else %}
{# Error handling for missing table selection #}
{% endif %}
</section>
</div>
{% endblock %}
Features
Testing Mode - Preview template with specific table/row IDs
Two-Level Display - Root level (list all rows) and detail level (single row)
Dynamic Routing - Automatically creates URLs based on HubDB data
Error Handling - Shows helpful message if no table is selected
Usage
Development: Set testing = true and configure test IDs
Production: Set testing = false and isAvailableForNewContent = true
Create Page: Select a HubDB table when creating a new page
Common Patterns
Extending the Base Layout
All page templates extend the base layout:
{% extends "./layouts/base.html" %}
Defining Content Blocks
Override the body block to add page content:
{% block body %}
<!-- Your content here -->
{% endblock body %}
Creating Drag-and-Drop Areas
Use dnd_area for editable content regions:
{% dnd_area "dnd_area"
label="Main section",
class="body-container body-container--custom"
%}
<!-- DnD content -->
{% end_dnd_area %}
Including Sections
Include reusable sections as DnD partials:
{% include_dnd_partial path="../sections/hero-banner.html" %}
Passing Context to Partials
Pass custom context variables:
{% include_dnd_partial
path="../sections/multi-column-content.html",
context={
"background_color": "#FFFFFF"
}
%}
Template Class Naming
Each template includes a unique body container class:
.body-container--home
.body-container--about
.body-container--contact
.body-container--pricing
.body-container--landing-page
.body-container--hubdb
These classes allow for template-specific styling in your CSS.
Next Steps
Blog Templates Learn about blog listing and post templates
System Templates Explore error pages and system templates
Sections Understand the sections used in templates
Modules Learn about modules and components