Brooke from HubSpot walks through the new drag and drop email template builder. You can now create custom email sections and rearrange them without touching code, making it faster to design templates that fit your brand.
Hey y', all, It's Brooke with HubSpot. Today I'm going to go over the new drag and drop functionality for custom email templates. Drag and drop areas can now be added by the developer within custom email templates. This means you can define what areas of the email can have content added to them in the email editor. This drag and drop functionality acts similarly to a website page drag and drop area. Let's go into our HubSpot account to to see what an email without drag and drop areas look like and then build an email template with drag and drop areas, all right inside of our HubSpot account. In the main navigation, choose Marketing and then click on Email. Now, I've set up an email with no drag and drop, so let's just go ahead and click on that email name to go ahead and edit it. In this email we have the logo and we have a main email body area. However, this area is only a rich text module, which, which means that there's very little custom functionality that editors can add to this email. This isn't a great experience for people who want to make their emails look pretty and dynamic. So let's exit out of here and build an email that has drag and drop functionality. In the main navigation. We're going to go over to Content and then Design Manager. Now within Design Manager, we're going to go ahead and click on Create a new file. Under what would you like to build? Today we're going to choose HTML Hubble. So we're going to click Next and then under template type we're going to choose Email. This is going to give you a lot of boilerplate code that you'll need for the email to work and you don't have to build it yourself. Now we need to give this email a name. So let's call this custom email with drag and drop. And then I made a folder for email templates. So we're going to go ahead and select that and add it to that folder. Now we can click Create. So now that we're inside of our email, inside of our head section, we need to add some Hubble. This Hubble is required. It will not work if you don't add this. So we add in the DND area style sheet tag. Now that we have this DND area style sheet tag, we can go ahead and and add a D and D area within our body. 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. All Right. So now in our body, to add our drag and drop area, we're going to go ahead and delete this module for email template main email body, which renders out that rich text area that we saw. And we're going to go ahead and add in our DND area. And that's all we have to do to make sure that this is a drag and drop emo template. Now I want to add a flex rule just because I think it adds a little bit of extra styling. So let's go ahead and add a flex rule so that everything will be centered in our email and then all we have to do to use this is create a div and add that class to it. So I, I like the logo to be centered in an email. So we're going to just copy over that and add in the class of flex inside of this div and then put in our module for our logo and the same for this P for the footer. I'm going to just copy over this code and then add it into another div with the class of flex and that will add some flex styling to this. All right, now that we've done that, we can go ahead and click Publish changes in the top. And now it says, nice, your template was published. Now let's go back over to our marketing emails. In our main navigation, we're going to click on marketing again and then email in the top right, we're going to click on Create email, click Regular and then choose Next. Now we're going to choose custom and we have two templates. Now we're going to choose the custom email with drag and drop. We're going to hover over it and click choose template. We're going to say email with drag and drop as the name and create email. Now within here you should see a drop content here area, just like if you were editing a website page with drag and drop functionality. So I can go ahead and add in an image and we'll just choose this image that I have here and we can add in some text area and you can add columns by just dragging them over like that. You can also click within the drag and drop area and then you'll see these little buttons to add new columns. So you can have multiple columns, up to four columns. Then you can remove those columns if you don't want them. And then you can also change what size each column is. So you can have them be the same size or you can have one side be bigger or smaller. And it's really simple and easy, especially for people who have edited pages before on your website and they can just keep adding whatever they want and then once you like it, you can go ahead and change the settings and then review and send it to whoever you would like. Alright, so now that's all you have to do to create custom emails with drag and drop functionality. Make sure to check out the developer documentation. To learn more about drag and drop emails, subscribe to the HubSpot Developers YouTube channel and I'll see you in another video. Bye bye bye.
