How to Create Responsive HTML Email Templates

Postcards is a new innovative tool that can be used to create fully responsive and amazing HTML emails. It is built with an easy to use drag and drop feature that makes the designs and customization very easy to build.

In this content, you will learn how to design your very own newsletter using Postcards. It is very efficient, being one of the fastest and most essential tools for skilled excellent templates without the need to have prior coding or design experience.

For those who have had postcards in mind at a time, you can follow this tutorial to get your fully responsive designs up and running. To follow this walkthrough effectively, you can sign up for a free account or better yet, if you already have an account, follow to learn how to make your emails creatively and with a great degree of details.

Email Preview

Emails templates that Postcards can make

You should know that postcards can design a different variety of emails; it all depends on how creative you can get. For this tutorial, we will use to create a mock newsletter. Other types that can be designed are releases, greetings, sales, delivery, editorial, and many more.

Setting up your template

To begin with, you will need to create a template by simply clicking the green plus sign button at the top right of your dashboard. Enter a name you’d love, then click save.

A list where your new template will be added will appear, select it, and this will take you to a template view where creation and editing can be done.

You need to take time out in exploring the site and sections that are present on the right side menu. You can see many functions to work with there. With postcards, things are straight to the point and concise.

Section Selection

From the design in this walkthrough, we will be selecting a design template that has both the header and the menu together. This came as a choice to have them together; in your selection, you can make them separate.

The order of arrangement of the section used is, Header1, Content9, Feature7, Content15, Call to Action2, and finally, Footer8. You will find the names right above the displayed images; you can select them and move on. Even if you don’t select them chronologically, you can always make adjustments.

If you select a section by accident, you can hover over it and click on the trash icon that appears above it. The example below shows you how the template will look like.

Header Customization

When you want to edit any section, hover over the section and select the pencil icon. Once you click on the icon, a side menu will open up by the right with the details for the section selected. For the Header1, you can make changes to the background image or color. You can also add a text, title or even color.

In the general tab section, you can make changes to the background. Postcards help to simplify things by adding the dimensions of the images attached. For instance, the Header1 is 600x320 px. Even if you add or upload a larger resolution, it will render it to the default size.

You can equally change the color of the text from white or whatever it is to your preferred color of choice. At the title tab, right at the bottom, you can see the text color that you can change. We will be changing it to #393b40. You can also change the text title for this template from “Weekly Digest” to “Weekly Newsletter.” After that, you can edit the subtitle in fashion. You can change the date too to when you want it to be released. Don’t also forget the color.

You can upload your brand or business logo at the header tab. All you need to do is upload and resize if need be. If you erase the dimensions set there, postcards will help change it to a default setting of 50px.

When you scroll down the page a little bit, you will find a section where you can add the logo link, and for the menu items too. Only change the URL to that of your link. Editing the menu item is easy; click them. You can start by changing their color, for this, we’re using #393b40. You can also change the links to connect to Instagram, Facebook, Dribble and your website. You can remove any link you don’t want too.

Making out your content

From the template, you will notice that every section has its editing tab. You can change the section’s background under the General tab. From the Heading tab, you can change the “Top Stories” and customize your own “See all.” In this walkthrough, we changed to “New this week” and “Browse the Blog.” We also changed the text color to #393b40. The color of the button text and border was also changed to #979797. You can either remove the arrow or change it to something entirely different.

We have also uploaded a new post image. Postcards are smart enough to round the corners of the image for you. By default, the image size is 520x400px; you can keep it this way or alter it. Even if you resize your picture to be larger or smaller, postcards will help adjust to accommodate the default width.

You should also shed off the parts you don’t need. For example, the subtitle, we do not need it. The release date has been decided, and we are sharing just a single post. You should add space between the text and the image, convert the subtitle to a period and convert it to the same color of the background.

The next thing we are going to do is to add the title of the blog post and update the color to #2d778e. Finally, you can add a description of the blog post of the post text including an inline link too. On the other hand, the link can be edited manually using the source code editor in the tools drop-down menu.

If you are familiar with inline CSS, you can edit the text area. With this editing, you can equally adjust the font size and the weight and the link color, for this walkthrough let’s select #f18e8c.

Time to adjust the feature section to your taste

In a bid to spice up this tutorial, we have added a few sections. The first is the Feature7 section to incite a call for a featured PDF book. We also changed the title to “Featured in this Week’s Post” and included a little description.

The boxes tabs would come with two boxes, but you can delete one or retain both depending on your needs. Start with changing the background. The height will be set only according to the context of use that goes for the title, icons, and description texts. Here, we changed the title to “Brand Visibility checklist” which is the name of the PDF file included, you can then proceed to add a short description. Make sure you add a link in the description yet once more. We changed the link color to white and made the font weight bold using the inline CSS. We also changed the text alignment in the description section to align left.

Proceed to add quotes

To add the quotes you can use the content15 section to feature the quote. We added it to the Blockquote text tab and went ahead to add useful information about the author under the Blockquote tab.

Take note that postcards were not designed to round the image in this section if you want a round image, you’d have to create it and upload it for yourself. But you can edit the colors of the texts that are in this section. Use any color you feel is best for you.

Next is your Call to Action

This email seems lengthy already but to work with it; you can add a call to action right at the button apart from the initial one added, so that makes two CTA buttons. There are different CTA buttons featured on postcards, but we are only choosing the one that is direct and gives us results.

We have also changed the title to “what are you waiting for?” and the button text is now “Read the newest post.” You can pretty much make the button background and text colors look how you want. We are choosing a beautiful shade of pink — #f18e8c and set the value of the text to white. You can remove anything else not needed.

Time to customize the footer

Remember earlier, we chose the Footer8 section, and we changed the text and the title provided in column 1 tab. Put a simple message there for your subscribers and encourage them to always be in touch.

Proceeding to the bottom of the page, you will see the place where you can edit your icons; this is in the first column. We prepared icons like Facebook, Instagram, and Dribble and replaced the default ones there. After replacing the icons, we changed the links too and removed the link we no longer needed. Be careful to edit the default height and width to make sure match your icons. We removed the phone number. We then changed the email color to be in sync with the design that is #f18e8c.

Final touches

After all this, it means you are close to completing the work. Excellent job! Before you go straight away to send the mail, there are a few other things you should know about.

General Settings

You will find a few settings on the right side of your dashboard by default. You can make changes to the overall style from cards to continuous list-style design. We chose a continuous style. This is where you can find where to edit the gray background of the template.

Email template live preview

To make a live preview, you can click on the blue eye icon at the top right corner of your screen. After the preview starts, you can switch between the desktop and mobile look.

Exporting Time!!!

After you are done designing the template, you can follow these easy steps to export. Search for the green button at the top right corner titled export. This activates Postcards to create the HTML code for the design. After the generation is complete, you can download it as a zip file and can get the HTML files including all the images used.

Proceed to copy and paste this code into whatever email marketing software you use such as MailChimp, ConvertKit and any other one. Make sure you replace the texts with their shortcodes in the app you use. Also, make sure you upload all the images and logo used in the template, and you are all set!

Conclusively

Just as demonstrated in this tutorial, using Postcards is very easy, the designs are excellent, and you can use it to create beautiful email templates.

You can have fun with the demo version, but after it expires, you would have to pay a token of $15 every month. Be a part of this amazing new wave and have only the best, professional, and easy to use template builder. The results are inspiring yet simple; with this innovation, you can build very flexible and sleek looking templates for different email styles.

Email marketer and developer.