In keeping up with the latest trends of Hubspot Template Development, one of the tools that has started to catch one over the last couple years is the use of Hubspot Custom Modules. These modules make both development and user experience better on Hubspot and if you’re still not up-to-speed on them, this article is for you!
What are Hubspot Custom Modules?
Custom Modules allow designers and developers to create unique parts of a website that needs to be consistent on a page-by-page basis, but also integrated with the Hubspot Editor so that Marketers and Non-Coders can customize certain aspects on the module on a case-by-case basis. Hubspot Custom Modules are the best solution for content that has slight variations between pages but needs to maintain a consistent look and feel in terms of styling, like featured content modules or related product lists. Highly stylized groups of content that are another application.
Consistent Style & Function With Just One Click
When creating a Custom Module, you first get your raw code in the right-hand side of the window.
Notice that were content would normally be in your standard HTML, there are HUBL tags instead. This is how you indicate what the user can customize within the code by using fields. The fields for the above code would look like this in the left sidebar of the custom module editor.
Once you’ve created your fields, you click on “Copy Snippet” in order to get the HUBL tag code to add to your HTML.
Example:
Easier To Edit and Update
Once you have your code and fields set up correctly, you just need to publish your Custom Module and add it to any template. Once it has been added to a template, the new module design will show up in any new page created with the template that your marketer’s and non-coders create along with the custom fields they can edit on a page-by-page basis. When the user is editing their template, they will get a unique and user-friendly layout to make the edits.
Using our earlier example, and assuming we’ve added a few more features to it, here is an example of what your end-user might see in the Hubspot Editor.
Less Clutter on Your Templates
One of the other benefits of using Custom Modules from a maintenance standpoint is that they help de-clutter Hubspot Templates. Instead of having several modules pieced together to create one experience, we can add all sorts of custom features into a single module and create the same experience while keeping the Design Manager a little cleaner on the template.
Take a look at how we have used Custom Modules on our FlexHUB Home Page One Template. Within each blue module there are several customizations available that change placement, content, colors, fonts, images, videos, etc, all within those few blue modules. That’s over 20 customizable features for the user, yet look at how streamlined the template view is with everything inside just four well-placed modules:
Reusable Modules For Complicated Development
Custom Modules also allow you to keep everything “in app” from styles, HUBL, and Javascript while also indicating key areas where you want a general user to be able to change a parameter. This creates a great situation to create custom parts of your website that are also easy for anyone to update. There are lots of cool things that you can do if you play with it, you just gotta get in there and start trying out your ideas!
Learn More
To learn more about Hubspot Custom Modules, please check out these resources:
- Intro to HUBL (Coding language used to create those custom Hubspot Tokens)
- Hubspot Modules in RAW HUBL
- Very useful if you need to add a module but at a code level in more custom work and you can’t just use the Design Manager darg-and-drop.
Need Great Hubspot Custom Modules? Check Out Our Collection!
