At least once a week in our marketing team meetings, someone will inevitably sigh and say, "If only we could make HubSpot custom email templates faster..." It's practically a physical reflex at this point.
We've all been there—staring at a blank email builder, trying to recreate your brand's look and feel for the thousandth time, wishing for more flexibility without needing to code every little element.
That's exactly why I want to walk you through this process today.
Picture yourself kicked back at your desk, coffee in hand, whipping up gorgeous emails that perfectly match your brand—all with a few mouse clicks—and catching yourself mumbling under your breath, "This is the life..."
No more wrestling with HTML or begging your developer for help.
With HubSpot's custom email templates and their drag-and-drop functionality, you can design your email marketing to fit your vision of what email creation should be—efficient, flexible, and, dare I say, enjoyable?
Today, we are going to go over how to use the new drag-and-drop feature to build HubSpot custom email templates.
Step 1: Exploring existing email templates in HubSpot
Developers can now add drag-and-drop areas within custom-coded HubSpot email templates.
Meaning that you can define what areas of the email can have content added to them in the email editor.
This drag-and-drop functionality works much like a website page drag-and-drop area.
Now, let’s go into our HubSpot account to see what an email without drag-and-drop areas looks like and then build an email template with drag-and-drop areas.
Inside our HubSpot account, in the main navigation, choose Marketing, and then click on Email.
Notice that these email templates have static sections, such as a logo and a main body area. However, this area is only a rich text module.
Which means there’s very little custom functionality that editors can add to this email.
This isn't good news for marketers who want to make their emails look pretty and dynamic.
Step 2: Create a new custom email layout in HubSpot
Let’s exit out of here and build an email that has drag-and-drop functionality. You’ll need to create a new HTML template from scratch.
In the main navigation, we’re going to go over to Content and then Design Manager. Within the Design Manager, click on Create a new file.
Under "What would you like to build today?" we’re going to select HTML + HubL, then click Next.
Under Template Type, choose Email. This gives you a lot of boilerplate code that you’ll need for the email to work, and you don’t have to build it yourself.
Name the HubSpot custom email template and save it in your preferred folder.
Want to update the location of the template? Head over to the File location and click Change.
Now select a new folder where you would like to create the template. Click Create.
Quick Lesson: HubL (HubSpot Markup Language) is a templating language used in HubSpot to build and customize website pages, emails, and modules.
HubL tags are like instructions you put in your template code. It tells HubSpot how to display content, add logic, or create flexible layouts.
They start and end with curly braces and percent signs, like this:
- {% tag_name %}
Step 3: Adding drag-and-drop areas to HubSpot custom email templates
Before getting all technical, let’s ensure we’re on the same page about drag-and-drop sections.
Adding a drag-and-drop area in custom email layouts is like creating special sections wherein marketers can change the layout, style, and content right inside HubSpot’s email editor.
Without needing to know any code.
These sections are so flexible that developers don’t have to build a new template for every different type of email.
Instead, they can create just a few templates with a general structure.
Then you can use those templates to make many different emails for different purposes and designs, just by dragging and dropping elements like text, images, or columns as needed.
To enable drag-and-drop in your HubSpot custom email templates, you need to add specific HubL tags and structure your template for flexibility:
In the <head> section, insert the drag-and-drop (DND) area stylesheet tag.
Add the following required HUBL tag:
- {% dnd_area_stylesheet %}
This tag is crucial. The content inside a {% dnd_area %} tag defines the default layout and modules that will appear within the drag-and-drop area of the email editor.
Without it, the drag-and-drop areas won’t function properly.
There are also some optional tags you can add to the head that will help with different client rendering.
Check out the documentation to learn more about those different tags.
Now, in the <body> of your template, remove any static modules such as this:
- {% module "main_email_body" path="@hubspot/rich_text" %}
Then, replace it with a drag-and-drop (DND) area:
- {% dnd_area "main_dnd_area" %}
- {% end_dnd_area %}
This block creates a space in your email where users can drop text, images, buttons, columns, and more—without coding.
Step 4: Custom styling your HubSpot email templates with flex layout
A well-designed HubSpot custom email layout looks professional and makes editing easier for your team.
1. Center content with flexbox
- Add a flex rule to your CSS to center elements like logos or footers.
- Wrap these elements in <div> tags with the appropriate class for alignment.
Here’s a simple example of of how to use a flex class within a div element:
- <div class="flex">
- {% module "logo" path="@hubspot/logo" %}
- </div>
- Repeat the same for your footer content:
- <div class="flex">
- <p>Your footer text here</p>
- </div>
2. Customize sections
- Use additional classes or inline styles to adjust padding, background colors, or text alignment as needed.
Step 5: Publishing and using your HubSpot custom email template
Now that we’ve done that, we can go ahead and click Publish Changes at the top.
HubSpot will confirm that your template is now live and available for use. It says, "Nice, your template was published!".
Now, to create a new email using this template, go back over to Marketing Emails. In the main navigation, click on Marketing again, and then Email.
In the top right, click on Create Email, choose Regular, and then click Next.
Hover over the Drag and drop tab, and choose your custom template from the list. Name your email and proceed to the editor.
Step 6: Building and editing emails with drag-and-drop
Within this editor, you should see a “Drop Content Here” area, just like if you were editing a website page with drag-and-drop functionality.
Now you can:
- Add an image (e.g., choose any from your library).
- Add a text area.
- Add columns by just dragging them over.
- Click within the drag-and-drop area to add new columns (up to 4).
- Remove columns if you don’t want them.
- Adjust column sizes to be the same or vary.
It’s really simple and easy, especially for people who have edited pages before on your website.
You can keep adding whatever you want. Once you like it, you can change the settings, review it, and send it to whoever you want.
Step 7: Final review and sending
After designing your email:
- Update the email settings (e.g., subject line, preview text).
- Set up your audience list and review send options.
- Use preview and test tools to ensure rendering across devices.
- Hit Send or Schedule.
That’s a wrap. You’ve just now created a beautifully designed, dynamic email using a drag-and-drop HubSpot custom email template.
Conclusion
The addition of drag-and-drop functionality to HubSpot custom email templates signals a major mindset shift for email marketers using HubSpot.
For marketers, it means autonomy and never-before creative control. For developers, it's a way to build more scalable, flexible systems.
If you haven’t yet started building your HubSpot custom email layout with drag-and-drop, it’s the perfect time to try it.
Especially when you're looking to scale your email marketing efforts and you want to pair quantity with quality.
Frequently asked questions (FAQ) on HubSpot custom email templates
What are HubSpot custom email templates?
They’re reusable email designs you can create in HubSpot to keep your branding consistent.
You can personalize the content while sticking to a reliable layout—ideal for marketing teams that send emails often.
How do I create a custom email template in HubSpot?
Open the Design Manager in HubSpot, click “Create new file,” choose HTML + HubL, and select Email as the template type.
You can also go the no-code route using HubSpot’s drag-and-drop editor.
How do I create a drag-and-drop area in a custom email template?
To make a section editable, enclose it with {% dnd_area %} and {% end_dnd_area %} tags.
This creates a section your team can customize later by dragging in different content blocks.
Can I use drag-and-drop functionality in all HubSpot email templates?
Not always. Drag-and-drop is mainly supported in templates made with HubSpot’s drag-and-drop editor and some CMS Hub templates.
It doesn’t currently work in all coded templates, though HubSpot is working on expanding this feature.