Install YAMM Feature Request Contact us

Code and create your own template in Gmail using HTML/CSS

Avatar
YAMM Team
Updated
Follow

With YAMM, you can already send campaigns with a simple template. But you can also choose to create an advanced formatted newsletter using HTML and CSS directly in your Gmail draft. This tutorial will show you how to do it.

stars

Goal

If you are code-savvy, specifically in HTML and CSS, you can directly code your template in your Gmail draft and reuse it with YAMM. When you send your email through YAMM, the tool will re-encode it to display the right formatting and styles you have coded in your draft.
 
This is useful if you want to use media queries in your Gmail draft to change your template style depending on your screen size. For example, you can insert media queries in your HTML code to display your newsletter in a different way when opened on mobile phones. It is also more convenient to write your code directly in Gmail than in the developer tool, as explained in this article.
 

What you'll learn

You will learn how to send a mail merge with YAMM using a coded HTML draft saved in Gmail.

timelapse

Time to complete

30 min or more, depending on the complexity of your newsletter's design.
check_circle

Prerequisites

Before beginning this tutorial, you should feel comfortable using HTML and CSS code, and send regular mails with YAMM. If not, please check out our other articles to build simple templates in Gmail.
mode_edit

Running a simple example

In our following example, we are sending invitations to our corporate webinars. The template we will use is entirely coded in HTML and CSS, and the results will appear as shown on the following image:

Note: Thanks to the media queries, the orange and blue colors are reversed when the email is opened from a mobile phone. You can modify the styles to change other elements (like the font size etc.).

To reproduce the same results and send this email template with YAMM, please follow these steps:

1. Activate 'Plain text mode'

The purpose of this is to get rid of any formatting that can cause troubles and overlaps with the HTML code that you'll insert later in this draft:

2. Code your own template in a Gmail draft

Or simply copy the following example code (starting from <html> to </html>), and paste it into your Gmail draft:

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
 
<html>
   <head>
      <style>
         .banner-color {
         background-color: #eb681f;
         }
         .title-color {
         color: #0066cc;
         }
         .button-color {
         background-color: #0066cc;
         }
         @media screen and (min-width: 500px) {
         .banner-color {
         background-color: #0066cc;
         }
         .title-color {
         color: #eb681f;
         }
         .button-color {
         background-color: #eb681f;
         }
         }
      </style>
   </head>
   <body>
      <div style="background-color:#ececec;padding:0;margin:0 auto;font-weight:200;width:100%!important">
         <table align="center" border="0" cellspacing="0" cellpadding="0" style="table-layout:fixed;font-weight:200;font-family:Helvetica,Arial,sans-serif" width="100%">
            <tbody>
               <tr>
                  <td align="center">
                     <center style="width:100%">
                        <table bgcolor="#FFFFFF" border="0" cellspacing="0" cellpadding="0" style="margin:0 auto;max-width:512px;font-weight:200;width:inherit;font-family:Helvetica,Arial,sans-serif" width="512">
                           <tbody>
                              <tr>
                                 <td bgcolor="#F3F3F3" width="100%" style="background-color:#f3f3f3;padding:12px;border-bottom:1px solid #ececec">
                                    <table border="0" cellspacing="0" cellpadding="0" style="font-weight:200;width:100%!important;font-family:Helvetica,Arial,sans-serif;min-width:100%!important" width="100%">
                                       <tbody>
                                          <tr>
                                             <td align="left" valign="middle" width="50%"><span style="margin:0;color:#4c4c4c;white-space:normal;display:inline-block;text-decoration:none;font-size:12px;line-height:20px">Webinars</span></td>
                                             <td valign="middle" width="50%" align="right" style="padding:0 0 0 10px"><span style="margin:0;color:#4c4c4c;white-space:normal;display:inline-block;text-decoration:none;font-size:12px;line-height:20px">Tuesday 14, February 2017</span></td>
                                             <td width="1">&nbsp;</td>
                                          </tr>
                                       </tbody>
                                    </table>
                                 </td>
                              </tr>
                              <tr>
                                 <td align="left">
                                    <table border="0" cellspacing="0" cellpadding="0" style="font-weight:200;font-family:Helvetica,Arial,sans-serif" width="100%">
                                       <tbody>
                                          <tr>
                                             <td width="100%">
                                                <table border="0" cellspacing="0" cellpadding="0" style="font-weight:200;font-family:Helvetica,Arial,sans-serif" width="100%">
                                                   <tbody>
                                                      <tr>
                                                         <td align="center" bgcolor="#8BC34A" style="padding:20px 48px;color:#ffffff" class="banner-color">
                                                            <table border="0" cellspacing="0" cellpadding="0" style="font-weight:200;font-family:Helvetica,Arial,sans-serif" width="100%">
                                                               <tbody>
                                                                  <tr>
                                                                     <td align="center" width="100%">
                                                                        <h1 style="padding:0;margin:0;color:#ffffff;font-weight:500;font-size:20px;line-height:24px">Invitation to Revevol webinar</h1>
                                                                     </td>
                                                                  </tr>
                                                               </tbody>
                                                            </table>
                                                         </td>
                                                      </tr>
                                                      <tr>
                                                         <td align="center" style="padding:20px 0 10px 0">
                                                            <table border="0" cellspacing="0" cellpadding="0" style="font-weight:200;font-family:Helvetica,Arial,sans-serif" width="100%">
                                                               <tbody>
                                                                  <tr>
                                                                     <td align="center" width="100%" style="padding: 0 15px;text-align: justify;color: rgb(76, 76, 76);font-size: 12px;line-height: 18px;">
                                                                        <h3 style="font-weight: 600; padding: 0px; margin: 0px; font-size: 16px; line-height: 24px; text-align: center;" class="title-color">Hi {{Name}},</h3>
                                                                        <p style="margin: 20px 0 30px 0;font-size: 15px;text-align: center;">Join our webinar to discover our latest release. Places are limited, so <b>register now</b>!</p>
                                                                        <div style="font-weight: 200; text-align: center; margin: 25px;"><a style="padding:0.6em 1em;border-radius:600px;color:#ffffff;font-size:14px;text-decoration:none;font-weight:bold" class="button-color">Join the conference</a></div>
                                                                     </td>
                                                                  </tr>
                                                               </tbody>
                                                            </table>
                                                         </td>
                                                      </tr>
                                                      <tr>
                                                      </tr>
                                                      <tr>
                                                      </tr>
                                                   </tbody>
                                                </table>
                                             </td>
                                          </tr>
                                       </tbody>
                                    </table>
                                 </td>
                              </tr>
                              <tr>
                                 <td align="left">
                                    <table bgcolor="#FFFFFF" border="0" cellspacing="0" cellpadding="0" style="padding:0 24px;color:#999999;font-weight:200;font-family:Helvetica,Arial,sans-serif" width="100%">
                                       <tbody>
                                          <tr>
                                             <td align="center" width="100%">
                                                <table border="0" cellspacing="0" cellpadding="0" style="font-weight:200;font-family:Helvetica,Arial,sans-serif" width="100%">
                                                   <tbody>
                                                      <tr>
                                                         <td align="center" valign="middle" width="100%" style="border-top:1px solid #d9d9d9;padding:12px 0px 20px 0px;text-align:center;color:#4c4c4c;font-weight:200;font-size:12px;line-height:18px">Regards,
                                                            <br><b>The Awesome Team</b>
                                                         </td>
                                                      </tr>
                                                   </tbody>
                                                </table>
                                             </td>
                                          </tr>
                                          <tr>
                                             <td align="center" width="100%">
                                                <table border="0" cellspacing="0" cellpadding="0" style="font-weight:200;font-family:Helvetica,Arial,sans-serif" width="100%">
                                                   <tbody>
                                                      <tr>
                                                         <td align="center" style="padding:0 0 8px 0" width="100%"></td>
                                                      </tr>
                                                   </tbody>
                                                </table>
                                             </td>
                                          </tr>
                                       </tbody>
                                    </table>
                                 </td>
                              </tr>
                           </tbody>
                        </table>
                     </center>
                  </td>
               </tr>
            </tbody>
         </table>
      </div>
   </body>
</html>

Your draft should look like this:

The hardest part is done! Now all you need to do is to select your template and send it through YAMM.

3. Select your template in YAMM UI and send it to your mailing list

Go back to your spreadsheet, then click Add-ons > Yet Another Mail Merge > Start Mail Merge, and select your template:

html_template5.PNG

Click 'Send xx emails'. After doing this, your recipients will get the following email:

As you can see, YAMM took your coded email template and replaced it with the right formatting. This feature will let you customize indefinitely your emails! Just make sure to use CSS properties that are supported by Gmail. You'll find the official list here.

Comments

8 comments

Sort by Date Votes
  • Avatar
    Mohammed Saleh

    Now all you need to do is to select your template and send it through YAMM.

    3. Select your template in YAMM UI and send it to your mailing list

    how to do this ?

    0
    Comment actions Permalink
  • Avatar
    YAMM Team

    Hi Mohammed,

    We have added an explanation and a screenshot for this part. Please let us know if this is clear enough, and thanks for your feedback ;-)

    0
    Comment actions Permalink
  • Avatar
    Zach

    How do I link a button? 

    For ref: 

    <div style="font-weight: 200; text-align: center; margin: 25px;"><a style="padding:0.6em 1em;border-radius:600px;color:#ffffff;font-size:14px;text-decoration:none;font-weight:bold" class="button-color">Join the realty revolution</a>
    <a href="mailto:sean@punchlistsc.com"</a>
    </div>

    1
    Comment actions Permalink
  • Avatar
    Benoît Dumeaux

    Bonjour,

    Est-ce-que vous connaissez un service d'éditeur e-mail HTML en drag and drop avec toutes les options de mailing (ajout images, cadres, fonction d'unscribe, titre, boutons…) qui serait :

    • gratuit
    • en ligne
    • donne le code HTML

    ^^

    0
    Comment actions Permalink
  • Avatar
    amit anand (Edited )

    how to Select your template in YAMM UI and send it to your mailing list.

    Please send me the details on my mail to follow the steps 3.

    I have trouble in this part to understand.

     

     

    0
    Comment actions Permalink
  • Avatar
    Ale

    i would like to have a template for my website (https://bloggerrun.com) can anyone suggest to me? 

    0
    Comment actions Permalink
  • Avatar
    Little Odysoo

    Thank you very much for the code but i try to add image and it is not show up. Already check my email setting and it is "Always display images from the recipient" 

    0
    Comment actions Permalink
  • Avatar
    Rémi Le Masson

    Hi,

    Thanks for your post!

    Your issue seems to require a bit of technical investigation. Could you please send an email to our support team support@yet-another-mail-merge.com. Please provide any details, screenshot that can be helpful

    Thanks

    0
    Comment actions Permalink

Please sign in to leave a comment.

Menu

menu
Help us improve this documentation! Was this article helpful?
16 out of 38 found this helpful