HubSpot Design Manager: Layout Builder vs. Coded Templates

05/28/2019 3 min read Written by Ian McNair

hubspot-design-manager
Any HubSpot template – no matter how you make it – serves as a foundation for the content you'll create. And when it comes to building a template (page, email, or blog) in HubSpot, there are two options for its users: the layout (visual builder) or coded templates.

Both use HubSpot's design manager tool to ensure quality functionality. While both of these template types share many similarities, there are vital differences worth knowing. Researching the two can help make your decision. Here's what you need to know about the pros and cons of each.

HubSpot Layout Builder

hubspot-layout-builder

If you're looking to build something simple, like an email template, then HubSpot's layout builder is the right choice. These templates utilize an easy drag-and-drop interface, making it simple for your team to create and rearrange modules on your email without needing to understand code.

That being said – it's simple for both developers and non-developers. The drag-drop feature makes basic template changes lightning fast. You get a nice approximation of how your email looks visually while you're editing, so you can have a rough preview before you're finished. With fields for adding classes, ID, and inline styles, tiny changes are a cinch.

From the inspector pane on the right, you can add adjust the settings to customize modules and template while in design manager. HubSpot's revamped design manager improved the user interface and added some new feature. When using layout builder, it's as easy as clicking "Add" and choosing from an array of options.

However, there are some drawbacks to the layout builder. For developers, the layout builder tends to create unnecessary markup which can bloat your page weight if you're using it to create a website page template. It also uses a defined 12-column grid which may not work for your design. Additionally, the drag-and-drop editor is limited, making it difficult to design anything intricate. So, if you're building a complex layout, you may not favor the layout builder. But that's where coded templates come in.

HubSpot Coded Templates

 

hubspot-coded-template

The other method to create templates (again page, email, or blog) in HubSpot are coded templates. These are HTML files written entirely with code. As noted, you use design manager to create these templates as well – solely from scratch. Your team can also clone a HubSpot template layout to HTML then customize it as a coded template.

With coded templates, your developer can use whatever build tools you prefer, as long as you can add an FTP step to the build. Coded templates do take a bit of extra knowledge, but for developers, the benefits of these templates are great. Using them, you gain access to the raw markup of your template, which means you'll have more control over how everything works, giving you more granular control over styles. You'll also avoid the code bloat that can potentially come with the layout builder. Additionally, coded templates give your team access to the head element of your template, which is useful for developers looking to standardize title tags for page templates. Overall, developers will find coded templates more flexible.

Custom modules are also available within coded templates, so developers with extra creativity can add even more flair to the page, blog, and email templates. This, along with other pros of coded templates, can make the editability of your templates easier as your developers pass them off to the marketing team. With all this in mind, It's important to know that coded templates are best for organizations or companies who have access to full-time developers.

The Winner

There's no definite answer when it comes to choosing between HubSpot's visual layout builder or its coded templates. While the layout builder is simple to build, and most people can use it, it can lack the control you may want over your template. And coded templates, while great for complex layouts, take a developer with knowledge to knock out.

The choice depends on various factors, including your team's HTML skill-level and general personal preferences. At LyntonWeb, we work with HubSpot every day and can assist with either type of template. To get started creating your next HubSpot template, contact us today.

By: Ian McNair

Ian is a front-end ninja and HubSpot development pro. He loves tinkering with modern CSS techniques, JavaScript, and pushing the limits of the HubSpot template system.

Subscribe Today

Stay Up-to-Date With HubSpot and Marketing Trends

Never miss a beat with the latest marketing strategies and tactics. Subscribe to the Lynton blog and receive valuable insights straight to your inbox.