custom-modules

What problem does it solve?

This Skill streamlines the creation and management of custom modules within the HubSpot CMS, enabling developers to build reusable, configurable components for web pages and emails efficiently.

Core Features & Use Cases

• Module Structure: Defines the standard file structure for HubSpot custom modules (.module directory with module.html, meta.json, fields.json, module.css, module.js).
• Field Definitions: Guides the creation of fields.json for defining editable content, styling, and advanced options for content editors. Supports various field types like text, rich text, image, color, group, and repeaters.
• Template Development: Demonstrates how to use HubL in module.html to render module content and access field values.
• Styling & Scripting: Explains how to scope CSS with module.css and add interactive JavaScript with module.js.
• Drag-and-Drop: Details the implementation of drag-and-drop areas and sections within page templates for flexible content layout.
• Use Case: A marketing team needs a new "Team Member Card" module for their blog. This Skill helps define the module's fields (name, photo, bio, social links), structure the HTML/CSS/JS, and integrate it into a page template using drag-and-drop functionality.

Quick Start

Create a new HubSpot custom module named 'hero-banner' with a headline, description, and background image field.