How do I build an email template

Most of time I use samples that work well in different email clients.

Here they are:

Row spacer

<tr><td height="21"><img src="blank.png" height="1" width="1"></td></tr>

h2

<tr>
    <td class="less-fontthree" style="color: #292a2f;font-size: 24px;text-transform: uppercase;font-weight: 700;font-family: 'Montserrat';letter-spacing: 1.3px;" data-selector="td.editable">single room
    </td>
</tr>

Heading in the center

<table class="wrapper" width="640" border="0" cellspacing="0" cellpadding="0" align="center" style="background-color: #ffffff;background-repeat: no-repeat;background-size: cover;">
        <tbody>
            
            <tr>
                <td>
                    <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
                    <tbody>
                        <tr><td height="30"><img src="blank.gif" height="1" width="1"></td></tr>
                    <tr>
                    <td height="12"><img src="blank.gif" height="1" width="1"></td>
					</tr>
					<tr>
                    <td width="20"><img src="blank.gif" height="1" width="1"></td>
                    <td class="less-font editable" style="text-align: center;font-size: 18px ;line-height: 20px ;font-family: 'Open Sans';color: #11b46c;font-weight: 700;">Download your platform
                    </td>
                    <td width="20"><img src="blank.gif" height="1" width="1"></td>
                    </tr>
                    <tr><td height="30"><img src="blank.gif" height="1" width="1"></td></tr>
                    </tbody>
                    </table>
                </td>
            </tr>
            
        </tbody>
    </table>

text, button

 <table class="wrapper" width="640" border="0" cellspacing="0" cellpadding="0" align="center" style="background-color: #ffffff;background-repeat: no-repeat;background-size: cover;">
        <tbody>
            
            <tr>
                <td>
                    <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
                    <tbody>
    
                    <tr>
                    <td width="20"><img src="blank.gif" height="1" width="1"></td>
                    <td class="less-font editable" style="text-align: left;font-size: 14px ;line-height: 20px ;font-family: 'Open Sans';color: #000000;font-weight: 400;">To download the MT4 and cTrader trading platforms from your personal client area, please click the button below.
                    </td>
                    <td width="20"><img src="blank.gif" height="1" width="1"></td>
                    </tr>
                    
    
    
                    </tbody>
                    </table>
                </td>
            </tr>
            <tr><td height="21"><img src="images/blank.gif" height="1" width="1"></td></tr>
            <tr>
                <td width="20"><img src="blank.gif" height="1" width="1"></td>
            </tr>
            <tr>
                <td style="padding:20px 20px;text-align:center;font-family:Ubuntu;font-size:20px"><a href="http://test.login.topfx.com.sc/deposit" style="text-decoration:none;" target="_blank"><span class="smallbtn"  style="background: #11b46c;  padding:10px 60px;color:#ffffff;font-size:20px;">DOWNLOAD PLATFORMS</span></a></td>
            </tr>
        </tbody>
    </table>
	

responsive 2 columns

<table style="background:#ffffff" class="wrapper" width="600" border="0" cellspacing="0" cellpadding="0" align="center">
			<tbody><tr>
				<td>
				<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
					
					<tbody><tr>
						<td>
						<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
							<tbody><tr>
							<td width="10"><img src="blank.png" height="1" width="1"></td>
							<td>
							<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
								<tbody><tr>
									<td style="font-size: 0; text-align: center;"><!--[if (gte mso 9)|(IE)]>
									<table width="100%"  cellpadding="0" cellspacing="0" border="0">
									<tr>
									<td width="290"  valign="top">
									<![endif]-->
									<table class="less-width1" border="0" cellspacing="0" cellpadding="0" style="max-width: 290px; width: 100%;display: inline-block;vertical-align: top;">
										<tbody><tr>
											<td width="10"><img src="blank.png" height="1" width="1"></td>
											<td valign="middle">
												
												<img src="http://frontendlove.ru/web/emails/topfx/6/mt4.png" alt="" width="188"  style="width:188px;height:auto" data-selector="div.editable img">
												
											</td>
											<td width="10"><img src="blank.png" height="1" width="1"></td>
										</tr>
										
									</tbody></table>
									<table class="less-width1" border="0" cellspacing="0" cellpadding="0" style="max-width: 290px; width: 100%;display: inline-block;vertical-align: top;">
										<tbody><tr>
											<td width="10"><img src="blank.png" height="1" width="1"></td>
											<td>
											<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
												<tbody>
											
												
												<tr>
													<td height="10"><img src="blank.png" height="1" width="1"></td>
												</tr>
												<tr>
													<td style="font-size: 14px;color:#000000;font-weight: 400;line-height: 24px; text-align:left;" >MT4 is a popular platform that offers a feature-rich, user-friendly interface with high customization ability.</td>
												</tr>
												
											</tbody></table></td>
											<td width="10"><img src="blank.png" height="1" width="1"></td>
										</tr>
									</tbody></table><!--[if (gte mso 9)|(IE)]>
									</td>
									
									</tr>
									</table>
									<![endif]--></td>
								</tr>
								
							</tbody></table></td>
							<td width="10"><img src="blank.png" height="1" width="1"></td>
						</tr>
						</tbody></table></td>
					</tr>
				
				</tbody></table></td>
			</tr>
		</tbody></table>
(Visited 28 times, 1 visits today)

Leave a comment

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