{"id":7092,"date":"2019-12-19T19:35:04","date_gmt":"2019-12-19T16:35:04","guid":{"rendered":"\/\/?p=7092"},"modified":"2026-05-22T10:42:15","modified_gmt":"2026-05-22T10:42:15","slug":"why-use-modular-custom-coded-templates-for-your-hubspot-marketing-emails","status":"publish","type":"post","link":"https:\/\/getdevdone.com\/blog\/why-use-modular-custom-coded-templates-for-your-hubspot-marketing-emails.html","title":{"rendered":"Why Use Modular Custom-Coded Templates for Your HubSpot Marketing Emails?"},"content":{"rendered":"\n<p><span style=\"font-weight: 400;\">If you\u2019ve been looking for an inbound marketing software solution and have chosen <a href=\"https:\/\/getdevdone.com\/hubspot-cms-development.html\" target=\"_blank\" rel=\"noopener\" title=\"\">HubSpot CMS development<\/a>, we fully support your decision. This popular platform has a ton of advantages, from the ability to integrate with social media and monitor the entire buyer\u2019s journey to extensive customer lists and segmentation possibilities, and excellent ROI reporting. <\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">HubSpot is <\/span><span style=\"box-sizing: border-box; margin: 0px; padding: 0px;\">used\u00a0by<\/span><span style=\"font-weight: 400;\"> over <a href=\"https:\/\/www.hubspot.com\/case-studies\" target=\"_blank\" rel=\"noopener nofollow\" title=\"\">268,000 customers<\/a> across the globe. One of the most attractive features this platform offers is the <\/span><b>email marketing automation <\/b><span style=\"font-weight: 400;\">solution. It allows you to deeply personalize your emails in order to get more clickthroughs, optimize email campaigns with A\/B tests and analytics, and create beautiful marketing emails. <\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">It is exactly the ways of building marketing emails in HubSpot that we\u2019d like to discuss in this post. We want to show you why and when you should choose what we <\/span><span style=\"box-sizing: border-box; margin: 0px; padding: 0px;\">call\u00a0<strong>modular<\/strong><\/span><b> custom-coded <\/b><span style=\"box-sizing: border-box; margin: 0px; padding: 0px;\"><strong>temp<\/strong><\/span><b>lates\u00a0for<\/b><span style=\"font-weight: 400;\"> your HubSpot marketing emails. <\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>WAYS TO CREATE EMAIL TEMPLATES IN HUBSPOT <\/strong><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">You can build email templates for <\/span><span style=\"box-sizing: border-box; margin: 0px; padding: 0px;\">HubSpot\u00a0<strong>in<\/strong><\/span><b> the following ways: <\/b><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\">Use the built-in drag-and-drop visual designer tool<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">Code a basic template using the HTML markup and <\/span><a href=\"https:\/\/developers.hubspot.com\/docs\/cms\/reference\/hubl\/tags\/standard-tags\" target=\"_blank\" rel=\"noopener nofollow\" title=\"\"><span style=\"font-weight: 400;\">HubL <\/span><\/a><span style=\"font-weight: 400;\">variables outside HubSpot and then upload the file to the platform (only the Professional and Enterprise pricing plans) <\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">Clone a drag-n-drop template into HTML code and edit it inside the HubSpot editor <\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">Code a template by <\/span><b>creating modules first, and upload the file to the platform<\/b><span style=\"font-weight: 400;\"> (only the Professional and Enterprise pricing plans)<\/span><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">While building templates with the drag-n-drop tool may seem simpler and quicker, it\u2019s the <\/span><b>modular custom-coded<\/b> <b>templates made outside of HubSpot <\/b><span style=\"font-weight: 400;\">that can give your marketing campaigns real value. Let\u2019s go over the details. <\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>THE DRAG-N-DROP VISUAL DESIGNER TOOL <\/strong><\/h3>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" width=\"1947\" height=\"959\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2019\/12\/19182624\/021.png\" alt=\"HubSpot drag-n-drop designer tool\" class=\"wp-image-7097\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2019\/12\/19182624\/021.png 1947w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2019\/12\/19182624\/021-300x148.png 300w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2019\/12\/19182624\/021-768x378.png 768w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2019\/12\/19182624\/021-1024x504.png 1024w\" sizes=\"(max-width: 1947px) 100vw, 1947px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">To build templates in this way, you use the HubSpot in-app tool by dragging and dropping groups and modules. Just <\/span><a href=\"https:\/\/knowledge.hubspot.com\/design-manager\/create-page-email-and-blog-templates-in-the-layout-editor\" target=\"_blank\" rel=\"noopener nofollow\" title=\"\"><span style=\"font-weight: 400;\">follow the instructions <\/span><\/a><span style=\"font-weight: 400;\">to start creating a template in the layout editor. <\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">The main advantages the drag-n-drop method provides are: <\/span><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\">It\u2019s good for someone who\u2019s not well-versed in coding. Anyone can make changes to a template at any time in the process with no need to ask for a professional software developer\u2019s assistance. <\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">What you see is what you get &#8211; you can instantly visualize your email in a customer\u2019s inbox. <\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">You can turn a template made in the template builder into a coded template. The reverse conversion is impossible.<\/span><\/li>\n<\/ol>\n\n\n\n<p><span style=\"font-weight: 400;\">At the same time, creating a template using the layout editor is not devoid of drawbacks. Here <\/span><span style=\"box-sizing: border-box; margin: 0px; padding: 0px;\">are\u00a0<strong>the<\/strong><\/span><b> most notable<\/b><span style=\"font-weight: 400;\">: <\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>A large amount of extra code that HubSpot adds<\/b><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">The HubSpot builder uses a 12-column Bootstrap-based grid, and all the HTML and CSS code for this grid is modified in automatic mode, depending on how you\u2019ve arranged columns in your template.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Every single column, row, and module gets enclosed in a wrapper class. If you decide to make some enhancements in this automatically generated code afterward, you\u2019re going to have a hard time doing it.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">It\u2019s true that you can still add your own classes and IDs to certain portions of the markup. This will only help you make some cosmetic changes, though. When it comes to structuring your code the way you want, your hands are tied. You won\u2019t be able to override the grid. <\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">As a result, the drag-and-drop approach prevents developers from building more complex, flexible templates with unique designs. All they can get is something basic, something that <\/span><b>looks similar to many other templates<\/b><span style=\"font-weight: 400;\">. <\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>No access via FTP<\/b><\/li>\n<\/ul>\n\n\n\n<p>If you want to send a template created in the drag-n-drop builder over FTP, you won\u2019t be able to do that.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>BASIC CUSTOM-CODED EMAIL TEMPLATES <\/strong><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">These are files that developers create themselves using HTML and HubL tags. This approach is more flexible. <\/span><\/p>\n\n\n\n<p>Developers are free to modify the code in any way they want, <span style=\"font-weight: 400;\">including some email template variables like {{ contact.firstname }}, {{ contact.lastname}}, and {{ contact.email}}. HubL gives email templates the flexibility desired. <\/span><\/p>\n\n\n\n<p>While they can\u2019t perform the same high-level, complex operations as programmers who can use server-side scripting languages like PHP (HubSpot doesn\u2019t provide this ability), HubSpot developers can leverage the power of HubL to create email templates with some useful functions.<\/p>\n\n\n\n<p>HubL variables and tags can be added to drag-and-drop templates, too. However, their use in those templates is restricted. In custom-coded templates, on the other hand, HubL gives developers ample space for flexibility and creativity.<\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Basic custom-coded templates do have <\/span><b>some limitations<\/b><span style=\"font-weight: 400;\">, though. While they allow you to <\/span><b>dynamically change some portions of a template<\/b><span style=\"font-weight: 400;\">, for example, a recipient&#8217;s name or the price of an item, you can\u2019t apply logic inside a template. For instance, you can\u2019t display or hide a block or image by clicking a button. <\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-weight: 400;\"><strong>CLONED DRAG-N-DROP HTML TEMPLATES<\/strong> <\/span><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">You can clone drag-and-drop templates and tweak their HTML code right <\/span><b>inside the HubSpot editor. <\/b><span style=\"font-weight: 400;\">However, modifying this builder-generated code can be extremely difficult and time-consuming. So, we recommend avoiding this method altogether. <\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>MODULAR CUSTOM-CODED TEMPLATES <\/strong><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">This method gives you maximum flexibility when creating your emails. You first build your own modules and add them to a template. You can choose any layout you want since you\u2019re free from any restrictions that HubSpot\u2019s grid imposes. What\u2019s even more important, you can add<strong>\u201cswitches\u201d or control statements<\/strong> to your code. This allows you to hide or display entire content blocks. <\/span><\/p>\n\n\n\n<p>Have a look at this screenshot, for example.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" width=\"1947\" height=\"1189\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2019\/12\/19182847\/Two_Blocks.png\" alt=\"Two blocks\" class=\"wp-image-7098\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2019\/12\/19182847\/Two_Blocks.png 1947w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2019\/12\/19182847\/Two_Blocks-300x183.png 300w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2019\/12\/19182847\/Two_Blocks-768x469.png 768w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2019\/12\/19182847\/Two_Blocks-1024x625.png 1024w\" sizes=\"(max-width: 1947px) 100vw, 1947px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p><b>There\u2019s no need to create the markup for both blocks in this template<\/b><span style=\"font-weight: 400;\">. You can simply add a \u201cswitch\u201d to show or hide the image. <\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Before the switch is applied: <\/span><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" width=\"1947\" height=\"781\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2019\/12\/19182945\/Before_Image.png\" alt=\"Before the switch is applied\" class=\"wp-image-7099\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2019\/12\/19182945\/Before_Image.png 1947w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2019\/12\/19182945\/Before_Image-300x120.png 300w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2019\/12\/19182945\/Before_Image-768x308.png 768w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2019\/12\/19182945\/Before_Image-1024x411.png 1024w\" sizes=\"(max-width: 1947px) 100vw, 1947px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">After the switch is applied: <\/span><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" width=\"1947\" height=\"781\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2019\/12\/19183043\/After_Switch.png\" alt=\"After the switch is applied\" class=\"wp-image-7100\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2019\/12\/19183043\/After_Switch.png 1947w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2019\/12\/19183043\/After_Switch-300x120.png 300w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2019\/12\/19183043\/After_Switch-768x308.png 768w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2019\/12\/19183043\/After_Switch-1024x411.png 1024w\" sizes=\"(max-width: 1947px) 100vw, 1947px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Another example with the button displayed and hidden.<\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Before:<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" width=\"1947\" height=\"876\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2019\/12\/19183145\/Button_Before.png\" alt=\"Button before\" class=\"wp-image-7101\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2019\/12\/19183145\/Button_Before.png 1947w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2019\/12\/19183145\/Button_Before-300x135.png 300w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2019\/12\/19183145\/Button_Before-768x346.png 768w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2019\/12\/19183145\/Button_Before-1024x461.png 1024w\" sizes=\"(max-width: 1947px) 100vw, 1947px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">After:<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" width=\"1947\" height=\"816\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2019\/12\/19183228\/Button_After.png\" alt=\"Button after\" class=\"wp-image-7102\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2019\/12\/19183228\/Button_After.png 1947w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2019\/12\/19183228\/Button_After-300x126.png 300w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2019\/12\/19183228\/Button_After-768x322.png 768w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2019\/12\/19183228\/Button_After-1024x429.png 1024w\" sizes=\"(max-width: 1947px) 100vw, 1947px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">As a result, you\u2019ll get a block with the same markup as the one above. <\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Another benefit of using modular custom-coded templates is the ability to <strong>repeat (propagate) content<\/strong>. Furthermore, you can set odd and even elements to behave differently. Here\u2019s an example:<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" width=\"1947\" height=\"926\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2019\/12\/19183326\/Content_Propagation.png\" alt=\"Content propagation\" class=\"wp-image-7103\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2019\/12\/19183326\/Content_Propagation.png 1947w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2019\/12\/19183326\/Content_Propagation-300x143.png 300w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2019\/12\/19183326\/Content_Propagation-768x365.png 768w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2019\/12\/19183326\/Content_Propagation-1024x487.png 1024w\" sizes=\"(max-width: 1947px) 100vw, 1947px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>WHEN TO USE MODULAR CUSTOM-CODED TEMPLATES <\/strong><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">If you\u2019re building a basic email template with a simple design and without much functionality, drag-and-drop email templates should meet your needs. Understand, though, that you\u2019re not the only one who might have chosen this method. <\/span><\/p>\n\n\n\n<p>It means that your marketing emails will look very similar to those your competitors have built. Potential customers won\u2019t be able to distinguish your offer from the rest. And that\u2019s the ultimate goal, isn&#8217;t it?<\/p>\n\n\n\n<p>Modular custom-coded templates, by contrast, allow you to create truly unique emails by taking full advantage of the HubL markup language. Without any grid restrictions, you can choose your own custom layout. You can also add any specific features and conditional logic to your emails.<\/p>\n\n\n\n<p>Modular custom-coded templates contribute to better brand recognition during email marketing campaigns. This happens because the flexibility of these templates allows developers to implement every tiny detail of the brand style in the design of an email.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>GetDevDone CREATES STUNNING CUSTOM-CODED EMAIL TEMPLATES FOR HUBSPOT <\/strong><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">One thing to note is that building custom email templates for HubSpot is much more complicated and takes up much more time than creating templates for similar email services such as MailChimp and Campaign Monitor. <\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">However, this is not a problem for an <\/span>experienced engineering <span style=\"font-weight: 400;\">partner. We, at GetDevDone, test all templates on 12 real devices and in more than 75 email clients. <\/span><\/p>\n\n\n\r\n    <section class=\"banner-block image-full-height\" style=\"background-color: #0f2ab1; color: #fffff0;\">\r\n                    <div class=\"bg-stretch\"><img decoding=\"async\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/02\/20151935\/Banner-1.png\" alt=\"decor\" \/><\/div>\r\n                            <div class=\"text-holder\">\r\n                <h2>Need responsive HTML email templates for your next campaign?<\/h2>                                                    <a class=\"btn btn-md btn-warning-alt text-uppercase\" href=\"https:\/\/getdevdone.com\/order-now\/frontend\/digital-assets\" target=\"_blank\">Order Now<\/a>\r\n                            <\/div>\r\n                    <\/section>    \r\n\r\n\n\n<section id=\"faq-section-block_10c4e7159f3e03d8dc9160ae6346d3d5\" class=\"faq new-faq-design\" aria-labelledby=\"faq-title-1398613378\">\n\t<h2 id=\"faq-title-1398613378\">HubSpot marketing emails FAQs<\/h2>\n\t\t\t<div class=\"accordion-filter accordion-faq\">\n\t\t\t\t\t\t\t<div class=\"ac\">\n\t\t\t\t\t<h3 class=\"ac-header\">\n\t\t\t\t\t\t<button class=\"ac-trigger\">\n\t\t\t\t\t\t\tWhen is HubSpot&#8217;s drag-and-drop email builder enough?\t\t\t\t\t\t\t<svg width=\"24\"\n\t\t\t\t\t\t\t\theight=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n\t\t\t\t\t\t\t\taria-hidden=\"true\" focusable=\"false\"\n\t\t\t\t\t\t\t\txmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t\t<path d=\"M6 9L12 15L18 9\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<\/button>\n\t\t\t\t\t<\/h3>\n\t\t\t\t\t<div class=\"ac-panel\">\n\t\t\t\t\t\t<div class=\"ac-panel-inner custom-scroll\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400\">HubSpot&#8217;s drag-and-drop email builder is enough when the email has a standard layout, limited design requirements, and does not need custom module logic or unusual structure.<\/span><\/p>\n<p><span style=\"font-weight: 400\">For a simple newsletter, announcement, follow-up email, or basic promotional campaign, drag-and-drop can be the more practical choice. It is faster to start with, easier for non-technical users, and better suited to teams that want direct control inside HubSpot without involving developers.<\/span><\/p>\n<p><span style=\"font-weight: 400\">The trade-off is design and code control. If the email only needs a logo, text, images, buttons, and simple sections, custom coding may be unnecessary. If the team starts fighting the grid, cloning templates, or asking for layout behavior the builder does not handle cleanly, that is usually the point where custom development becomes more reasonable.<\/span><\/p>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"ac\">\n\t\t\t\t\t<h3 class=\"ac-header\">\n\t\t\t\t\t\t<button class=\"ac-trigger\">\n\t\t\t\t\t\t\tModular custom-coded templates vs basic custom-coded templates: what is the difference?\t\t\t\t\t\t\t<svg width=\"24\"\n\t\t\t\t\t\t\t\theight=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n\t\t\t\t\t\t\t\taria-hidden=\"true\" focusable=\"false\"\n\t\t\t\t\t\t\t\txmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t\t<path d=\"M6 9L12 15L18 9\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<\/button>\n\t\t\t\t\t<\/h3>\n\t\t\t\t\t<div class=\"ac-panel\">\n\t\t\t\t\t\t<div class=\"ac-panel-inner custom-scroll\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400\">A basic custom-coded HubSpot template is usually a more fixed HTML + HubL template, while a modular custom-coded template is built from reusable blocks that can be controlled, repeated, hidden, or rearranged more flexibly.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Basic custom coding gives developers more control than the drag-and-drop builder. It can work well when the email layout is stable and only needs limited dynamic fields, such as personalization tokens or editable text areas.<\/span><\/p>\n<p><span style=\"font-weight: 400\">A modular custom-coded template goes further. It treats the email as a small system of reusable parts: hero modules, text-image blocks, CTA sections, product rows, optional images, repeated items, and layout variations. That approach takes more planning, but it is usually better when one template has to support many campaign variants without creating a new coded email every time.<\/span><\/p>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"ac\">\n\t\t\t\t\t<h3 class=\"ac-header\">\n\t\t\t\t\t\t<button class=\"ac-trigger\">\n\t\t\t\t\t\t\tWhy can cloned drag-and-drop HTML templates become difficult to maintain?\t\t\t\t\t\t\t<svg width=\"24\"\n\t\t\t\t\t\t\t\theight=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n\t\t\t\t\t\t\t\taria-hidden=\"true\" focusable=\"false\"\n\t\t\t\t\t\t\t\txmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t\t<path d=\"M6 9L12 15L18 9\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<\/button>\n\t\t\t\t\t<\/h3>\n\t\t\t\t\t<div class=\"ac-panel\">\n\t\t\t\t\t\t<div class=\"ac-panel-inner custom-scroll\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400\">Cloned drag-and-drop HTML templates become difficult to maintain because the code was originally generated for the visual builder, not planned as clean developer-maintained markup.<\/span><\/p>\n<p><span style=\"font-weight: 400\">At first, cloning can look like a shortcut. The structure already exists, and a developer can start editing the HTML. The problem is that the code often carries nested wrappers, grid-related classes, and layout decisions produced by the builder. Once a team starts making deeper changes, small edits can create side effects in spacing, mobile behavior, or content alignment.<\/span><\/p>\n<p><span style=\"font-weight: 400\">This approach may be acceptable for very small tweaks. It is usually a poor fit for a template that needs long-term reuse, client-specific variants, or careful brand implementation. In those cases, rebuilding the template with a cleaner modular structure is often less painful than patching builder-generated code repeatedly.<\/span><\/p>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"ac\">\n\t\t\t\t\t<h3 class=\"ac-header\">\n\t\t\t\t\t\t<button class=\"ac-trigger\">\n\t\t\t\t\t\t\tHow do reusable modules help agencies produce HubSpot marketing emails faster?\t\t\t\t\t\t\t<svg width=\"24\"\n\t\t\t\t\t\t\t\theight=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n\t\t\t\t\t\t\t\taria-hidden=\"true\" focusable=\"false\"\n\t\t\t\t\t\t\t\txmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t\t<path d=\"M6 9L12 15L18 9\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<\/button>\n\t\t\t\t\t<\/h3>\n\t\t\t\t\t<div class=\"ac-panel\">\n\t\t\t\t\t\t<div class=\"ac-panel-inner custom-scroll\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400\">Reusable modules help agencies produce HubSpot marketing emails faster by turning repeated design patterns into controlled building blocks instead of one-off development tasks.<\/span><\/p>\n<p><span style=\"font-weight: 400\">The practical benefit appears after the first few campaigns. Once the main modules are approved, the team can reuse them with different copy, images, CTAs, and content order. That can reduce the number of developer requests for routine layout changes and keep email production closer to the campaign team.<\/span><\/p>\n<p><span style=\"font-weight: 400\">For agencies, reusable modules are useful because they protect both speed and consistency:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Designers do not need to recreate every email from scratch.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Marketers can assemble approved sections inside known limits.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Developers spend less time repeating the same markup.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">QA becomes more predictable because the same components appear across campaigns.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400\">The catch is that the module set has to be planned properly. If every possible design variation becomes a separate module, the system can become bloated instead of efficient.<\/span><\/p>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"ac\">\n\t\t\t\t\t<h3 class=\"ac-header\">\n\t\t\t\t\t\t<button class=\"ac-trigger\">\n\t\t\t\t\t\t\tWhat HubSpot plan do you need for custom-coded email templates?\t\t\t\t\t\t\t<svg width=\"24\"\n\t\t\t\t\t\t\t\theight=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n\t\t\t\t\t\t\t\taria-hidden=\"true\" focusable=\"false\"\n\t\t\t\t\t\t\t\txmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t\t<path d=\"M6 9L12 15L18 9\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<\/button>\n\t\t\t\t\t<\/h3>\n\t\t\t\t\t<div class=\"ac-panel\">\n\t\t\t\t\t\t<div class=\"ac-panel-inner custom-scroll\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400\">According to current HubSpot documentation, building email templates in Design Manager requires a Marketing Hub Professional or Enterprise subscription.<\/span><\/p>\n<p><span style=\"font-weight: 400\">This is an important check before starting custom-coded email template development. A team may have access to HubSpot email tools and still not have the right subscription or permissions for the custom template workflow they expect. HubSpot also notes that Content Hub accounts can create emails using the drag-and-drop editor, which is not the same as building custom-coded email templates.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Before briefing a developer, confirm three things in the client portal: the HubSpot subscription, access to Design Manager, and Design tools permissions for the person who will create or publish the template. This avoids a common planning mistake: approving a custom-coded approach before the account can actually support it.<\/span><\/p>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"ac\">\n\t\t\t\t\t<h3 class=\"ac-header\">\n\t\t\t\t\t\t<button class=\"ac-trigger\">\n\t\t\t\t\t\t\tHow much longer does it take to build a custom-coded HubSpot email template?\t\t\t\t\t\t\t<svg width=\"24\"\n\t\t\t\t\t\t\t\theight=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n\t\t\t\t\t\t\t\taria-hidden=\"true\" focusable=\"false\"\n\t\t\t\t\t\t\t\txmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t\t<path d=\"M6 9L12 15L18 9\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<\/button>\n\t\t\t\t\t<\/h3>\n\t\t\t\t\t<div class=\"ac-panel\">\n\t\t\t\t\t\t<div class=\"ac-panel-inner custom-scroll\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400\">A custom-coded HubSpot email template usually takes longer than a simple drag-and-drop email because the work includes code structure, HubL setup, module behavior, responsive handling, and email-client testing.<\/span><\/p>\n<p><span style=\"font-weight: 400\">There is no reliable universal multiplier. A single fixed template with a simple layout may not add much complexity. A modular system with optional sections, repeated content, different layout states, and strict brand requirements can take noticeably more upfront planning and QA.<\/span><\/p>\n<p><span style=\"font-weight: 400\">The article also notes that HubSpot custom email template development can be more complicated than template work for some other email services. That does not mean it is the wrong choice. It means the timeline should account for platform-specific setup, editor usability, testing, and future reuse. For GetDevDone-style delivery work, the safer estimate is based on the number of modules, states, and test cases, not only the number of email screens in the design file.<\/span><\/p>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"ac\">\n\t\t\t\t\t<h3 class=\"ac-header\">\n\t\t\t\t\t\t<button class=\"ac-trigger\">\n\t\t\t\t\t\t\tWhat can go wrong if a HubSpot email template is not planned modularly?\t\t\t\t\t\t\t<svg width=\"24\"\n\t\t\t\t\t\t\t\theight=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n\t\t\t\t\t\t\t\taria-hidden=\"true\" focusable=\"false\"\n\t\t\t\t\t\t\t\txmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t\t<path d=\"M6 9L12 15L18 9\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<\/button>\n\t\t\t\t\t<\/h3>\n\t\t\t\t\t<div class=\"ac-panel\">\n\t\t\t\t\t\t<div class=\"ac-panel-inner custom-scroll\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400\">If a HubSpot email template is not planned modularly, teams can end up with duplicated blocks, inconsistent layouts, fragile edits, and a template that becomes harder to update after every campaign.<\/span><\/p>\n<p><span style=\"font-weight: 400\">The first version may still look fine. The problem usually appears later, when someone needs a variation: hide the image, add a second CTA, repeat a product row, change the order of sections, or reuse the same layout for a different client campaign. Without a clear module plan, these changes often become manual code edits instead of normal content editing.<\/span><\/p>\n<p><span style=\"font-weight: 400\">For agencies, that creates delivery risk. Account teams promise small campaign changes, designers expect visual consistency, and developers inherit a template that was never built for variation. The hidden cost is not only development time. It is slower QA, more regression risk, and less confidence that the next send will match the approved design.<\/span><\/p>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"ac\">\n\t\t\t\t\t<h3 class=\"ac-header\">\n\t\t\t\t\t\t<button class=\"ac-trigger\">\n\t\t\t\t\t\t\tWhat should be prepared before sending a HubSpot email template for custom development?\t\t\t\t\t\t\t<svg width=\"24\"\n\t\t\t\t\t\t\t\theight=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n\t\t\t\t\t\t\t\taria-hidden=\"true\" focusable=\"false\"\n\t\t\t\t\t\t\t\txmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t\t<path d=\"M6 9L12 15L18 9\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<\/button>\n\t\t\t\t\t<\/h3>\n\t\t\t\t\t<div class=\"ac-panel\">\n\t\t\t\t\t\t<div class=\"ac-panel-inner custom-scroll\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400\">Before sending a HubSpot email template for custom development, prepare the design, module logic, editable fields, and HubSpot access details, not just a finished visual mockup.<\/span><\/p>\n<p><span style=\"font-weight: 400\">For<\/span><a href=\"https:\/\/getdevdone.com\/hubspot-html-templates-development.html\"> <span style=\"font-weight: 400\">custom HubSpot HTML email template development<\/span><\/a><span style=\"font-weight: 400\">, the most useful inputs are:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Final or near-final design files for desktop and mobile.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Brand rules for typography, colors, spacing, buttons, and imagery.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">A list of reusable modules and which parts should be editable.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Rules for optional blocks, repeated content, and layout variants.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Personalization tokens or HubL-related requirements.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Target email clients and devices for testing.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Examples of real campaigns the template needs to support.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">HubSpot plan, portal access, and Design Manager permissions.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400\">The main goal is to separate design decisions from content-editing decisions before development starts. If the module behavior is unclear, the developer has to guess which parts should be flexible, fixed, optional, or reusable. That is where avoidable rework usually begins.<\/span><\/p>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n","protected":false},"excerpt":{"rendered":"<p>Discover how modular custom-coded HubSpot email templates improve branding, scalability, responsiveness, and marketing performance.<\/p>\n","protected":false},"author":4,"featured_media":16450,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"advgb_blocks_editor_width":"","advgb_blocks_columns_visual_guide":"","footnotes":""},"categories":[739,756],"tags":[844,760,783,808],"class_list":["post-7092","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-guide","category-hubspot-development","tag-b2b","tag-custom-development","tag-email-development","tag-hubspot-cms"],"acf":[],"aioseo_notices":[],"author_meta":{"display_name":"Dmytro Mashchenko","author_link":"https:\/\/getdevdone.com\/blog\/author\/dima"},"featured_img":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2019\/12\/29090041\/Hubspot-modular-custom-coded-templates-300x300.png","coauthors":[],"tax_additional":{"categories":{"linked":["<a href=\"https:\/\/getdevdone.com\/blog\/category\/guide\" class=\"advgb-post-tax-term\">Guide<\/a>","<a href=\"https:\/\/getdevdone.com\/blog\/category\/hubspot-development\" class=\"advgb-post-tax-term\">HubSpot development<\/a>"],"unlinked":["<span class=\"advgb-post-tax-term\">Guide<\/span>","<span class=\"advgb-post-tax-term\">HubSpot development<\/span>"]},"tags":{"linked":["<a href=\"https:\/\/getdevdone.com\/blog\/category\/hubspot-development\" class=\"advgb-post-tax-term\">B2B<\/a>","<a href=\"https:\/\/getdevdone.com\/blog\/category\/hubspot-development\" class=\"advgb-post-tax-term\">Custom development<\/a>","<a href=\"https:\/\/getdevdone.com\/blog\/category\/hubspot-development\" class=\"advgb-post-tax-term\">Email development<\/a>","<a href=\"https:\/\/getdevdone.com\/blog\/category\/hubspot-development\" class=\"advgb-post-tax-term\">HubSpot CMS<\/a>"],"unlinked":["<span class=\"advgb-post-tax-term\">B2B<\/span>","<span class=\"advgb-post-tax-term\">Custom development<\/span>","<span class=\"advgb-post-tax-term\">Email development<\/span>","<span class=\"advgb-post-tax-term\">HubSpot CMS<\/span>"]}},"comment_count":"0","relative_dates":{"created":"Posted 6 years ago","modified":"Updated 3 weeks ago"},"absolute_dates":{"created":"Posted on December 19, 2019","modified":"Updated on May 22, 2026"},"absolute_dates_time":{"created":"Posted on December 19, 2019 7:35 pm","modified":"Updated on May 22, 2026 10:42 am"},"featured_img_caption":"","series_order":"","featured_image_urls":{"thumbnail_723x315":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2019\/12\/29090041\/Hubspot-modular-custom-coded-templates-400x315.png","thumbnail_723x315-2x":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2019\/12\/29090041\/Hubspot-modular-custom-coded-templates.png","thumbnail_723x315-3x":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2019\/12\/29090041\/Hubspot-modular-custom-coded-templates.png","thumbnail_770x510":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2019\/12\/29090041\/Hubspot-modular-custom-coded-templates.png","thumbnail_770x510-2x":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2019\/12\/29090041\/Hubspot-modular-custom-coded-templates.png","thumbnail_770x510-3x":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2019\/12\/29090041\/Hubspot-modular-custom-coded-templates.png"},"featured_post_color":"#4d67e6","author_avatar":"https:\/\/secure.gravatar.com\/avatar\/97bd036a871c68c70de0956108719ad9489849769ee15e25e0bee81f3bdd7286?s=96&d=mm&r=g","author_position":"COO of GetDevDone","reading_time":"<span class=\"span-reading-time rt-reading-time\"><span class=\"rt-label rt-prefix\"><\/span> <span class=\"rt-time\"> 6<\/span> <span class=\"rt-label rt-postfix\">min read<\/span><\/span>","prev_post":{"slug":null,"name":null},"next_post":{"slug":"progressive-web-apps-for-e-commerce-get-an-edge-over-your-competition","name":"Progressive Web Apps for eCommerce: Get an Edge Over Your Competition"},"related_posts":["difference-between-b-and-strong-your-short-guide","web-accessibility-is-more-relevant-than-you-think","wcag-2-2-new-success-criteria"],"_links":{"self":[{"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/posts\/7092","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/comments?post=7092"}],"version-history":[{"count":32,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/posts\/7092\/revisions"}],"predecessor-version":[{"id":26195,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/posts\/7092\/revisions\/26195"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/media\/16450"}],"wp:attachment":[{"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/media?parent=7092"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/categories?post=7092"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/tags?post=7092"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}