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?
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.
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.
Fig. 1: 12-column template
Fig. 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
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.
Fig. 4: Repeater Module Editor - template level
Fig. 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.
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!