Here are some advanced tips and tricks when using template variables.
Contents:
- What kinds of fonts can I use?
- How can I override fonts?
- How can I add a background image to my template?
- How can I change the background color of a template?
- How can I change the background color of a CTA button?
- How can I override the CTA button border roundings?
- How can I add custom margins?
For information on what template variables are and how you can set them up, see Setting Up Template Variables.
What kinds of fonts can I use?
Due to security reasons, only Google Fonts are supported for the time being. Support for other fonts is planned for future releases.
How can I override fonts?
In order to override fonts in a template, first create a new variable of type Selectable, e.g.: globalfonts.
Please note that all the Item Values must contain the !important rule.
If you want to be able to disable the override, you must also define one Item Value as initial and select that as default (do not add the !important rule).
In the next step, open the Style Editor and add the following property (and variable) to the font tag:
font {font-family: {variables.globalfonts}}
Please note that 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.
- Only images uploaded to your Media Database can be used as background images; other image sources (such as a URL etc.) are not supported.
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.
- Only images uploaded to your media database can be used as background images, other image sources (such as a URL etc.) are not supported.
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 change the background color of a template?
First create a new variable of type Color, e.g.: bgcolor.
Open the Style Editor tab and add the following CSS property to the body tag:
background:{variables.bgcolor};.
How can I change the background color of a CTA button?
First create a new variable of type Color, e.g.: accentcolor.
Open the Style Editor and add the following CSS property to the CTA button class:
background-color:{variables.accentcolor};.
How can I override the CTA button border roundings?
Please use this carefully, as some Outlook versions do not support the border-radius CSS property, in those cases the roundings are images. This is a workaround, and it needs some deeper understanding how Outlook renders those elements.
First create a variable of type Selectable, e.g.: ctaeditorialborderradius.
Open the Style Editor and add the following CSS property to the CTA button class:
border-radius: {variables.ctaeditorialborderradius};.
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.