Themes play an important role in how websites are built and managed in HubSpot Content Hub. A theme defines the overall design system of a website, including templates, styles, modules, and layout structures.
Themes are organized using a structured folder system inside the HubSpot design manager, which allows developers to manage files efficiently while building scalable websites.
Understanding how HubSpot Content Hub theme files and folder structures work helps developers and teams maintain organized, reusable design systems.
A theme n HubSpot Content Hub is a collection of files that define how a website looks and behaves.
A typical theme may include:
Themes help maintain consistent design across all pages of the website.
Themes are managed inside the HubSpot Design Manager.
To access the design manager:
Content → Design Manager
This tool allows developers to view and edit theme files and other design assets.
Themes in HubSpot Content Hub are organized into folders that contain different types of files.
A typical theme structure may look like this:
theme-name/ │ ├── templates/ │ ├── homepage.html │ ├── landing-page.html │ └── blog-post.html │ ├── modules/ │ ├── hero-banner.module │ ├── feature-grid.module │ └── testimonial-slider.module │ ├── css/ │ └── theme.css │ ├── js/ │ └── theme.js │ ├── images/ │ └── theme-assets │ └── theme.json
Each folder serves a specific purpose within the theme.
The templates folder contains page templates used to build different types of pages.
Examples include:
These templates define the layout structure of pages.
The modules folder contains reusable modules used throughout the website.
Modules may include components such as:
Modules allow editors to easily build pages without needing to modify templates.
Themes usually include CSS and JavaScript files that control styling and interactive behavior.
These files help define:
Developers can update these files to adjust the design of the website.
The theme.json file controls the configuration of the theme.
This file may define:
Theme settings allow editors to adjust design elements without modifying code.
Using a structured theme system helps developers and teams maintain organized projects.
Benefits include:
Themes provide a foundation that supports long-term website management.
HubSpot Content Hub themes organize templates, modules, styles, and scripts into a structured folder system. This structure allows developers to build scalable websites while giving content editors the flexibility to create and manage pages easily.