Blog

How to Speed Up Your Work By Building Custom Modules In HubSpot

Written by Jim Syphokham | Jan 30, 2020 2:21:55 PM

Few things are as frustrating as making changes to a complex website. 

You may have experienced this yourself: It can take hours to plug in minor edits, such as adding a new person to your team page or editing the content on your home page. Creating new sections for existing sites is even more time-consuming.
It may take your team so long to figure it out (or cost you so much to have someone else do it) that you decide the changes aren’t worth the hassle. 

Fortunately, there is an easier way. If you create your website using custom modules in a platform like HubSpot, you can add, remove, or edit pieces of your web pages with ease. It may take some time to transition to using only custom modules, but the end result will be well worth it.

What Are Custom Modules?

Custom modules in HubSpot are powerful elements that can make development much quicker.  They transform your website from a massive block of code to many clean, easy-to-edit module sections. Doing the work upfront may take some time, but it will make your sites easier to expand upon.  

One of the main features within custom modules that makes them so powerful is repeaters.  Essentially, these are fields or groups of fields within custom modules that use a loop to create and display multiple objects on a webpage. Repeaters are simple to add and even simpler to change, making them an excellent option for entrepreneurs without development experience. 

A common use case for repeaters would be staff bios. Each bio section typically has the exact same format (such as a bio picture, a section for the employees name, and a section for brief bio text). The original method of making staff bios is to code up a section for each employee in your company. Then, when someone else gets hired on, your developer will need to code in another identical section. 

While this will work, repeater fields within custom modules are much more efficient ways of accomplishing the same thing. You or your developer can build the repeater field when they first develop the page. Then, when you need to add or remove a crew member, all you have to do is push a button. The process takes seconds, as opposed to the half-hour or longer it may take your developer to adjust the code.

Here’s an example of what a repeater could look like in this instance:

How Do Custom Modules Work?

You first need to create the fields that you want to have displayed in each bio section.  Each field represents the content on the page that your team can edit. Then, you want to group those fields. In the example photo below, the group is called ‘Team Repeater’ and is represented by the Hubl variable name ‘team_repeater’.


Once they are grouped, you can turn on the repeater options, such as the minimum and maximum Object count limits as well as the default Object count that should be displayed on page load. These options can be found when you scroll down to the very bottom from the grouped fields.

After these are set, all that is left is to wrap the code that forms each individual bio in a “for loop.” That code will look something like this.  .

Now, you have the ability to add or remove individual employee bios without having to code or delete code every time that an employee joins your team or if any employee leaves.  All from the page editor.

The Pros & Cons Of Custom Modules

Pros

1. Ease of use 

As mentioned earlier, one of the biggest benefits of using modules is the convenience. Modules are extremely easy to edit and much faster to edit than the alternative. This allows entrepreneurs the opportunity to expand their web development knowledge and make changes to their personal site without hiring a developer.


2. Smaller margin for error

Free-form coding provides you with endless possibilities for development. It also provides you with endless possibilities for error. Because custom modules are easier to create, you will find fewer errors, glitches, and bugs in the final product.

3. Customization

While you don’t have the creative freedom with modules that you might when you build code from scratch, there are still opportunities for customization. You can change the colors, the fonts, and the styles used in sites with ease. There are dozens of modules available, providing you with a range of layouts for all types of functionality.

Cons:

1. Limited functionality

While there are a wide array of modules available, you may need to build parts of your site with highly unique functionality from scratch. This is often the case with filtered searches and other features.


2.Less originality

You may feel your creativity is limited when using modules, as many of the modules look the same. After using modules, your website may look similar to other sites that use modules.

3.Adjustment Time

When you first switch to modules, it will take your development team some time to learn the code and create custom modules for your business. Each time you need a new module built, you can expect work to slow down while your dev team figures it out.

When ROI Online first discussed custom modules, there were several concerns. We knew the benefits of the new system, but we didn’t want to sacrifice creativity and ingenuity to create cookie-cutter sites. 

In the end, we decided that the ease of use for our clients would far outweigh the limitations to our Creative Department. We have used modules since 2018, and we have never regretted the decision. Our sites are now cleaner and easier to edit, and the final designs are entirely unique. Not one of our clients’ websites has looked the same. 

Partner With ROI Online To Work Smarter, Not Harder

Working hard is something to strive for, but working hard when it isn’t necessary is poor time management. With custom modules, you can save time and frustration. It’s an easy fix that can make a significant difference in the long run.

If your business needs a website with the functionality of HubSpot and the clarity of StoryBrand, the ROI QuickStart is an excellent option. Not only do we build a fully functional website using custom modules, but we’ll set your business up for success by incorporating the four crucial components of the Business GrowthStack.

Schedule a strategy session to get started.