What are Hubspot Themes and Modules and how to make one

[While you have the option to write modules in your local environment, we will only cover creating modules via the Hubspot Design Manager to try and keep it simple ]

Creating the files:

1.Once Logged into Hubspot go to Content > Design Manager.

2.On the top of the menu click on the File drop down and then select “New File”

3.Select the “Module” when provided the option.

4.Click “Next” To proceed.

5.On this menu you will be able to update options that define the name and the type of module you would like to create, this menu also defines how and where the content creator would be able to view and add the module when designing and updating content.

6.Once the above steps have been completed, we will be provided with a blank canvas for the HTML + HubL, CSS and JS files for the modules.

7.The window on the right provides us with the ability to add and create fields that we would like the content creator to use to be able to add and update content.

8.This window also provides us an easy way for developers to provide the content creator to add and update the style of the content via the style fields.

Now that we have the required files let us write some code to create a simple module that creates a simple text card to display content from the content creator with a button that can be clicked to enable some user interaction.

1. In the module.html file create a simple HTML card with a h3, p and button element with some placeholder text to understand the look and feel of the button, something like this will suffice for now:

			<div class="module-card-container">
				<div class="module-card-content-container">
					<h3>Placeholder Header</h3>
					<p>Placeholder Body</p>
					<button>Placeholder Button</button>
				</div>
			</div>
		

2. In the module.css file add some styles that add some basic styles for a simple card, example code below:

			.module-card-container{
				max-width:300px;
				max-height:300px;
			}
			.module-card-content-container{
				display:flex;
				flex-direction:column;
				border:1px solid #000;
				margin:10px 0px;
				padding:10px 5px;
			}
			.module-card-content-container h3,
			.module-card-content-container p{
				color:#000;
				width:100%;
				height:100%;
			}
			.module-card-content-container p{
				overflow-y:scroll;
				height:150px;
			}
			.module-card-content-container button{
				width:150px;
				margin:auto;
			}
		

3. If you are following along, you can render the card by clicking the “Preview” button on the top right of your module development screen, your card should look similar to the image.

4.Now that we have created a simple template, let's add 3 fields to enable the content creator to edit and update content into the card. Let's create 3 text fields to provide the content creator the ability to update and edit content on the card and Name and update the required fields appropriately for the header, body and button. Once you have created these fields the fields section should look something like the image below

5.Once we have these fields in Hubspot we will be able to use HubL to directly pull the required content from the Hubspot editor into the HTML, by using the required HubL syntax to like “{{module.field_name}}”, depending on what you had set your field name you would add the required to your html to create your Template.

The updated HTML code with the HubL elements will look similar to the code below.

			<div class="module-card-container">
				<div class="module-card-content-container">
					<h3> {{module.header_text_field}} </h3>
					<p> {{module.body_text_field}} </p>
					<button> {{module.button_text_field}} </button>
				</div>
			</div>
		

6.Once that is done you will be able to see the editable fields on the side bar of the preview tab, any changes to the text here will directly update the card that was

7. Now that we have a skeleton, let's look at how to implement a bit more HubL to provide the content creator with the ability to update the presets and toggle CSS class on the fly with simple settings.

8. Lets add duplicate the “module-card-content-container” and create 2 new variations “module-card-content-container-style-one” and “module-card-content-container-style-two” , this will enable us to conditionally apply the required styles to the module as we see fit. If you are Following along your CSS should look like this..

		.module-card-container{
			max-width:300px;
			max-height:300px;
			transition: all 1s ease-in-out;
		}
		.module-card-content-container-style-one{
			display:flex;
			flex-direction:column;
			border:1px solid #000;
			margin:10px 0px;
			padding:10px 5px;
		}
		.module-card-content-container-style-one h3,
		.module-card-content-container-style-one p{
			color:#000;
			width:100%;
			height:100%;
		}
		.module-card-content-container-style-one p{
			overflow-y:scroll;
			height:150px;
		}
		.module-card-content-container-style-one button{
			width:150px;
			margin:auto;
			cursor:pointer;
		}

		.module-card-content-container-style-two {
			display:flex;
			background-color:#000;
			box-shadow: 10px 5px 5px #808080;
			flex-direction:column;
			border:1px solid #fff;
			margin:10px 0px;
			padding:10px 5px;
		}
		.module-card-content-container-style-two h3,
		.module-card-content-container-style-two p{
			color:#fff;
			width:100%;
			height:100%;
		}
		.module-card-content-container-style-two p{
			overflow-y:scroll;
			height:150px;
			scrollbar-color: white black;
			scrollbar-width: thin;
		}

		.module-card-content-container-style-two button {
			box-shadow: 4px 2px 2px #fff;
			width:150px;
			margin:auto;
			cursor:pointer;
		}
		

9.Let's create an additional field in the fields section under styles, to control overarching card style and add additional style fields to update background colour and text colours and button style.

10. Let's add the required additional HubL to dynamically update our card with the new class names defined in the CSS and Hubspot Style Fields section display the changes for the card when the content creator updates the same.

			<div class="module-card-container">
				<div class="{{module.card_style.CardstyleChoice}}">
					<h3> {{module.header_text_field}} </h3>
					<p> {{module.body_text_field}} </p>
					<button> {{module.button_text_field}} </button>
				</div>
			</div>
		

11. Once your code has been updated you will be able to see the additional fields in the styles menu on the preview tab and will now be able to update the styles of the card.

You have now created a simple card module where a content creator can update the content and the styles, there are a plethora of complex tasks that can be achieved with the power of themes and modules and the fundamentals have been discussed here.

I would urge you to build and explore the Hubspot theme space to find better and more elements to add and create based on your needs/wants, as with these fundamentals and with the resources available online the possibilities are endless.