topic Re: How to code custom drag & drop email templates in HubSpot? - 2023 in CMS Development

How to code custom drag & drop email templates in HubSpot? - 2023

Mainata — Mon, 20 Feb 2023 11:07:01 GMT

Hello everyone,

I've had a bit of a break from HubSpot, but now I've got the next client, and I'm back on the topic with free html/css/huble coding of custom email templates for the new drag-and-drop editor. I can't find any information about it. Unfortunately, Hubspot support provides the usual general information and links, which doesn't help. There is no YouTube Videos on that. Google brings nothing and ChatGPT is also helpless. So I hope that someone in the community or a Hubspot employee has some insides into that issue. Is it still not possible, or are there some tricks?

Any information on that is highly anticipated.

Thank you and Cheers
mainata

Re: How to code custom drag & drop email templates in HubSpot? - 2023

piersg — Tue, 21 Feb 2023 11:56:18 GMT

To be honest, I wouldn't bother with coding one. Coding responsive emails that are also usable with drag and drop is a bit of a nightmare.

In my experience the easiest and most maintainable method is to create an email and use the default Hubspot layouts and blocks to create an example that can be cloned. Changing layouts and what's used where from that point is pretty simple.

Re: How to code custom drag & drop email templates in HubSpot? - 2023

Mainata — Wed, 22 Feb 2023 14:44:51 GMT

Hello @piersg, thank you for your time and your opinion! If life was always that easy, we would all be bored 😉 you know, every customer is different and special, so we have to try to give them what they want or need. Not everyone is happy with the ready-to-go Templates and Modules from HubSpot.

...and to be honest, I've been working with more than 10 email marketing tools in the last few years, and in each one, except HubSpot, you can code templates from scratch. So for a leading tool, it's a pretty bad drawback.

Re: How to code custom drag & drop email templates in HubSpot? - 2023

GRajput — Tue, 07 Mar 2023 07:18:05 GMT

Hi @Mainata

To create custom email templates for the new drag-and-drop editor in HubSpot, you can follow these steps:

Open the HubSpot account and go to the Marketing Hub.

Click on "Files" in the left-hand menu, and then select "Email templates" from the drop-down list.

Click on the "Create template" button to create a new email template.

In the pop-up window that appears, select the "Drag and drop editor" option and click "Create."

You will then be taken to the drag-and-drop editor interface. Here, you can use the pre-built modules and elements to create your email template. You can also add your own custom HTML/CSS code using the "Custom HTML" and "Custom CSS" modules.

To add custom HTML code to your template, click on the "Custom HTML" module and then paste your code into the text box that appears.

To add custom CSS code, click on the "Custom CSS" module and then paste your code into the text box that appears.

Once you have added all of your content and customized the design to your liking, click on the "Save" button to save your template.

You can then use this template to create new emails by going to the "Emails" section of the Marketing Hub and selecting "Create email." From there, you can select your custom email template from the "Template" drop-down menu.

Note: It's important to keep in mind that the drag-and-drop editor in HubSpot is designed to be user-friendly and does not require extensive coding knowledge. However, if you want to create more complex templates, you may need to have a good understanding of HTML and CSS coding.

Please mark it as SOLUTION ACCEPTED if you like the solution.

Thank You!

Re: How to code custom drag & drop email templates in HubSpot? - 2023

Mainata — Tue, 07 Mar 2023 14:58:25 GMT

Hi @GRajput,

thank you very much! I really appreciate your time and help. Unfortunately, I can't follow your steps and really understand what do you mean. Where in the Marketing Hub should I do that? In "Design Tools"? I don't think, that your solution is exactly what I need.

I want to code a HTML/CSS/HUBL Template from scratch and the only place to do that should be "Design Tools". I already coded different modules for emails and there are as user-friendly as the HubSpot ones, or even better because the user does not lose time putting the whole thing together. Like this two-column module.

So I hope that you really understand, that I need the real backend way to do that also with an email template. I tried but for the template are too many restrictions and there is no information about if and how.

I think this one is maybe a tough one for the community. If the HubSpot folks do their part to solve this question, it will be fantastic. You know, it shows professionality and that they care about CX. HubSpot is the only tool, I know, that has such a drawback with the email templating. Maybe some information about possibilities and if now not possible, then why and when it will be possible, will be also an acceptable answer, 'cause it should be possible. Otherwise it doesn't fit with the title "one of the leading marketing tools".

thanks a lot and cheers

mainata

Re: How to code custom drag & drop email templates in HubSpot? - 2023

IChampion — Tue, 02 May 2023 15:53:42 GMT

Hey @Mainata,

Did anything come of this?

Just read your post and I'm in the same boat.

Really want to code a new head and footer, especially on mobile to make it stand out (burger nav). Shame we don't have the option to set up an email from scratch.

Re: How to code custom drag & drop email templates in HubSpot? - 2023

Mainata — Wed, 03 May 2023 15:03:22 GMT

Hi @IChampion,

no, unfortunately, there are any news on this one.

I have very, very rarely experienced such intense silence on the part of a tool vendor.

I'm starting to think that the HubSpot guys have no idea what's even possible in this area anyway, and why it's so stupidly limited.

I was able to work around part of the problem when I code my own modules, then I also pack CSS in them. It's not in the head and HubSpot complains with funny hints, but you can ignore it. So I can at least control my modules.

Cheers

mainata

Re: How to code custom drag & drop email templates in HubSpot? - 2023

RMiller7 — Wed, 24 May 2023 14:40:26 GMT

I bought this and I'm looking everywhere for a place to add my code, and it's crazy how much time I've wasted on such a simple task that you could accomplish with Constant Contact ten years ago. There has to be a way to do it.