When you build your own template, we do our best to validate your code and ensure that the result is compliant with industry standards. However, please be aware that the only way to guarantee this, and that Emarsys will be able to support with any issues that arise from these templates, is to submit your design to us and let us build it for you. For more information, see Ordering an email template from Emarsys.
For live code examples visit the Emarsys pre-built template in the style editor and check how to build a structure of variables, what variables can be set for each content element, how to name them.
To create your own template, proceed as follows:
- Open the Channels menu and select Email Campaigns.
- Click Create Email.
Remember to choose Block-Based Editor if you are asked to choose which editor to use. - On the Your Templates page, click one of the two options to Create Template.
- Follow the tabs on the left in order, from top to bottom. These are described in more detail below.
Deleted email templates can be restored. Learn more.
Frame Editor
On the Frame Editor tab, you select the doctype for the email and add the HTML code which provides the basic layout of your email campaign.
A basic frame HTML contains two placeholders: #style# and #body#. These are compulsory elements of the frame HTML code. #style# stands for the code you provided in Style Editor, and #body# represents the blocks you inserted into your template.
Style Editor
The Style Editor is where you paste in the CSS that will determine the style of your email.
Content Blocks
After you've created your frame and style, you can start creating the Content Blocks. You should create a block for every element in your email, including the header and footer.
- Every Content block should start with a block-level element, eg. <div>...</div> or <table>...</table> or <tr>...</tr>. It is the Email template validation engine that defines the required block-level element.
- To insert spaces in the text version of VCE emails, use spaces instead of tabs in the HTML code. Avoid using tabs as they will result in missing spaces between words in the texts.
In order to maintain the best performance of the system, try to limit the number of blocks in a template to 30.
To create a content block, click Create New Block and then paste in your HTML code. This will immediately become visible in the preview pane.
When you have created all your content blocks, they will be available for selection in the column on the left.
The blocks are listed here alphabetically. You can use numerical prefixes to determine the display order (as shown above) so that this reflects the order they will appear in the email.
To create the default view, insert the blocks into the template, either by clicking Insert Into Template on the block itself and then clicking Insert or drag block here, or by simply dragging it into the Insert or drag block here drop zone.
If you click this on a block in the preview pane, you remove it from the preview. If you click this on a block in the Content Blocks list on the left, you delete it from the template entirely.
Editable content - the e-editable attribute
The content you add to your template is by default fixed and will be the same for all your campaigns.
However, if you have some content which needs to be updated campaign by campaign is recommended that you leave this open to editing. Mark the items you want to make editable by including e-editable in that element's tag along with a unique identifier. This way, you can make sure that only those parts of the template are editable which you want people to edit. You can make any text, image or link editable.
<td e-editable="leadText">
Get 10% off!
</td>Please note the following:
- Every e-editable identifier should be unique within each content block. It is also possible to use the same identifier for more blocks. However, if you have two or more items with the same identifier and changing the content in the text editor of only one of the items it will automatically overwrite the content of the items with the same identifier. Other blocks with the same unique identifiers will not be affected.
- Therefore, for example in the case of the Multi-language feature, you must use unique
e-editabletags for each language versions as seen in the code example below:
<e-language locales="en-US">
<span e-editable="editable_name_en">Link EN</span>
</e-language>
<e-language locales="hu-HU">
<span e-editable="editable_name_hu">Link HU</span>
</e-language>Sometimes having the same identifier can be useful, for example if you want to link to the same URL in more than one place in a block. Having the same identifier for the link tags will guarantee that they always point to the same place.
Example of two CTAs with two e-editable links:
<tr>
<td align="center">
<a href="https://mypage.com/1.html" e-editable="ctaurl1" target="_blank" title="Call
to action" class="cta-big">
<span e-editable="cta1">SHOP NOW CTA1</span>
</a>
</td>
</tr>
<tr>
<td align="center">
<a href="https://mypage.com/2.html" e-editable="ctaurl2" target="_blank" title="Call
to action" class="cta-big">
<span e-editable="cta2">SHOP NOW CTA2</span>
</a>
</td>
</tr>The <span> tag is required for text links, with a unique e-editable attribute.
Example of an e-editable image with an e-editable link:
<a href="https://mypage.com" e-editable="bannerurl" target="_blank" title="Banner url">
<img src="http://mypage.com/image.png" e-editable="bannerimage" width="600px" alt="Banner image">
</a>If you want to make an image editable and linkable in the same time, you need to place the <img> tag within the <a> tag and you cannot have any other elements between them, as shown above.
Make sure not to nest tags with the e-editable attribute into each other.
This can cause various problems, such as, the analysis name being impossible to update in the Links tab.
Any such cases need to be corrected on the template level to correct all campaigns built with that template.
An exception to this rules are <span></span> tags within <a><a/> tags.
Optional content - the e-optional attribute
If you think you will regularly need blocks that contain similar, but not identical content, you can define elements within the block to be optional. This means you can define one block with multiple elements and then select in the campaign which elements to use, saving you the effort of creating a unique block for every permutation. This is done by adding the e-optional attribute.
<e-optional name="Shop now CTA">
<tr>
<td align="center">
<a href="" e-editable="shopnowctaurl" target="_blank" title="Shop now CTA" class="cta-big">
<span e-editable="shopnowcta">Shop now</span>
</a>
</td>
</tr>
</e-optional>As with the e-editable attribute, every e-optional name identifier must be unique within each content block. This is what lets you enable or disable the element in the content editor. If you have two or more elements with the same e-optional name identifier, then disabling one in the text editor will automatically disable those elements within that block. Other blocks with the same unique identifiers will not be affected.
Example of a content block with three optional elements:
<e-optional name="Headline">
<tr>
<td align="center" class="lh">
<span e-editable="Headline" class="h1">BIG DISCOUNT!</span>
</td>
</tr>
</e-optional>
<e-optional name="Copy">
<tr>
<td align="center" class="copy-text">
<span e-editable="copy" class="la-copy">Don't miss it, get it now.</span>
</td>
</tr>
</e-optional>
<e-optional name="Shop now CTA">
<tr>
<td align="center" class="dpt20lr10">
<table cellpadding="0" cellspacing="0" border="0" class="olbg1">
<tr>
<td align="center" class="oltd1">
<a href="" e-editable="shopnowurl" target="_blank" title="Shop now CTA" class="cta-big">
<span e-editable="shopnowcta">Shop now</span>
</a>
</td>
</tr>
</table>
</td>
</tr>
</e-optional>In this example, the block has a heading, some text and a call to action button. In the content editor you will be able to decide whether to use one, two or all three of these.
As you can see, you can still use the e-editable attribute within the e-optional one.
Mobile first
With mobile taking an ever-growing share of the e-commerce market, you need to be sure that all your marketing emails look good on mobile devices. All Emarsys templates are mobile-optimized by default (unless explicitly requested otherwise), but the Block-based Editor also provides easy functionality for hiding sections on mobile, defining custom mobile images and mobile previews.
If you are building your own templates, this article can help you make sure that your email design looks good on mobile, as well as desktop: Mobile-optimized custom HTML
Variables
If you build a lot of templates, you can use variables in your HTML and CSS to customize your email campaigns easier. You can then define the values (strings, colors, etc.) of these variables for each template on the Variables tab. For example, you can change the font or background color from one template to the next. For more information on defining variables, see Setting up email template variables.
As you add the value to each variable, you can see the result immediately in the preview pane.
Adding fonts
For compliance reasons you can use
• licensed fonts, or
• locally hosted, offline embedment of fonts.
While some online web fonts have been known to work, we do not support them due to data protection concerns around personal data transfers outside the European Economic Area.
There are two methods of adding custom fonts to a template:
- If you are using a custom font that is available online, you can copy and paste the font face directly into the Style Editor.
- If you have the font file (.woff or .woff2 formats only), you can build your own font face and add that to the Style Editor.
1. Adding a custom font face to a template
You can add custom fonts by pasting the font face directly into the Style Editor of your template. The instructions below show how to add a custom font.
- Open the template for editing, then open the Style Editor.
- Go to the fonts page.
- Search for and select the fonts which you want to use in your template.
- Copy the highlighted URL and paste it into a browser window.
- In the browser, copy the /* latin */ font face.
- In the Style Editor, paste the font face and save the template.
- When you next create a campaign from this template, you will see the new font at the top of the font list in your text formatting toolbar.