Find answers and general information quickly about the design manager tool in HubSpot. This resource also includes links to more resources for designers working on the CMS.
To learn more about designing on HubSpot, check out the HubSpot Academy's Growth Driven Design certification and HubSpot's CMS documentation.
The Design Certification is a free certification that includes video training and a design practicum.
HubSpot's CMS documentation includes:
The best resource for interacting with the HubSpot designer community is the HubSpot design forum. This forum is monitored by HubSpot designers and HubSpot users with design expertise.
For questions regarding HubSpot API development, check out the Developers forum.
As of May 27, 2020, FTP was sunset and replaced by the CMS CLI. Learn more about this announcement.
While global modules can be converted back to a local module, at this time, global groups cannot. You can clone global groups and add them to that template.
The HubSpot layout editor uses a 12 column grid system based on Bootstrap 2.x to allow template designers to quickly build fully responsive webpages within the HubSpot content platform.
All HubSpot drag and drop layouts automatically include layout.css to make modules responsive. If you want to use a different or custom responsive grid such as Bootstrap 3, you would need to either override the CSS in layout.css or use coded templates, where layout.css is not attached.
Blog content modules allow you edit the markup of the post and the listing layout to control where the various elements of a post item render.
All template layouts, coded files, and pages have a revision history that allows you to roll back to any version of a template or piece of content. For templates or coded files, click Actions > View Revisions to access the revision history.
The v1 module framework referenced module fields using . The v2 framework references module fields using .
However, using in the v2 framework will continue to work as expected. It’s not necessary to update your custom modules to reference "module."
Rather than using "get_public_template_url" to access JavaScript and CSS files, these files can now be attached directly to the module sidebar editor in the Linked files section. CSS and JS files included here will automatically be loaded on pages using the module.
HTML and HubL modules have been removed. These modules provided a quick way for developers to add snippets of HTML and HubL to a template. However, they can make templates difficult to understand and edit. To make templates more predictable and maintainable, these modules were removed in favor of keeping all code inside the context of custom modules.
If you need to add HTML at the page level on a website, the HTML module can be downloaded in the HubSpot Marketplace.
If you’re using a third party script, you will link the script file to the Linked files section in the module editor. Then you can trigger the plugin in the JS section of the code editor. If you need to pass parameters to the plugin, you can use data attributes in the HTML + HubL section of the editor to store these values.
If you’re using a custom module in an email, the CSS and JS sections will not appear in the editor because stylesheets and JavaScript aren’t supported in most email clients. For email modules, you can still include necessary styling in <style> tags.
If you’re using a module on your pages or blog posts, the JS and CSS sections will appear as expected.
Modules in v2 of the design manager are wrapped in <div> tags, but modules in the old design manager were wrapped in <span> tags. This change will only impact your module if you are referencing the module span in a stylesheet. For example, the following declaration will not apply in the new design manager:
span #hs_cos_wrapper_widget_5038393204 {
Color: blue;
} You can replace the <span> tag with a <div> tag. However, it’s not recommended to rely on default HubSpot wrappers to write your CSS. It’s better to use custom CSS classes, such as “my-custom-module”, instead.
Learn more about how to identify and resolve a nested module error. For nested modules used on a number of templates, it’s best to clone the module first to prevent the loss of page-level content. Then, resolve the errors in the cloned module, and use that clone in your templates moving forward.
Instead of using in your custom module to add a global group, you can add a menu field to your module or edit the modules global content.
Yes, you can edit all legacy modules in the module editor. You'll see validation warnings and suggestions for any code that's not supported in the v2 module framework, but you'll be able to continue editing and using these modules in HubSpot.
While you can keep all your existing custom modules, you won't be able to create new modules using the old framework. If you clone a legacy modules, the cloned module will be created in the new module framework.