Email Template Design: A Comprehensive guide

12 min readAug 16, 2023
Wanna have this kind of email to be sent out every time a user submits a Request.
Please follow below Steps:
Create a new email layout in System Policy> Email > Layouts or sys_email_layout table.
Copy following code in the Layout field via HTML Source code in the toolbar
<p></p>
<p></p>
<!-- [if gte mso 9]>
<xml>
  <o:OfficeDocumentSettings>
    <o:AllowPNG/>
    <o:PixelsPerInch>96</o:PixelsPerInch>
  </o:OfficeDocumentSettings>
</xml>
<![endif]-->
<p></p>
<!-- [if !mso]><!-->
<p></p>
<!--<![endif]-->
<style type="text/css">
      @media only screen and (min-width: 620px) {
  .u-row {
    width: 600px !important;
  }
  .u-row .u-col {
    vertical-align: top;
  }

  .u-row .u-col-50 {
    width: 300px !important;
  }

  .u-row .u-col-100 {
    width: 600px !important;
  }

}

@media (max-width: 620px) {
  .u-row-container {
    max-width: 100% !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  .u-row .u-col {
    min-width: 320px !important;
    max-width: 100% !important;
    display: block !important;
  }
  .u-row {
    width: calc(100% - 40px) !important;
  }
  .u-col {
    width: 100% !important;
  }
  .u-col > div {
    margin: 0 auto;
  }
}
body {
  margin: 0;
  padding: 0;
}

table,
tr,
td {
  vertical-align: top;
  border-collapse: collapse;
}

p {
  margin: 0;
}

.ie-container table,
.mso-container table {
  table-layout: fixed;
}

* {
  line-height: inherit;
}

a[x-apple-data-detectors='true'] {
  color: inherit !important;
  text-decoration: none !important;
}

table, td { color: #000000; } #u_body a { color: #161a39; text-decoration: underline; } </style>
<!-- [if !mso]><!-->
<p><link href="https://fonts.googleapis.com/css?family=Lato:400,700&amp;display=swap" rel="stylesheet" type="text/css" /></p>
<!--<![endif]--><!-- [if IE]><div class="ie-container"><![endif]-->
<p></p>
<!-- [if mso]><div class="mso-container"><![endif]-->
<table id="u_body" style="border-collapse: collapse; table-layout: fixed; border-spacing: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; vertical-align: top; min-width: 320px; margin: 0 auto; background-color: #f9f9f9; width: 100%;" cellspacing="0" cellpadding="0">
<tbody>
<tr style="vertical-align: top;">
<td style="word-break: break-word; border-collapse: collapse !important; vertical-align: top;"><!-- [if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td align="center" style="background-color: #f9f9f9;"><![endif]-->
<div class="u-row-container" style="padding: 0px; background-color: #f9f9f9;">
<div class="u-row" style="margin: 0 auto; min-width: 320px; max-width: 600px; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; background-color: #f9f9f9;">
<div style="border-collapse: collapse; display: table; width: 100%; height: 100%; background-color: transparent;"><!-- [if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding: 0px;background-color: #f9f9f9;" align="center"><table cellpadding="0" cellspacing="0" border="0" style="width:600px;"><tr style="background-color: #f9f9f9;"><![endif]--> <!-- [if (mso)|(IE)]><td align="center" width="600" style="width: 600px;padding: 0px;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;" valign="top"><![endif]-->
<div class="u-col u-col-100" style="max-width: 320px; min-width: 600px; display: table-cell; vertical-align: top;">
<div style="height: 100%; width: 100% !important;"><!-- [if (!mso)&(!IE)]><!-->
<div style="height: 100%; padding: 0px; border: 0px solid transparent;"><!--<![endif]--><!-- [if (!mso)&(!IE)]><!--></div>
<!--<![endif]--></div>
</div>
<!-- [if (mso)|(IE)]></td><![endif]--> <!-- [if (mso)|(IE)]></tr></table></td></tr></table><![endif]--></div>
</div>
</div>
<div class="u-row-container" style="padding: 0px; background-color: transparent;">
<div class="u-row" style="margin: 0 auto; min-width: 320px; max-width: 600px; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; background-color: #ffffff;">
<div style="border-collapse: collapse; display: table; width: 100%; height: 100%; background-color: transparent;"><!-- [if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding: 0px;background-color: transparent;" align="center"><table cellpadding="0" cellspacing="0" border="0" style="width:600px;"><tr style="background-color: #ffffff;"><![endif]--> <!-- [if (mso)|(IE)]><td align="center" width="600" style="width: 600px;padding: 0px;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;" valign="top"><![endif]-->
<div class="u-col u-col-100" style="max-width: 320px; min-width: 600px; display: table-cell; vertical-align: top;">
<div style="height: 100%; width: 100% !important;"><!-- [if (!mso)&(!IE)]><!-->
<div style="height: 100%; padding: 0px; border: 0px solid transparent;"><!--<![endif]-->
<table style="font-family: 'Lato',sans-serif;" role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="overflow-wrap: break-word; word-break: break-word; padding: 25px 10px; font-family: 'Lato',sans-serif;" align="left">
<table border="0" width="100%" cellspacing="0" cellpadding="0" style="height: 16px;">
<tbody>
<tr style="height: 16px;">
<td style="padding-right: 0px; padding-left: 0px; height: 16px;" align="center"><img title="7d9b1d662b28cd365b33a01a3d0288e1.gif" src="/sys_attachment.do?sys_id=84a1793397603110d55278300153af25" alt="Image" width="154" height="116" align="baseline" border="0" style="border: 0px solid black; align: baseline;" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- [if (!mso)&(!IE)]><!--></div>
<!--<![endif]--></div>
</div>
<!-- [if (mso)|(IE)]></td><![endif]--> <!-- [if (mso)|(IE)]></tr></table></td></tr></table><![endif]--></div>
</div>
</div>
<div class="u-row-container" style="padding: 0px; background-color: transparent;">
<div class="u-row" style="margin: 0 auto; min-width: 320px; max-width: 600px; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; background-color: #161a39;">
<div style="border-collapse: collapse; display: table; width: 100%; height: 100%; background-color: transparent;"><!-- [if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding: 0px;background-color: transparent;" align="center"><table cellpadding="0" cellspacing="0" border="0" style="width:600px;"><tr style="background-color: #161a39;"><![endif]--> <!-- [if (mso)|(IE)]><td align="center" width="600" style="width: 600px;padding: 0px;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;" valign="top"><![endif]-->
<div class="u-col u-col-100" style="max-width: 320px; min-width: 600px; display: table-cell; vertical-align: top;">
<div style="height: 100%; width: 100% !important;"><!-- [if (!mso)&(!IE)]><!-->
<div style="height: 100%; padding: 0px; border: 0px solid transparent;"><!--<![endif]-->
<table style="font-family: Lato, sans-serif; height: 91px; width: 100%;" role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr style="height: 91px;">
<td style="overflow-wrap: break-word; word-break: break-word; padding: 35px 10px 10px; font-family: Lato, sans-serif; height: 91px;" align="left">
<table style="height: 16px; width: 100%;" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr style="height: 16px;">
<td style="padding-right: 0px; padding-left: 0px; height: 16px;" align="center"><img style="border: 0px solid black;" title="Image" src="InfoIcon.pngx" alt="Image" width="87" height="87" border="0" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
<!-- [if (!mso)&(!IE)]><!--></table>
</div>
<!--<![endif]--></div>
</div>
<!-- [if (mso)|(IE)]></td><![endif]--> <!-- [if (mso)|(IE)]></tr></table></td></tr></table><![endif]--></div>
</div>
</div>
<div class="u-row-container" style="padding: 0px; background-color: transparent;">
<div class="u-row" style="margin: 0 auto; min-width: 320px; max-width: 600px; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; background-color: #ffffff;">
<div style="border-collapse: collapse; display: table; width: 100%; height: 100%; background-color: transparent;"><!-- [if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding: 0px;background-color: transparent;" align="center"><table cellpadding="0" cellspacing="0" border="0" style="width:600px;"><tr style="background-color: #ffffff;"><![endif]--> <!-- [if (mso)|(IE)]><td align="center" width="600" style="width: 600px;padding: 0px;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;" valign="top"><![endif]-->
<div class="u-col u-col-100" style="max-width: 320px; min-width: 600px; display: table-cell; vertical-align: top;">
<div style="height: 100%; width: 100% !important;"><!-- [if (!mso)&(!IE)]><!-->
<div style="height: 100%; padding: 0px; border: 0px solid transparent;"><!--<![endif]-->
<table style="font-family: 'Lato',sans-serif;" role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="overflow-wrap: break-word; word-break: break-word; padding: 40px 40px 30px; font-family: 'Lato',sans-serif;" align="left">
<div style="line-height: 140%; text-align: left; word-wrap: break-word;">
<p style="font-size: 14px; line-height: 140%;"><span style="font-size: 18px; line-height: 25.2px; color: #666666;">${notification:body} </span></p>
<p style="font-size: 14px; line-height: 140%;"></p>
</div>
</td>
</tr>
</tbody>
</table>
<table style="font-family: 'Lato',sans-serif;" role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="overflow-wrap: break-word; word-break: break-word; padding: 0px 40px; font-family: 'Lato',sans-serif;" align="left"><!-- [if mso]><style>.v-button {background: transparent !important;}</style><![endif]-->
<div align="left"><!-- [if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="" style="height:52px; v-text-anchor:middle; width:189px;" arcsize="2%"  stroke="f" fillcolor="#18163a"><w:anchorlock/><center style="color:#FFFFFF;font-family:'Lato',sans-serif;"><![endif]--> <a class="v-button" style="box-sizing: border-box; display: inline-block; font-family: 'Lato',sans-serif; text-decoration: none; -webkit-text-size-adjust: none; text-align: center; color: #ffffff; background-color: #18163a; border-radius: 1px; -webkit-border-radius: 1px; -moz-border-radius: 1px; width: auto; max-width: 100%; overflow-wrap: break-word; word-break: break-word; word-wrap: break-word; mso-border-alt: none;" href="/student?id=ticket&amp;sys_id=${sys_id}&amp;table=sc_req_item" target="_blank" rel="noopener"> <span style="display: block; padding: 15px 40px; line-height: 120%;"><span style="font-size: 18px; line-height: 21.6px;">View Request</span></span> </a> <!-- [if mso]></center></v:roundrect><![endif]--></div>
</td>
</tr>
</tbody>
</table>
<table style="font-family: 'Lato',sans-serif;" role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="overflow-wrap: break-word; word-break: break-word; padding: 40px 40px 30px; font-family: 'Lato',sans-serif;" align="left">
<div style="line-height: 140%; text-align: left; word-wrap: break-word;">
<p style="font-size: 14px; line-height: 140%;"><span style="color: #888888; font-size: 14px; line-height: 19.6px;"><em><span style="font-size: 16px; line-height: 22.4px;">Global Service Desk</span></em></span></p>
</div>
</td>
</tr>
</tbody>
</table>
<!-- [if (!mso)&(!IE)]><!--></div>
<!--<![endif]--></div>
</div>
<!-- [if (mso)|(IE)]></td><![endif]--> <!-- [if (mso)|(IE)]></tr></table></td></tr></table><![endif]--></div>
</div>
</div>
<div class="u-row-container" style="padding: 0px; background-color: transparent;">
<div class="u-row" style="margin: 0 auto; min-width: 320px; max-width: 600px; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; background-color: #18163a;">
<div style="border-collapse: collapse; display: table; width: 100%; height: 100%; background-color: transparent;"><!-- [if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding: 0px;background-color: transparent;" align="center"><table cellpadding="0" cellspacing="0" border="0" style="width:600px;"><tr style="background-color: #18163a;"><![endif]--> <!-- [if (mso)|(IE)]><td align="center" width="300" style="width: 300px;padding: 20px 20px 0px;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;" valign="top"><![endif]-->
<div class="u-col u-col-50" style="max-width: 320px; min-width: 300px; display: table-cell; vertical-align: top;">
<div style="height: 100%; width: 100% !important;"><!-- [if (!mso)&(!IE)]><!-->
<div style="height: 100%; padding: 20px 20px 0px; border: 0px solid transparent;"><!--<![endif]-->
<table style="font-family: 'Lato',sans-serif;" role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="overflow-wrap: break-word; word-break: break-word; padding: 10px; font-family: 'Lato',sans-serif;" align="left">
<div style="line-height: 140%; text-align: left; word-wrap: break-word;">
<p style="font-size: 14px; line-height: 140%;"><span style="font-size: 16px; line-height: 22.4px; color: #ecf0f1;">Contact</span></p>
<p style="font-size: 14px; line-height: 140%;"><span style="font-size: 14px; line-height: 19.6px; color: #ecf0f1;">1912 &nbsp;Mcwhorter Road, FL 11223</span></p>
<p style="font-size: 14px; line-height: 140%;"><span style="font-size: 14px; line-height: 19.6px; color: #ecf0f1;">+111 222 333 | Info@company.com</span></p>
</div>
</td>
</tr>
</tbody>
</table>
<!-- [if (!mso)&(!IE)]><!--></div>
<!--<![endif]--></div>
</div>
<!-- [if (mso)|(IE)]></td><![endif]--> <!-- [if (mso)|(IE)]><td align="center" width="300" style="width: 300px;padding: 0px 0px 0px 20px;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;" valign="top"><![endif]-->
<div class="u-col u-col-50" style="max-width: 320px; min-width: 300px; display: table-cell; vertical-align: top;">
<div style="height: 100%; width: 100% !important;"><!-- [if (!mso)&(!IE)]><!-->
<div style="height: 100%; padding: 0px 0px 0px 20px; border: 0px solid transparent;"><!--<![endif]-->
<table style="font-family: 'Lato',sans-serif;" role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="overflow-wrap: break-word; word-break: break-word; padding: 25px 10px 10px; font-family: 'Lato',sans-serif;" align="left">
<div align="left">
<div style="display: table; max-width: 187px;"><!-- [if (mso)|(IE)]><table width="187" cellpadding="0" cellspacing="0" border="0"><tr><td style="border-collapse:collapse;" align="left"><table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse; mso-table-lspace: 0pt;mso-table-rspace: 0pt; width:187px;"><tr><![endif]--> <!-- [if (mso)|(IE)]><td width="32" style="width:32px; padding-right: 15px;" valign="top"><![endif]-->
<table style="width: 32px !important; height: 32px !important; display: inline-block; border-collapse: collapse; table-layout: fixed; border-spacing: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; vertical-align: top; margin-right: 15px;" border="0" width="32" cellspacing="0" cellpadding="0" align="left" height="32">
<tbody>
<tr style="vertical-align: top;">
<td style="word-break: break-word; border-collapse: collapse !important; vertical-align: top;" align="left" valign="middle"><a title="Facebook" href=" " target="_blank" rel="noopener"> <img style="align: baseline;" title="Facebook" src="facebook.pngx" alt="Facebook" width="32" height="32" align="baseline" /> </a></td>
</tr>
</tbody>
</table>
<!-- [if (mso)|(IE)]></td><![endif]--> <!-- [if (mso)|(IE)]><td width="32" style="width:32px; padding-right: 15px;" valign="top"><![endif]-->
<table style="width: 32px !important; height: 32px !important; display: inline-block; border-collapse: collapse; table-layout: fixed; border-spacing: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; vertical-align: top; margin-right: 15px;" border="0" width="32" cellspacing="0" cellpadding="0" align="left" height="32">
<tbody>
<tr style="vertical-align: top;">
<td style="word-break: break-word; border-collapse: collapse !important; vertical-align: top;" align="left" valign="middle"><a title="Twitter" href=" " target="_blank" rel="noopener"> <img style="align: baseline;" title="Twitter" src="twitter.pngx" alt="Twitter" width="32" height="32" align="baseline" /> </a></td>
</tr>
</tbody>
</table>
<!-- [if (mso)|(IE)]></td><![endif]--> <!-- [if (mso)|(IE)]><td width="32" style="width:32px; padding-right: 15px;" valign="top"><![endif]-->
<table style="width: 32px !important; height: 32px !important; display: inline-block; border-collapse: collapse; table-layout: fixed; border-spacing: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; vertical-align: top; margin-right: 15px;" border="0" width="32" cellspacing="0" cellpadding="0" align="left" height="32">
<tbody>
<tr style="vertical-align: top;">
<td style="word-break: break-word; border-collapse: collapse !important; vertical-align: top;" align="left" valign="middle"><a title="Instagram" href=" " target="_blank" rel="noopener"> <img style="align: baseline;" title="Instagram" src="insta.pngx" alt="Instagram" width="32" height="32" align="baseline" /> </a></td>
</tr>
</tbody>
</table>
<!-- [if (mso)|(IE)]></td><![endif]--> <!-- [if (mso)|(IE)]><td width="32" style="width:32px; padding-right: 0px;" valign="top"><![endif]-->
<table style="width: 32px !important; height: 32px !important; display: inline-block; border-collapse: collapse; table-layout: fixed; border-spacing: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; vertical-align: top; margin-right: 0px;" border="0" width="32" cellspacing="0" cellpadding="0" align="left" height="32">
<tbody>
<tr style="vertical-align: top;">
<td style="word-break: break-word; border-collapse: collapse !important; vertical-align: top;" align="left" valign="middle"><a title="LinkedIn" href=" " target="_blank" rel="noopener"> <img style="align: baseline;" title="LinkedIn" src="linkedin.pngx" alt="LinkedIn" width="32" height="32" align="baseline" /> </a></td>
</tr>
</tbody>
</table>
<!-- [if (mso)|(IE)]></td><![endif]--> <!-- [if (mso)|(IE)]></tr></table></td></tr></table><![endif]--></div>
</div>
</td>
</tr>
</tbody>
</table>
<table style="font-family: 'Lato',sans-serif;" role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="overflow-wrap: break-word; word-break: break-word; padding: 5px 10px 10px; font-family: 'Lato',sans-serif;" align="left">
<div style="line-height: 140%; text-align: left; word-wrap: break-word;">
<p style="line-height: 140%; font-size: 14px;"><span style="font-size: 14px; line-height: 19.6px;"><span style="color: #ecf0f1; font-size: 14px; line-height: 19.6px;"><span style="line-height: 19.6px; font-size: 14px;">DEMO &copy; All Rights Reserved</span></span></span></p>
</div>
</td>
</tr>
</tbody>
</table>
<!-- [if (!mso)&(!IE)]><!--></div>
<!--<![endif]--></div>
</div>
<!-- [if (mso)|(IE)]></td><![endif]--> <!-- [if (mso)|(IE)]></tr></table></td></tr></table><![endif]--></div>
</div>
</div>
<div class="u-row-container" style="padding: 0px; background-color: #f9f9f9;">
<div class="u-row" style="margin: 0 auto; min-width: 320px; max-width: 600px; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; background-color: #1c103b;">
<div style="border-collapse: collapse; display: table; width: 100%; height: 100%; background-color: transparent;"><!-- [if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding: 0px;background-color: #f9f9f9;" align="center"><table cellpadding="0" cellspacing="0" border="0" style="width:600px;"><tr style="background-color: #1c103b;"><![endif]--> <!-- [if (mso)|(IE)]><td align="center" width="600" style="width: 600px;padding: 0px;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;" valign="top"><![endif]-->
<div class="u-col u-col-100" style="max-width: 320px; min-width: 600px; display: table-cell; vertical-align: top;">
<div style="height: 100%; width: 100% !important;"><!-- [if (!mso)&(!IE)]><!-->
<div style="height: 100%; padding: 0px; border: 0px solid transparent;"><!--<![endif]-->
<table style="font-family: 'Lato',sans-serif;" role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="overflow-wrap: break-word; word-break: break-word; padding: 15px; font-family: 'Lato',sans-serif;" align="left">
<table style="border-collapse: collapse; table-layout: fixed; border-spacing: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; vertical-align: top; border-top: 1px solid #1c103b; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;" border="0" width="100%" cellspacing="0" cellpadding="0" align="center" height="0px">
<tbody>
<tr style="vertical-align: top;">
<td style="word-break: break-word; border-collapse: collapse !important; vertical-align: top; font-size: 0px; line-height: 0px; mso-line-height-rule: exactly; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;"><span>&nbsp;</span></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- [if (!mso)&(!IE)]><!--></div>
<!--<![endif]--></div>
</div>
<!-- [if (mso)|(IE)]></td><![endif]--> <!-- [if (mso)|(IE)]></tr></table></td></tr></table><![endif]--></div>
</div>
</div>
<div class="u-row-container" style="padding: 0px; background-color: transparent;">
<div class="u-row" style="margin: 0 auto; min-width: 320px; max-width: 600px; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; background-color: #f9f9f9;">
<div style="border-collapse: collapse; display: table; width: 100%; height: 100%; background-color: transparent;"><!-- [if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding: 0px;background-color: transparent;" align="center"><table cellpadding="0" cellspacing="0" border="0" style="width:600px;"><tr style="background-color: #f9f9f9;"><![endif]--> <!-- [if (mso)|(IE)]><td align="center" width="600" style="width: 600px;padding: 0px;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;" valign="top"><![endif]-->
<div class="u-col u-col-100" style="max-width: 320px; min-width: 600px; display: table-cell; vertical-align: top;">
<div style="height: 100%; width: 100% !important;"><!-- [if (!mso)&(!IE)]><!-->
<div style="height: 100%; padding: 0px; border: 0px solid transparent;"><!--<![endif]-->
<table style="font-family: 'Lato',sans-serif;" role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="overflow-wrap: break-word; word-break: break-word; padding: 0px 40px 30px 20px; font-family: 'Lato',sans-serif;" align="left">
<div style="line-height: 140%; text-align: left; word-wrap: break-word;"></div>
</td>
</tr>
</tbody>
</table>
<!-- [if (!mso)&(!IE)]><!--></div>
<!--<![endif]--></div>
</div>
<!-- [if (mso)|(IE)]></td><![endif]--> <!-- [if (mso)|(IE)]></tr></table></td></tr></table><![endif]--></div>
</div>
</div>
<!-- [if (mso)|(IE)]></td></tr></table><![endif]--></td>
</tr>
</tbody>
</table>
<!-- [if mso]></div><![endif]-->
<p></p>
<!-- [if IE]></div><![endif]-->
You can insert the images directly in the HTML field via Insert/Edit image option in the toolbar.
3. Create a New Email Template via System Notification > Email > Templates or sysevent_email_template table. This will act as a container for the layout.
Email Template
4. Create a new Notification with the respective condition and the table as selected in the Template and Thats it!
Add any content in the Notification itself, the Layout will pick it up dynamically.
Hope this will help you in building new custom layouts as per requirements.
Happy Learning!!!!
Deepak Negi.
Follow me on Linkedin
Email Template Design: A Comprehensive guide

Written by Deepak Negi

Responses (1)
