Pitch your project

Random text






Blogs

0    
By admin Category Uncategorized, Posted January 24th, 2016
Build an e-mail template with HTML from scratch

Setting up and a basic explanation

So first of we are going to use HTML to make the whole e-mail template, and after that we are going to set it up in Gmail and edit the text fields.

Lets open a text editor of your choice, I use sublime text 2. Start of writing the base of HTML. Lets give it the title “e-mail template”

    < !DOCTYPE html>
    <head>
        <meta content="text/html; charset=UTF-8"/>
        <title>e-mail template</title>
    </head>
    <html>

With that done now, lets start building the main structure.

Create the body and tables

so we want to create like 3 tables. One table for the header, one table for the text content and one for the footer.

<table align="center" border="1" cellpadding="0" cellspacing="0" width="600">
 <tr>
  <td>
   Row 1
  </td>
 </tr>
 <tr>
  <td>
   Row 2
  </td>
 </tr>
 <tr>
  <td>
   Row 3
  </td>
 </tr>
</table>

So now you should see 3 borders, each with the text in it.
Now lets give the top row a colour.

<table align="center" border="1" cellpadding="0" cellspacing="0" width="600">
 <tr>
  <td bgcolor="#70bbd9">
   Row 1
  </td>
 </tr>
 <tr>
  <td>
   Row 2
  </td>
 </tr>
 <tr>
  <td bgcolor="#70bbd9">
   Row 3
  </td>
 </tr>
</table>

Now we should have a header in blue and a footer in blue. The middle row stays blanc, so we can put our text here.

Adding the content

Next we are going to add the content! An image maybe to the top row (header)?

<table align="center" border="1" cellpadding="0" cellspacing="0" width="600">
 <tr>
  <td bgcolor="#70bbd9"style="padding: 10px 0 10px 0;">
       <img src="img/logo.jpg" alt="Text here" class="logo" width="100" height="65" style="padding: 0 0 0 15px;"/>
  </td>
 </tr>
 <tr>
  <td>
   Row 2
  </td>
 </tr>
 <tr>
  <td bgcolor="#70bbd9">
   Row 3
  </td>
 </tr>
</table>

So now that we have put our image to the header, we can write some content on the place were row 2 is.

 <tr>
  <td>
   <h2 align="center">Hello readers this is my title</h2>
   <p>I will place my content in here! This is my e-mail template!</p>
  </td>
 </tr>

Now save your file as a .html and open it with your Internet browser. At your template just hit ctrl+a! (cmd+a for Mac users, is to select all of the content) Now hit ctrl+c (cmd+c).

Saving your template in Gmail.

Now open your Gmail, and open a new message to compose. Where you place your content, hit ctrl+v (cmd+v). now your template you just made is shown in the e-mail. You can customise the title and content in Gmail.

Lets save your template! go to the settings of Gmail, at the top you can see the tab labs, now search for the lab canned response and hit enable.

Go back to your message again with the template in it. Next to the trashcan you will find a small triangle. Hit it and go to canned response and then push save. Give it a title like “mail template”. Now your template is saved!!!

So now every time we go to Gmail and we want to use this template, we just compose a new e-mail, and go to the small triangle on the right, then move to canned response and hit the title that you gave te template.

Posted by Randy Gootjes

Leave a Reply

Your email address will not be published. Required fields are marked *