Before you start
Things you need to know:
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 follow the below structure.
<internal stylesheets></internal stylesheets>
<main table>
<full width row>
<drop zone>
<building block></building block>
</drop zone>
</full width row>
</main table>
Add 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.
Don't add a full-width row inside another full-width row
It will cause 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 as a percentage.
Add 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>
Find out more about how to use the classes in EasyEditor.
Add 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.
Customising 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 specify 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:
Find the
<td data-title="">tag or<div data-title="">tag in the building block element.Customise the value of the
data-titleattribute in that tag. The value that you enter here is displayed as the name of the building block in EasyEditor.
Apply 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"
Add 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.