Here are some advanced tips and tricks when using template variables.
For live code examples visit the Emarsys pre-built content layout 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.
What kinds of fonts can I use?
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.
How can I override fonts?
In order to override fonts in a template, first create a new variable of type Selectable, e.g.: globalfonts.
If you want to disable the override, you must also define one Item Value as initial and select that as default.
In the next step, open the Style Editor and add the following property (and variable) to the font tag:
font {font-family: {variables.globalfonts}}
In the template above the fonts are declared with the font tag. Font declaration and overrides may differ in other templates.
How can I add a background image to my template?
You can add an image variable as a background, which allows you to use different background images in your email campaigns without having to modify the template.
Adding a background image to individual blocks
First, create an Image variable.
Notes
- You must select a default background image here as the variable’s default value. You will be able to change this later in the campaign editor.
- You can use images from external URLs and from the Media Database as well, which you have uploaded previously. When using external URLs, make sure the images stay available through the entire lifetime of your campaigns.
Here is an example HTML code for a table cell containing everything necessary for using the background image. You can adapt this to your template code and add it to the HTML code of the block in which you want to use the background image:
<td height="245" valign="middle" background="{variables.BgImage}" style="background-repeat:no-repeat;" bgcolor="{variables.BgImageFallbackColor}" class="cntbg">
<!--[if gte mso 9]><v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:245px;"><v:fill type="frame" src="{variables.BgImage}" color="{variables.BgImageFallbackColor}" /><v:textbox inset="0,0,0,0"><div><![endif]-->
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tbody><tr>
<td>Your content</td>
</tr>
</tbody></table>
<!--[if gte mso 9]></div></v:textbox></v:rect><![endif]-->
</td>Notes
- BgImage is the variable name for the background image.
- BgImageFallbackColor is the variable name for the fallback background color. Defining a fallback color is recommended as some email clients may not be able to render the background image.
- The
[if gte mso 9]comment in the HTML code is required to ensure that the image is properly rendered in Microsoft Outlook. - Make sure to replace the image dimensions in the example code with those of the actual image.
Once you are done, the image variable will be available for selection as the background image in the Style Settings of the emails created with this template.
Adding a background image to the email
First, create an Image variable.
Notes
- You must select a default background image here as the variable’s default value. You will be able to change this later in the campaign editor.
- You can use images from external URLs and from the Media Database as well, which you have uploaded previously. When using external URLs, make sure the images stay available through the entire lifetime of your campaigns.
Set the body background by adding the following code to the template CSS in the Style Editor:
body { background:{variables.fullBgFallbackColor} url('{variables.fullBgImage}');
-webkit-text-size-adjust:none; -ms-text-size-adjust:none; margin:0; padding:0; }Then include the following HTML code in the first table tag of the template in the Frame Editor:
<table cellspacing="0" cellpadding="0" border="0" width="100%" background="{variables.fullBgImage}"
style="background-repeat:repeat; background-position:top left;" class="gwfw">Where fullBgImage is the variable name for the background image and fullBgFallbackColor is the variable name for the fallback color.
Do not set a background color in the first table as it will not render properly and will cover the background image in Microsoft Outlook.
Once you are done, the image variable will be available for selection as the background image in the Style Settings of the emails created with this template.
If you do not want to use the background image in a campaign, simply replace it with a transparent image in the Style Settings.
How can I add custom margins?
The easiest way to create margins is to use table structure and set the the cells height value. You can use transparent images as well and set the height and width attribute.
First create a variable of type Number - Integer, e.g.: headlinemargintop.
Add the following code to the block of the template:
{variables.headlinemargintop}
For the mobile view you spacings may well be too large, so in this case the margins can be set through mobile classes that are defined in the media query rules.