HubSpot has a long list of built-in features that make developing your business’s website easier. From form modules to image carousels, you can build and design within the HubSpot CMS right out of the box.
However, HubSpot always knew that they would need to have a module available for more advanced users who want to include custom elements within their templates.
This is where their custom module comes into play. In its current form, the custom module allows HubSpot users to create sections within a web page template that are extremely customizable and organized through the use of HTML, CSS, JS, and most importantly Hubl.
Being able to incorporate the standard web technologies with HubSpot’s programming language gives developers the ability to create modules that can be useful for coders and non-coders alike.
For example, maybe you want to create a hero section for your homepage that will need to be updated frequently. You could easily build this section out using the standard tools within HubSpot.
However, what if your company has a separate team of content writers who don’t necessarily understand code and need to be able to completely change the entire look and feel of the hero section on a regular basis? Recoding this section over and over would be inefficient for all people involved.
When used correctly, HubSpot’s custom module feature allows you to solve this problem. You can create the custom module so that the content writers can completely edit the layout, the content, the colors, images, spacing and so much more without having to worry about the code.
This saves the content writers time because they can do everything they need to do within the page editor and it also saves developers time because they won’t have to go back and update code for these structural changes.
How To Get Started With HubSpot Custom Modules
What is required to start working with HubSpot’s custom modules? All you need to have is a moderate amount of knowledge in HTML, CSS, some JavaScript, and the ability to read the documentation. To create the most basic custom module, follow these four steps:
- Add your markup (HTML) for the structure of the custom module.
- Add the styling (CSS).
- Add any javascript that you might want to include for interactivity.
- Add the appropriate Hubl snippets into your HTML, CSS, or JavaScript depending on what you want the module to be capable of doing.
HubSpot has made it easy to add in their Hubl tags by allowing users to select the feature they want and then copy over the Hubl snippet into their code. With the skills that I’ve listed out as well as some creative thinking, you will be able to come up with some incredible custom modules that you can use to build a wide variety of pages for your website.
If you are a company that has recently adopted the HubSpot platform, I encourage you to look into utilizing custom modules. Doing so will make your web development process much better and profitable because you will be saving your team valuable time and energy.
As a HubSpot Platinum Partner, our team of marketing and sales professionals has become experts in this tool.
We are huge fans of HubSpot, but we know it can be overwhelming to use, especially when you have a small business or a small marketing or sales department. If you are looking for a partner to help you navigate and utilize HubSpot so you get a return on your investment, contact us for a free strategy session.
Combined, we have more than 50 HubSpot certifications, from inbound marketing and sales enablement to email marketing and social media marketing to growth-driven design.
Be sure to check out our other free resources on how best to use HubSpot by clicking here.
