Logo Help Portal
  • Getting Started

    Introduction

    • Onboarding overview
    • Project Initiation
    • Email compliance
    • Account Administration

    Data

    • Data exchange
    • Data onboarding
    • Web data collection
    • Strategic Platform Integrations

    Channels

    • Email onboarding
    • Smart Insight
    • Predict
  • Training

    Resources

    • Introduction
    • Online Self-learning
    • Onboarding Videos

    Events

    • Instructor-led Training
    • Webinars
    • Seminars
    • Training Calendar
  • User Guides

    Strategy

    • Personalization
    • Automation
    • Data Monitoring

    Channels

    • Email
    • Mobile Apps
    • Web
    • Ads
    • SMS

    Add-ons

    • Smart Insight
    • Predict
    • Incentive Recommendation
    • AIM
    • Relational Data
  • News & Support
    Forrester Wave CCCM (Independent Platforms) Report Q4 2019

    News

    • What’s New in the Emarsys Platform
    • Updates from the CSA
    • Pilot-Features
    • Articles on Data Protection and GDPR

    Support

    • Help and Support at Emarsys
    • Managing your user profile
    • Preparing for Black Friday 2019
    • Black Friday 2019 - Best practices
  • |
  • Partners

    Enhance Partners

    • Getting Started as an Emarsys Partner
    • The Emarsys Integration Platform
    • Automation Center Integrations
  • Developers
  • System Status
Need help?
English Deutsch Español Français Русский Türkçe 简体中文 Test New Chat
Sign in
  • Email
  • Email Templates
  • 0 Email Email Templates

In this section:

  • Ordering an email template from Emarsys
  • Working with email templates
  • Email template validation
  • Setting up email template variables
  • Advanced use of email template variables
  • Distributing block-based email templates or campaigns
EDIT
Expand all

Advanced use of email template variables

Updated: June 14, 2019 10:17

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 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.

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}}

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 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.

Was this article helpful?

Have more questions? Submit a request
Return to top

Emarsys is a Leader

You may also be interested in:

Related articles

  • Setting up email template variables
  • Working with email templates
  • Distributing block-based email templates or campaigns
  • Email Style Settings
  • Email template validation
Copyright © 2019 Emarsys eMarketing Systems. All rights reserved
Legal Notice Privacy Policy Master Services Agreement Anti-spam Policy