In this custom HubSpot development tutorial, I will demonstrate how to create a custom module in HubSpot using HTML and HubL code. I will be building a product attributes list inspired by one found on Amazon product listings.
A good way to think of how HubSpot custom modules work is by comparing it to a Lego set. When building a Lego set, you are given different types of blocks that you can configure into whatever you like. In HubSpot, you can choose between different module field types that can be configured into different things using HTML, CSS, Javascript, and HubL. HubL is the server-side templating language that gives you the ability to write programming logic.
- Free Guide – HubSpot HubL Printable Reference
- HubSpot HubL Quick Reference
- CodePen code example used in the video
- HubSpot module code boilerplate
In this Custom HubSpot Development Tutorial, You’ll Learn:
- How to create a HubSpot custom module from scratch
- How to use the design tools
- Add and edit content and style fields to a HubSpot module
