Adding HTML to email templates

Summary

Recommended starting point

We recommend using our 'Start from scratch' templates as a starting point to create your own email templates. These email templates include the most up-to-date HTML and CSS that make your email campaigns responsive in all email clients.

HTML in email templates must be in the following structure:

<internal stylesheets>
</internal stylesheets>
<main table>
  <full width row>
    <drop zone>
      <building block></building block>
    </drop zone>
  </full width row>
</main table>

Adding a full-width row

Our email templates feature full-width rows, which are separate sections of your email campaign that you can style and add building blocks to. For example, you could use a full-width row to apply a coloured background to a particular section of your email campaign.

Important

Don't add a full-width row inside another full-width row, otherwise the layout of your email campaign will break.

Adding full-width images to full-width rows doesn't work in Microsoft Outlook. For Microsoft Outlook, use conditional comments to apply a wide (but not full-width) value to the image's width.

The structure of full-width rows consists of three tables:

<table class="email-body">
  <table class="email-width">
  <table>
<td class="row-container">
      <dropzone>
<building block></building block>
</dropzone>
</td>
</table
</table
</table>

The email-body table

This element is the full-width table. Any background styles that you apply to this table will stretch across the entire email template.

The email-width table

This element is the fixed width section of the email template.  You can change the default width of an email template by adding some CSS to your templates.

The row-container table data

This element contains all the rows (usually just one, but can be more). Add building blocks to your templates by nesting dropzones and building blocks inside this element.

Microsoft Outlook conditional comments

In our templates, the email-width table and the row-container parent table are wrapped in tables that are in Microsoft Outlook conditional comments. These tables are rendered only in Microsoft Outlook.

Without these tables, your email will not render correctly in Microsoft Outlook.

Pixel widths in Microsoft Outlook

Microsoft Outlook doesn't support widths that have values in percent.

Adding dropzones and building block elements

Building blocks can be added by using <table> tags or <div> tags with the data-title attribute. If you use a table tag, remember to add an entire table structure.

Building blocks must be nested inside a dropzone element, and those dropzone elements must be nested inside a row-container table data element. For example, a 'Text' building block might look something like this:

<div class="ee_dropzone">
   <table class="col-font-reset ee_element ee_textelement" width="100%" ee-type="element" data-title="Text" style="table-layout: auto;">
   <tbody>
   <tr>
   <td class="element-pad element-bord root-element-pad">
      <div class="ee_editable">
         <p>Type text here</p>
      </div>
</td>
</tr>
</tbody>
</table>
</div>

EasyEditor classes

Find out more about how to use the classes in EasyEditor.

Adding empty placeholders for building blocks

Instead of adding building blocks to your email template, you can add empty placeholders so that users can add their own building blocks only to your pre-defined design.

To add an empty placeholder, nest one of the following empty elements between a row-container table data element:

  • <div class="ee_dropzone"></div>
  • <table width="100%"><tbody><tr><td class="ee_dropzone"></td></tr></tbody></table>

These empty elements are dropzone elements that do not contain any building blocks.

EasyEditor_template_markup.gifCustomising the labels of your building blocks

Each building block has a default label that displays the building block's type, for example 'Button'.

Customising the labels of building blocks allows you to specifiy the type of content that should go into that building block. For example, you might want users to use a button building block as a call-to-action. In this case, you could customise the label so that it reads 'Call-to-action'.

To customise the label of a building block:

  1. Find the <td data-title=""> tag or <div data-title=""> tag in the building block element.
  2. Customise the value of the data-title attribute in that tag. The value that you enter here is displayed as the name of the building block in EasyEditor.

EasyEditor_custom_button_label.png

Applying custom styles to your building blocks

If you've added a custom button style or a custom text style to your email template, you can apply that style to a building block by adding that style's custom class to the tag that contains the building block element.

For example, if you have a paragraph style called 'my_new_paragraph style', you can add the following class to the <p> tag for that text building block:

class="my_new_paragraph_style"

Adding a full-width banner

To create a full-width banner, you can insert the following code before or after a full-width row (the <table> tag with the email-body class):

<!-- Full-width Banner Image : BEGIN -->
<table cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="background-color: #3a3a3a;table-layout: auto;" class="banner">
<tbody>
<tr>
<td class="banner-padding text-center" style="font-size: 1px; line-height: 1px;"><img src="https://i.emlfiles.com/cmpimg/2/3/7/1/8/files/7528691_banner.png" style="display: block; width: 100%; height: auto;" alt="New season" border="0" class="banner banner-img ee_editable ee_noresize vedpw800" width="800"></td>
</tr>
</tbody>
</table>
<!-- Full-width Banner Image : END -->

You can change the image in the banner by using the image library.

Have more questions? Submit a request

Comments