Create email newsletter templates in Postcards - https://designmodo.com/postcards/
How to Import a Custom HTML Email Template from Postcards to HubSpot
Hey guys! Welcome to a new video tutorial where we’ll learn about how to upload a customized email template newsletter to HubSpot. In this tutorial, we’ll use Postcards to build a customized email template and HubSpot to send a customized email to subscribers or clients.
Login into your HubSpot account and in the Marketing menu find Files and Templates and click Design Tools. Here we’ll add our HTML file downloaded from the Postcards App. Click Create a New File and here choose the HTML & HUBL option. Continue to set up the HTML file by choosing the Email and write the File name here, fox example “index”, here choose the location of the file and click the Create button. The index.html file loaded with a default file generated by HubSpot.
From this file I will use only a few important and required tags, for example, the unsubscribe, preferences, company name, and company location tags. For this tutorial I have used the template from our previous tutorial, I removed a few blocks to show only the important parts for this tutorial. Here in the footer, I inserted the required tags by HubSpot. You can see the tags are long and the design doesn’t look good, but the tags will be transformed automatically in the text after we'll add it to HubSpot, and the email will look good.
I’ve inserted the tags directly here in the Postcards editor, I have not touched any lines of code, you see the tags here. For Preferences and unsubscribe buttons, insert the tags right here, these they will be transformed in links automatically after I upload the file to HubSpot. Let me show you this now. Export the template and unarchive the downloaded archive. Open the index.html file in your code editor or text document and copy and paste the code directly into the HubSpot editor, removing the default code from HubSpot. The HTML file is ready, but the images are located on our local computer, so we need to upload them to HubSpot.
Uploading the images is easy. In the HubSpot Marketing menu find Files and Templates and click Files, this is where we will store email images. Open the images folder and drag and drop the images directly here in the browser. The images are now stored on HubSpot and we can use the images in our email template. We have to change the default image directory to HubSpot image directory, for this click on the desired image and copy the File URL. Go to the code editor and find the image directory. Remove and paste the new file URL right here. Ok, here is our image, when we’ll send the email the image will be loaded from HubSpot server.
Now I will copy this part of URL and add it to other images from my email because the path of these URLs is the same for all images. I search the images and copy and paste the new file URL. Let’s preview the email template directly on HubSpot. It looks very good. Look how the tags changed to readable and friendly text with company details. Now the footer looks better because the tags are automatically converted to text, this text you can change into your account on HubSpot and it will always appear automatically in all your emails because it’s required information. Also, let’s test the email on different screens sizes, for example, 600 pixels wide, or 300 pixels wide, looks great. Go back to the code editor and click the Publish Changes button. Now your changes are saved, and you can send a campaign.
Let me show you how to do this. In the left sidebar find the index.html file and right click it. Here in the menu, choose Create Email. Or, you can open the Marketing menu and click Email and in the new window click the Create Email button and select the Classic Editor. Here, you will find all of your customized email templates. Select our template and create an email campaign with the desired name. Here is the email campaign setup. Let’s customize Email details by choosing a name, email address and subject line, click the Done button.
Now I want to test our campaign and send an email. In the left sidebar choose the Send a Test Email, choose the destination and click the Send button. The email is sent, now open your email and check the preview. It looks exactly how I built it in the Postcards App. Now you can send your campaign to clients and subscribers.
I hope you liked this video and it was useful for you, subscribe to our channel for new videos and I hope to see you next time.