How to Build Custom Coded Templates in Hubspot

Creating custom coded templates in Hubspot gives developers full control over layout, styling, and functionality while keeping content easy to manage for marketers. This guide walks through how to build, configure, and manage these templates in the design manager.

What a Hubspot Custom Coded Template Is

A custom coded template is a flexible layout file that you build using HTML and HubL tags. It can power pages, blog posts, and system content.

These templates are not edited in the visual layout editor. Instead, you work directly with the code editor in the design manager to define structure, modules, and regions.

Uses HTML, HubL, CSS, and JavaScript
Can include drag-and-drop areas and modules
Supports default content and editable regions

Accessing the Hubspot Design Manager

All custom coded template work begins inside the design manager.

Log in to your Hubspot account.
Navigate to Marketing > Files and Templates > Design Tools.
Open or create the folder where you want to store the new template.

The design manager includes the file tree, code editor, and inspector, which you will use to configure your template.

Create a New Custom Coded Template in Hubspot

To build a fresh template, start from the design manager file system.

In the left sidebar, hover over the folder where you want the template.
Click the File menu and choose New file.
In the dialog, select Template as the file type.
Choose Custom coded for the template type.
Select the template content type, such as Page or Blog.
Name the file and confirm the folder location.
Click Create to open it in the editor.

The design manager generates a starter layout with HTML and HubL skeleton code appropriate for the selected content type.

Understand the Hubspot Template Code Structure

Each template uses HTML for layout and HubL tags for editable areas and content modules. Common elements include:

DOCTYPE and <html> structure for the document.
<head> with standard asset declarations.
<body> where you define sections and modules.
HubL tags for modules, groups, and drag-and-drop areas.

You can add custom classes, IDs, and data attributes to match your front-end framework or design system.

Using Hubspot Drag-and-Drop Areas

Drag-and-drop areas in custom coded templates let content editors rearrange modules without touching the code.

To define a drag-and-drop area with HubL:

Locate the part of the template where you want flexible content.
Wrap the section in a {% dnd_area %} block.
Add rows and modules within that block using {% dnd_section %} and {% dnd_module %}.
Save the template to enable the drag-and-drop interface in the page editor.

These areas are ideal for body content while keeping header and footer sections more fixed.

Adding and Configuring Hubspot Modules

Modules are the building blocks of your coded template. You can add both default and custom modules directly in the layout.

Insert Standard Hubspot Modules

Use HubL module tags to render built-in modules like rich text, images, and forms.

Place module tags inside your drag-and-drop areas or static sections.
Assign logical names and labels for better editor usability.
Configure default values that match your overall design.

Use Custom Hubspot Modules

If you have custom modules, you can reference them from your coded template:

Create or open the custom module in the design manager.
Note the module path in the file tree.
Insert the module using the appropriate HubL tag and module path.
Expose only the fields marketers need to edit.

Combining custom coded templates with custom modules gives full control over markup while keeping content flexible.

Set Up Hubspot Template Settings and Usage

Once the layout, areas, and modules are defined, set how the template behaves across the account.

Configure Template Settings

In the design manager inspector, you can:

Set the template label shown to users.
Specify the content type, such as page, landing page, or blog.
Define the preview URL and browser tab title defaults.
Manage availability in different tools or domains.

Correct settings ensure the template appears in the right creation dialogs for your team.

Use the Template in Hubspot Content Tools

After publishing your changes, the template is available when you create new content.

Go to Marketing > Website > Website Pages or Landing Pages.
Click Create and choose the relevant content type.
Select your custom coded template from the template picker.
Build the page using the modules and drag-and-drop areas you exposed.

Editors can fill in text, swap images, and adjust layout within the guardrails you designed.

Best Practices for Hubspot Custom Coded Templates

To keep your system scalable and easy to maintain, follow these practices.

Keep Layout and Content Separate

Use templates for structure and layout only.
Avoid hard-coding copy, except for system labels or navigation.
Rely on modules and fields for anything marketers must update.

Use Global Hubspot Content Where Appropriate

For header, footer, and repeated UI patterns, use global content or global modules instead of duplicating code in every template.

Create a global group for navigation and footer regions.
Insert those global groups into multiple templates.
Update branding and navigation once in the global content editor.

Organize Files in the Design Manager

Use a clear folder structure for templates, modules, and partials.
Name files consistently, such as page-main, blog-post, or system-error.
Avoid editing cloned copies when a shared partial would be better.

Learn More About Hubspot Design Tools

The official documentation provides detailed reference examples, HubL syntax, and advanced configuration tips for developers building robust systems.

Review the full guide on the Hubspot Knowledge Base: Build a custom coded template.
For strategic consulting on scalable implementation, you can visit Consultevo for additional resources and services.

By combining thoughtful structure, reusable modules, and the flexibility of the design manager, you can deliver powerful, maintainable templates that help your team get the most from Hubspot.

Need Help With Hubspot?

If you want expert help building, automating, or scaling your Hubspot , work with ConsultEvo, a team who has a decade of Hubspot experience.

Scale Hubspot

“`