3 Custom Module Guidelines Your HubSpot Developer Should Be Following

December 10, 2019   |   1 min read time    Josh Markus Josh Markus

When we approach projects that require custom modules (hint: most projects do), we consider the end users AND the content editors. We not only have to build a module that correctly displays the content to the end user, we also have to consider how our module displays to content editors in the page editor.

There are a few simple things we do when building custom modules that make life easier for content editors. They're easy to implement with a little planning. 

1. Field-Naming Conventions

It's important to specify the content when naming fields. Instead of labeling it 'Image', specify what type of image: 'Background Image' or 'Team Member Image'. If it's a boolean field, specify what it does 'Show/Hide' or 'Add...' and specify the content it controls, 'Show/Hide Title' or 'Add a button'. 

2. Grouping Fields

With more module flexibility comes more fields and that can quickly clutter the page editor and create confusion when updating the fields with content. By 'grouping' fields together it's easier to segregate that group in the page editor so content editors have a better experience.

'Grouped' fields in the template:Screen Shot 2019-12-06 at 10.26.36 AM

'Grouped' fields in the page editor:
Screen Shot 2019-12-06 at 10.18.14 AM-1

3. Linked Buttons instead of CTAs

It's easy to overuse CTA's. When that happens it puts a big strain on page loading efficiency. More often than not, the content won't require a CTA. Instead, use an anchor element to create the button and add button fields to customize the button text and the button link. This is also a great opportunity to 'group' fields together into a 'button' group.

Screen Shot 2019-12-06 at 10.51.45 AM

 

Need development help? Consulting? Design? Use the form below and tell us what you need. We're here to help!

 


Website Content Planner Guide

Download our Website Content Planner Guide to help kick off your HubSpot website redesign project!

Download Now ›

HubSpot Website Content Planner


If you found this helpful, please share.

facebook twitter

Want more? Subscribe Now!

Free Design Assessment