How HubSpot’s New Design Manager Helps Developers?

Author Collins Oparaugo - 07 March, 2019

2 minute read

Over the years HubSpot has positioned itself as an industry leader by consistently improving the sets of tools that enable effective marketing automation. The state of the art tools allow businesses to incorporate HubSpot into their digital campaigns providing delightful results in ways that power up the CRM system beyond comparison.

HubSpot’s latest iteration of its Design Manager has provided developers like myself somewhat close to a natural development environment where templates and custom modules can be fused together beautifully to form modern websites, blogs, landing pages, and newsletters.

What Does the New Design Manager Solve?

The new Design Manager allows developers and designers to manage HTML, JavaScript and CSS in one place.

In addition, the new modularized format makes template development breezy: a single template can be themed more easily and it can be used by other pages within the same project. The development and publishing of pages and newsletters are now far speedier as the Design Manager helps developers to conceptualize designs more easily. 

New call-to-actionLook And Feel

HubSpot’s traditional drag-and-drop behavior is still very much alive within the new Design Manager. Only this time it’s better!

Modules placed within a template can be easily modified to variable widths (default full width is 12 column), and they can be cloned and edited with relative ease. HTML, HUBL, JS and CSS are packaged in a developer-friendly format, as every module can be programmed to contain all relevant code information, thus enabling smoother drag-and-drop templating.

 

HubSpot_New_12_column_templateFig. 1: 12-column template

 HubSpot_Module_Code_Interface2018-1Fig. 2:  Module code interface

Below is a GIF-animation of a template-building operation demonstrating the new module clone feature on a standard drag-and-drop template

HubSpot_Clone_Feature_Module Fig. 3: Clone feature module

Repeater Module Improves Usability

Within the core of the most recent Design Manager update is a tool called Repeater Module. The Repeater Module is of mighty importance, as it seamlessly aids in creating repeating components within a page. This feature absolutely outclasses any rival CMS's in terms of usability. The developer can now create rules such as object count limits (minimum and maximum) and default number of iterations to make the job of the content editor easier when editing pages.

 

HubSpot_Repeater_Module_Editor_Template_Level-1

Fig. 4: Repeater Module Editor - template level

The Definitive Guide to Selling Better & Faster

 

HubSpot_Repeater_Module_Editor_Conten_Editor_ViewFig. 5: Repeater Module Editor - page level (for content editors)

I have in recent past been able to quickly create a handful of projects using the Repeater Module. Eduhouse is a prime example of a case where the new module was utilized successfully.

 

HubSpots_New_Designer_Module_In_Action
Fig.6: New HubSpot Design Manager in action

There is a vast amount of tools within the HubSpot CMS that I have not described in this article, all of which can be incorporated to produce stunning results. Take a look at https://designers.hubspot.com for a more detailed view on how to bring your ideas to life!

 

Book A Meeting

SHARE THIS STORY | |