I am going to show you how to code for an email template, to be used for email campaigns. You can use this with Zoho, MailChimp etc.
When you are coding an email template by your own (or you can choose and modify an one with the templates given by the campaign manager, Zoho,Mailchimp) you should know something about what it is, what are the limitations, etc.
When you are writing an Email Template you can use any type of web designing languages, such as HTML, CSS, Jquery etc. But those languages should be supported by the service provider (Mailchimp,Zoho).
And you can't use Div tags in the code, because it will mess up all the things, it will not work when you send it as an email. You should use Table tags instead.
I will show you some examples.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">body{
font-family:Arial !important;
}</style>
</head>
<body bgcolor="#F5F5F5">
<table style="font-family: Arial;" width="640" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr style="font-size:12px;">
<td width="180" height="40"><a href="http://twcambulettes.com/email/logo.png"><img src="http://twcambulettes.com/email/logo.png" border="0" alt="logo" width="154" height="24"></a></td>
<td align="center"><a style="text-decoration:none" href="http://dynamicdataconcepts.com/solutions" target="blank"><font color="#1995ec">S</font><font color="#000000">OLUTIONS</font></a></td>
<td align="center"><a style="text-decoration:none" href="http://dynamicdataconcepts.com/services" target="blank"><font color="#1995ec">S</font><font color="#000000">ERVICES</font></a><a href="http://dynamicdataconcepts.com/solutions" target="blank"></a></td>
<td align="center"><a style="text-decoration:none" href="http://dynamicdataconcepts.com/about/" target="blank"><font color="#1995ec">A</font><font color="#000000">BOUT US</font></a><a href="http://dynamicdataconcepts.com/solutions" target="blank"></a></td>
<td align="center"><a style="text-decoration:none" href="http://dynamicdataconcepts.com/contact/" target="blank"><font color="#1995ec">C</font><font color="#000000">ONTACT</font></a><a href="http://dynamicdataconcepts.com/solutions" target="blank"></a></td>
<td align="center"><a style="text-decoration:none" href="http://dynamicdataconcepts.com/events/" target="blank"><font color="#1995ec">E</font><font color="#000000">VENTS/DEMOS</font></a><a href="http://dynamicdataconcepts.com/solutions" target="blank"></a></td>
<td align="center"><a style="text-decoration:none" href="http://dynamicdataconcepts.com/whats-new/" target="blank"><font color="#1995ec">W</font><font color="#000000">HAT'S NEW</font></a><a href="http://dynamicdataconcepts.com/solutions" target="blank"></a></td>
</tr>
</table></td>
</tr>
<tr>
<td><img src="http://dynamicdataconcepts.com/wordpress/wp-content/uploads/2013/11/linetop.png" alt="" border="0" width="640px"></td>
</tr>
<tr bgcolor="#F5F5F5">
<td><table width="100%" border="0" cellspacing="0" cellpadding="7">
<tr>
<td width="415" valign="top" bgcolor="#FFFFFF" style="padding:5px;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="1%"> </td>
<td width="61%" valign="top" style="color:#085978; padding-bottom:18px; line-height:16.8px; padding-top:7px; font-size:13px;">It takes a village to raise a child, and when you're taking the responsibility for hundreds of students you'll need the help of a whole lot of villages. While 360° Solutions doesn't build cities, it does help you with every other aspect of school management. Using the various tools in 360° Solutions, the tasks of all employees will be simplified and streamlined, plus your entire school community will be united with the single goal of providing the education excellence every child deserves.
<br />
<br />
<div style="width:270px; margin:auto;"><a href="http://dynamicdataconcepts.com/events/" style="text-decoration: none; color:#FFFFFF; background:#983C2B; padding:10px 90px 10px 90px; font-size:13px; font-weight:bold; text-align:center;">JOIN A DEMO</a><br /><br /><br />
<a href="http://dynamicdataconcepts.com/events/" style="text-decoration: none; color:#FFFFFF; background:#FBBB29; padding:10px 30px 10px 30px; font-size:13px; font-weight:bold; text-align:center;">VISIT US AT UPCOMING EVENTS</a><br /><br />
<br />
<a href="http://dynamicdataconcepts.com/events/" style="text-decoration: none; color:#FFFFFF; background:#085978; padding:10px 45px 10px 45px; font-size:13px; font-weight:bold; text-align:center;">JOIN AN ED TECH WEBINAR</a>
</div>
</td>
</tr>
</tr>
<tr>
<td colspan="3" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
</table></td>
</tr>
</table></td>
<td width="160" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0" >
<tr>
<td style="text-align:center"><br />
<a href="http://dynamicdataconcepts.com/contact/"><img id="cont" src="http://dynamicdataconcepts.com/wordpress/wp-content/uploads/2014/01/contact-image.png" alt="" border="0" width="120px"></a> <br /> </td>
</tr>
<tr>
<td style="text-align:center"> <font style="font-size: 14px; font: Arial; line-height:20px;color: #5b5959;">For More Information <br />
Or to schedule Demo</font> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td style="text-align:center;">
<table align="center" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="text-align:center;"><img src="http://dynamicdataconcepts.com/wordpress/wp-content/uploads/2013/11/client.png" alt="" border="0" width="160"></td>
</tr>
</table> </td>
</tr>
</table> </td>
</tr>
<tr>
<td colspan="3" style="text-align:center;">
<table width="100%" align="center" border="0" cellspacing="0" cellpadding="0">
<a href="http://dynamicdataconcepts.com/events/"><img src="http://dynamicdataconcepts.com/wordpress/wp-content/uploads/2013/11/calendar.png" width="100%" border="0" alt=""></a>
<tr>
<td valign="top" width="210"><p style="border:2px solid #717171; height:135px; padding:7px; font-size:11px;"><font color="#4e8b9e">Overwhelmed by Tuition Contracts? </font><br />
See how it's done with 360° Solutions: <a href="https://www.youtube.com/watch?v=XP7sfrQtdPc"><img src="http://dynamicdataconcepts.com/wordpress/wp-content/uploads/2013/11/videosnap.png" alt="" border="0" width="120px" style="margin-top: 25px;"></a></p> </td>
<td> </td>
<td valign="top" width="210"><p style="border:2px solid #717171; height:135px; padding:7px; font-size:11px;">
Have your school run on auto-pilot with
<font color="#4e8b9e">360° Solutions Attendance and Compliance Monitoring </font><br />
<a href="http://youtu.be/L2DWPTNAJ7M"><img src="http://dynamicdataconcepts.com/wordpress/wp-content/uploads/2014/01/Attendance.png" alt="" border="0" width="120px" style="margin-top: 10px;"></a></p> </td>
<td> </td>
<td valign="top" width="210"><p style="border:2px solid #717171; height:135px; padding:7px; font-size:11px;"><font color="#4e8b9e">How does your school do admissions?</font><br />
See the 360° difference:<br /><br />
<a href="http://youtu.be/7jCnaTizgbI"><img src="http://dynamicdataconcepts.com/wordpress/wp-content/uploads/2014/01/Admissions-Thumbnail3.png" alt="" border="0" width="120px" style="margin-top: 10px;"></a></p> </td>
</tr>
</table>
</td>
</tr>
</table></td>
</tr>
<tr>
<td style="background:#085977; color: #FFFFFF; font-size: 13px; font-weight: bold; line-height: 16px;
padding-top: 15px; padding-bottom: 15px;">
<table width="90%" border="0" cellspacing="0" cellpadding="0" style="margin-left:50px; font-size:10px !important;">
<tr>
<td width="22%" align="left" valign="top">ROLLS</td>
<td width="14%" align="left" valign="top">SERVICES</td>
<td width="17%" align="left" valign="top">SOLUTIONS</td>
<td width="24%" align="left" valign="top">COMPONENTS</td>
<td width="23%" align="left" valign="top">COMPANY</td>
</tr>
<tr>
<td class="footertext1"><a href="http://dynamicdataconcepts.com/roles/executive-director/" ><font color="white" style="font-size: 9px;">Executive Director</font></a> </td>
<td class="footertext12"><a href="http://dynamicdataconcepts.com/solutions/k-12/" ><font color="white" style="font-size: 9px;">K-12</font></a> </td>
<td class="footertext14"><a href="http://dynamicdataconcepts.com/services/implementation/" ><font color="white" style="font-size: 9px;">Implementation</font></a> </td>
<td class="footertext16"><a href="http://dynamicdataconcepts.com/registration/" ><font color="white" style="font-size: 9px;">Online Registration</font></a> </td>
<td class="footertext18"><a href="http://dynamicdataconcepts.com/about/" ><font color="white" style="font-size: 9px;">About Us</font></a> </td>
</tr>
<tr>
<td class="footertext2"><a href="http://dynamicdataconcepts.com/roles/fundraising/" ><font color="white" style="font-size: 9px;">Development Director</font></a> </td>
<td class="footertext13"><a href="http://dynamicdataconcepts.com/solutions/non-profit/" ><font color="white" style="font-size: 9px;">Non-Profit</font></a> </td>
<td class="footertext15"><a href="http://dynamicdataconcepts.com/services/customization/" ><font color="white" style="font-size: 9px;">Customization</font></a> </td>
<td class="footertext17"><a href="http://dynamicdataconcepts.com/gradebook/" ><font color="white" style="font-size: 9px;">Online Gradeook</font></a> </td>
<td class="footertext19"><a href="http://dynamicdataconcepts.com/careers/" ><font color="white" style="font-size: 9px;">Careers</font></a> </td>
</tr>
<tr>
<td class="footertext3"><a href="http://dynamicdataconcepts.com/roles/financial-office/"><font color="white" style="font-size: 9px;">CFO</font></a> </td>
<td align="left" valign="top"> </td>
<td class="footertext15"><a href="http://dynamicdataconcepts.com/services/training/" ><font color="white" style="font-size: 9px;">Training</font></a> </td>
<td class="footertext17"><a href="http://dynamicdataconcepts.com/business-intelligence/" ><font color="white" style="font-size: 9px;">Business Intelligence</font></a> </td>
<td><a href="http://dynamicdataconcepts.com/contact/" class="footertext19" ><font color="white" style="font-size: 9px;">Contact</font></a></td>
</tr>
<tr>
<td class="footertext4"><a href="http://dynamicdataconcepts.com/roles/admissions/" ><font color="white" style="font-size: 9px;">Admissions Director</font></a> </td>
<td align="left" valign="top"> </td>
<td class="footertext15"><a href="http://dynamicdataconcepts.com/services/support/" ><font color="white" style="font-size: 9px;">Support</font></a> </td>
<td class="footertext17"><a href="http://dynamicdataconcepts.com/tuition-contracts/" ><font color="white" style="font-size: 9px;">Online Tuition Contracts</font></a> </td>
<td align="left" valign="top"> </td>
</tr>
<tr>
<td class="footertext4"><a href="http://dynamicdataconcepts.com/roles/registrar/" ><font color="white" style="font-size: 9px;">Registrar</font></a> </td>
<td align="left" valign="top"> </td>
<td align="left" valign="top"> </td>
<td align="left" valign="top"> </td>
<td align="left" valign="top"><table width="30%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="social1"><a href="https://www.facebook.com/ddc360"><img src="http://twcambulettes.com/email/facebook.png" alt="" border="0"></a></td>
<td class="social2"><a href="https://twitter.com/ddc360"><img src="http://twcambulettes.com/email/twitter.png" border="0" alt=""></a></td>
<td class="social3"><a href="https://www.youtube.com/channel/UCDhSH4o3ISjB8NOYNCoP6gw"><img src="http://twcambulettes.com/email/Youtube.png" alt="" border="0"></a></td>
</tr>
</table></td>
</tr>
<tr>
<td class="footertext4"><a href="http://dynamicdataconcepts.com/roles/it-manager/" ><font color="white" style="font-size: 9px;">IT Manager</font></a> </td>
<td align="left" valign="top"> </td>
<td align="left" valign="top"> </td>
<td align="left" valign="top"> </td>
<td align="left" valign="top"> </td>
</tr>
<tr>
<td class="footertext4"><a href="http://dynamicdataconcepts.com/roles/principal/" ><font color="white" style="font-size: 9px;">Principal</font></a> </td>
<td align="left" valign="top"> </td>
<td align="left" valign="top"> </td>
<td align="left" valign="top"> </td>
<td align="left" valign="top"> </td>
</tr>
<tr>
<td class="footertext4"><a href="http://dynamicdataconcepts.com/roles/teacher/" ><font color="white" style="font-size: 9px;">Teacher</font></a> </td>
<td align="left" valign="top"> </td>
<td align="left" valign="top"> </td>
<td align="left" valign="top"> </td>
<td align="left" valign="top"> </td>
</tr>
<tr>
<td class="footertext4"><a href="http://dynamicdataconcepts.com/roles/parents-students/" ><font color="white" style="font-size: 9px;">Parents & Students</font></a> </td>
<td align="left" valign="top"> </td>
<td align="left" valign="top"> </td>
<td align="left" valign="top"> </td>
<td align="left" valign="top"> </td>
</tr>
<tr>
<td class="footertext4"><a href="http://dynamicdataconcepts.com/roles/transportation/" ><font color="white" style="font-size: 9px;">Transportation</font></a> </td>
<td align="left" valign="top"> </td>
<td align="left" valign="top"> </td>
<td align="left" valign="top"> </td>
<td align="left" valign="top"> </td>
</tr>
<tr>
<td class="footertext4"><a href="http://dynamicdataconcepts.com/roles/transportation/" ><font color="white" style="font-size: 9px;">Coordinator</font></a> </td>
<td align="left" valign="top"> </td>
<td align="left" valign="top"> </td>
<td align="left" valign="top"> </td>
<td align="left" valign="top"> </td>
</tr>
</table> </td>
</tr>
</table>
</body>
</html>
No comments:
Post a Comment