What are HubSpot modules and how to create one?

[Dimaeiya323]

Web services are always evolving to facilitate faster development and simpler design. Modular development is undoubtedly one of the keys, as it allows a program or website to be divided into small modules in order to make it more readable, manageable and easy to maintain.

HubSpot , along with other platforms such as WordPress, is one of the most popular and useful platforms when it comes to creating modular websites. Its intuitive interface, wide variety of modules and almost infinite possibilities make it the ideal tool for any purpose, including advanced and/or custom developments.

The goal of this guide is to give you an overview of how to create a module in HubSpot without setting out any fixed steps, as the methodology varies with each one. If you are new to this platform, it will help you get an idea of ​​how this powerful template engine works and start creating custom blocks that will be quite useful to you.


Do you like what you're reading? Subscribe to the blog!
Email *
your email
I have read and accept the Privacy and Cookies Policy .
What are modules and what are they used for?
Modules are small, reusable components that are common in website development. Each module contains a set of generic elements, such as images, text, buttons, etc., that are combined to build a page. HubSpot offers a number of templates and tools that make it easy to create reusable modules, as well as advanced development options.

The most common example to explain these components is to think of them cio and cto email lists as Lego pieces. If you give a handful of Lego blocks to a group of people, each one will build something different: a car, a plane, a house, etc.

The building blocks for each of these constructs are the same, what changes is the way they are combined, leading to different results. Understanding this is key to understanding how HubSpot's CMS (Content Management System) works and its potential.

Minimum knowledge to create HubSpot modules
To follow this guide you will need to have basic knowledge of HubSpot's Design Tools along with HubL (HS's own template engine). For more information about this language you can consult the official documentation .

On the other hand, you will also need to have a solid foundation in HTML, CSS and some basic programming knowledge (JavaScript, for example) to complete the structure and design of the module. I will assume that you already have this basic knowledge. For CSS we will be using the BEM convention to name the classes.



What are the components of a HubSpot module?
As explained in the official documentation we can see that a module in HubSpot is mainly composed of two parts :

A pre-created user interface through a list of fields (we will see this later) that will allow users to interact with the different options of the module.
User Interface

An HTML + HubL template snippet (with associated CSS and JavaScript) that defines how the module content will be displayed.
Module composition