from our blog

How to Build HubSpot Website Quick Using Custom Modules Libraries

Posted by Simranjeet Singh

HubSpot, HubSpot Developers

This blog will help the clients and the website development agencies minimize the time spent on building a HubSpot website.

Let's be honest, most of the agencies offering some services have websites that look pretty common, and they have similar sections. You have a service page, blog page, contact, about, resource page, and ac couple of more in some cases. The same goes for the eCommerce websites, a product listing page, a single product page, a payments page, a checkouts page, etc. These pages have minor differences based on the branded guidelines set by the brand, but at the end of the day, they serve a similar purpose.

See the screenshots from two random websites designed in HubSpot CMS

hubspot website custom module

 

If you see the image above, you can easily point out that both look different because they have different color palettes, and brands have followed a different approach in displaying the content. However, if you see the comments I made on each section, the major difference lies in the placement of text and images, some of which are common. Some sections have text on the left and images on the right and vice-versa. Some sections have an image on top and text below. And, some sections are a combination of these sections.

If there are so many commonalities in the sections, then why all the websites take equal time to design and develop?

Custom Modules Library in HubSpot

Computer HubSpot developers thought of it long and hard and followed the custom module library approach to save their clients time and money in website building.

 

Custom Module 1

 

As you can see, most of the sections/modules on the HubSpot are similar; we built a library of such custom modules that work as a standard for all similar websites. Of course, clients have different requirements in some sections, which can be designed from scratch, but for the common ones, the custom modules from the library do the job well.

 

custom module 2

 

Benefits of Custom Module Library

Having a custom module library helps the designers as the designing time is reduced. They simply have to change the background image or the side image, change the text and sometimes its placement to make things work on their client's website.

Custom Module Video 3

 

The libraries are helpful for clients as well because they can actually see how their website will look. Designers place the modules on a webpage based on the client's requirements and share them with the client. After getting approval on the design or after making the changes, the designers make the final changes according to the client's website. This reduces a lot of back and forth communication and saves a lot of time.

The Custom Module Library approach can help designers who are on a tight schedule of delivering the website in a week or two. A major portion of time might be spent on deciding the design of the page. Once that's done, then it's just adjusting the already built custom modules.

The custom modules are built in a way so that anybody can edit those even if they don't have coding knowledge. It is a simple drag and drop method through which clients can change the background image, change font color and style, and do minor adjustments module by module.

Challenges in Custom Module Library Approach

Every approach has its pros and cons. We see custom module library helps save crucial time and ultimately money on HubSpot website building. It does have its share of challenges that cannot be termed cons because those are manageable.

Timely Updating: You cannot have a custom module library made once and forget about it. As with time and with each client, the coding standards change, you need to update your libraries meeting new and updated requirements. This is easily handled if you keep yourself updated with the latest industry trends, and you can also know about the latest coding standards when you work on new projects.

 

Custom Module Video 5

 

Multi-Device Support: Adjusting the custom modules to device types or according to the new portals is a task that has no shortcuts. You cannot just place the module on a new website and say it is done. You have to adjust the modules according to the new websites as they might have different inner containers, among other things.

custom module video 4

 

Combining CSS & JavaScript libraries: Another area that needs some serious work is matching your custom modules' CSS and JavaScript libraries to the client's website. This way, the whole website will have standardized CSS and JavaScript libraries, which is a good approach. This also helps in speed optimization as the website sends few requests to the server and takes less time to load.

Conclusion

So, does building a custom module library have benefits? Yes, it does have its perks. It saves time and allows users to edit the go with an easy drag and drop option. However, the effort for adjusting the custom module according to the client's website is there. But you definitely save time and money on building a fresh one from scratch.

Simranjeet Singh

Written by Simranjeet Singh

Writer | HubSpot Certified Inbound Marketer and Content Marketer