Template variables define the Style Settings that a campaign manager can edit when editing email content.
What are template variables?
Template variables give campaign managers a degree of flexibility over the style of an email, by providing a set of editable values in the Style Settings pane of the content manager. Campaign managers can use variables in the HTML source code on content block level. They can apply campaign-level changes to an email, without affecting the original template settings.
You can set as many variables as you want, and then apply the changes in style for every given campaign.
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.
Why use them?
By setting up variables, you increase the number of different email designs that can be created from a single template. You will not have to change the template every time you need to adjust something; you can do it in the campaign right away.
For example, if you want to use a single template for your seasonal collection and change the colors or fonts of the content block instances for each season. Simply define the values as a variable and change them in the email depending on whether you send the campaign in spring or fall. Values of each block instance can be set separately either within the same campaign or in different campaigns.
If you are already familiar with creating template variables, you can find advanced tips and tricks in Advanced use of Template Variables.
Creating a variable
To create a new variable in a template, open the Variables tab to access the settings page.
Click Create Variable to open the dialog box where the settings of the variable can be applied.
The following settings are available:
-
Variable name - The name that will be stored in the CSS (or HTML) of your page in the
background:{variables.bg}format. - Display name - The name of the variable that is shown to the person creating the email and applying the email-level changes to the variable. The display name should be less technical and easy to understand.
- Variable type - The available options are: Color, Image, Number - Decimal, Number - Integer, String and Selectable.
- Default value - The value that will first show up after selecting the variable in the email. Also, the variable can be reset to this value in the campaign.
- Editable by the editor of the campaign - When ticked, the variable will be editable in the campaign.
Here are some examples of the different variable types:
Type: Color
This setting is used for any kind of color setting in the copy, e.g. backgrounds, fonts, margins, etc.
Type: Image
This setting is used for adding an image to your template from an external URL or the Media Database.
When using external URLs, make sure the images stay available through the entire lifetime of your campaigns.
You can use this feature to add background images to individual template blocks or to the entire email. To learn more, see How I can add a background image to my template?
Type: Number - Decimal
This setting is commonly used for line height, or any value that might require a decimal place.
Type: Number - Integer
This setting is usually applied to font sizes, any kind of percentage settings.
Type: String
Type: Selectable
The two most common use cases for this type are alignment and font stack declaration.
This setting allows the campaign manager to select a style option from a drop-down menu.
Adding the variable to the CSS and/or to the HTML
The next step is to place the variables to the template CSS (style settings) and/or into the HTML (Frame or template blocks). Add the variables in the following format: bgcolor="{variables.bg}"
To do this, open the Style Editor tab in the template view.
Add the variables.
You can add variables to the frame or the template blocks, too.
For example, if a table has bgcolor="ffffff" attribute and it is not already styled with CSS, you can simply add bgcolor="{variables.bg}".
You can add variables to other attributes, like width=" " or height=" ", too.
How are these used by the template expert?
When all the template variables are set up, they can be edited by the person editing the actual email content.
Click here to see how these are edited in the email itself, using these four editable variables as an example.