Reusable modules are one of the most useful features of a modern HubSpot website. They allow developers to create flexible components that content editors can reuse across multiple pages.
HubSpot Start Pro Theme provides a foundation for creating and customizing these types of components.
A module is a reusable website component. It can contain fields that allow content editors to control text, images, buttons, colors, layouts, and other settings.
For example, a hero module might provide fields for a heading, description, image, CTA, and background.
A good module should provide enough customization without becoming unnecessarily complicated.
Useful settings may include:
These settings allow the same module to be used for different content requirements.
Field names should be easy for content editors to understand.
Instead of technical names, use labels such as:
This makes the editing experience easier for marketing teams.
Modules should be designed with responsive behavior in mind.
A module may need different spacing, font sizes, or layouts on mobile.
Developers should ensure that responsive CSS does not break the desktop design and that mobile settings remain easy to manage.
When multiple modules appear on the same page, CSS conflicts can create unexpected results.
Using module-specific class names helps prevent styles from affecting unrelated components.
This is particularly important when building reusable HubSpot modules.
Accessibility should be considered during module development.
Images should support appropriate alt text, buttons should have clear labels, and interactive elements should be usable with keyboards where necessary.
A module should be tested in multiple situations before being reused across a website.
Test different:
This reduces the possibility of layout problems later.
Customizable modules are a key part of an efficient HubSpot website. Start Pro Theme provides a strong foundation for developing reusable components, while thoughtful module development can make the website easier to manage.
Flexible fields, clear labels, responsive layouts, scoped CSS, accessibility, and thorough testing can help create modules that work reliably across different pages.