Beginning HubSpot Template Development Outside the Design Manager

The HubSpot design manager and its default modules are a handy way for HubSpot customers to package and deliver content and marketing tools via email, blogs and web pages, without having access to advanced development support.

For businesses that require solutions above and beyond the out-of-the-box HubSpot features, hiring the services of professional web designers and developers is the next step.

While drag-and-drop website builders are relatively easy for regular users to get the hang of, they pose many headaches for the professional web experts. Sometimes it feels akin to playing a game of basketball with your dominant arm tied behind your back. It can be done, and you can quite possibly get better at it, but it will require frustration, time and continual adaptation.

The good news for professional web designers and developers is that there are some advanced HubSpot features that will allow them to use familiar tools and technologies and speed up the entire process of churning out advanced templates.

For most professional web developers, frustration can be minimized by downloading and installing the Local HubL Server on a local environment. HubL Server gives developers the ability to build and test templates without loading templates into the HubSpot interface. Note that it will require installing Java (yeah, I know), so if you’re not already a developer who currently uses Java in your arsenal, be prepared that it’s gonna be on your machine again.

Once HubL Server is configured, HubSpot also allows you to connect to the hosted custom directory so you can download and upload template files via FTP. Now you can add and configure the environment with preferred dev tools (SASS, react js, vue js, bootstrap, etc.) and create a git repository for versioning. Note that all pre-processing happens locally, and to date, you will only be pushing the processed template files to HubSpot online.

One of my favorite aspects of getting out of the HubSpot drag-and-drop Design Manager is the ability to sidestep their default grid system. I’ve spent many hours pulling my hair out while hacking it into submission. If you want lessons in CSS specificity, have a whack at creating 12+ levels of ids and classes, chained as direct descendants, wading through level after level of HubSpot classes in order to get elements to listen. Combining the power of HubL syntax with the tools that you love and know best makes a big difference.

The Local HubL Server isn’t going to do you much good if you don’t have any idea how to utilize HubL. So you’re going to have to familiarize yourself with the ins and outs of HubSpot’s CMS syntax. HubL is the HubSpot Markup Language, and it allows you to insert modules, predefined variables, custom variables, leverage conditional logic, for loops, compile multiple CSS files and create blocks and extends.

A great place to get started with HubL is HubSpot’s HubL documentation and their CMS Developer videos.