Creating a Template

If you are an advanced HTML user you can create your own template rather than choosing one from the Template Library.

Where to begin:

Start with one of these this example templates below. You can also download any of the templates in the Template Library and modify them.

Basic White Template with no repeating sections

Basic White Template with repeating sections

Uploading a Template:

After creating a template you will need to upload to the application.

Note: In order to upload a template, you must request from support to have the template upload feature turned on.

Go here for instructions on uploading a template

Testing a Template:

Test and Test again. Test each time you make a change to your layout, that way if something breaks you can easily determine what caused the problem. You can use the Inbox Preview Assistant to see your email template in all email clients.

Since you will normally need to test a template multiple times we recommend doing the repeated uploading needed for testing using Upload/Download HTML section of Step 2 – Content of the Email Publisher. Once the template is finalized you can upload to the Template Library so it’s available for others to use within your company or business when choosing a Template. Technically your template does not need to be in the Template Library if you are working solo and prefer to edit your HTML file on a local computer you can.

Tips

Make sure you set a font face, size, and color for all fonts. All email client default fonts vary. Make sure to test send your template to find any font issues between email clients. Content that does not have a font face, size, or color defined will inherit the properties of the font tag applied in step 4.

If you define the width of a column, and the column has no content or image, make sure to delete the   character from the code to set the width exactly to your specifications. Otherwise, the   character in the code will cause the width to be 1 pixel larger than defined. You do not need to insert a placeholder image to set column width.

If you define the height of a row, and the row has no image or content, place a space holder image in that row. Some email clients will not properly display a defined height.
If you need a row to be 1 pixel high, place a 1×1 pixel image in the row that is the same color as the background. Make sure to also define the height. This will force the row to display the way you have coded it.

If you have an outside border of the newsletter that is a gradient fade, try to use columns with a background color on the table to set the gradient. This will avoid the use of background images and will display properly no matter how long the newsletter stretches.

Merge Tags:

Merge tags allow you to merge information from your database into your email

Go here for reference on all Merge Tags available.

Note: The system unsubscribe link is required.

Editable Regions:

Create an editable region (used in Step 2 -Content of the Email Publisher) by wrapping a section of content.

Note: The name attribute for each region (below in green) must be unique within the template. You can not have 2 editable regions with the same name.

<!– InstanceBeginEditable name=”Content” –>
Enter your content here.

<!– InstanceEndEditable –>

Note: Your editable regions will get wrapped with a <div> element when using the application’s WYISYG editor. So you can place the Editable tags anywhere that a <div> tag can be injected.

For example: Not correct – This is not possible
<tr>

<!– InstanceBeginEditable name=”Content” –>

<div>

<td>
Enter your editable content here.

</td>
</div>
<!– InstanceEndEditable –>

</tr>

For example: Correct
<tr>
<td>
<div>

<!– InstanceBeginEditable name=”Content” –>

Enter your editable content here.
<!– InstanceEndEditable –>
</div>
</td>

</tr>

Repeating the Editable Region:

Create a repeating editable region (used in Step 2 -Content of the Email Publisher) by wrapping a section of content.

Note: The name attribute for each region (below in green) must be unique within the template. Do not have 2 repeating editable regions with the same name.

Note: You can not nest repeating region.

<!– InstanceBeginRepeat name=”RepeatRegion1” –><!– InstanceBeginRepeatEntry –>
…..

…..

<!– InstanceBeginEditable name=”Content1” –>
Enter your editable content here.

<!– InstanceEndEditable –>
…..

…..

<!– InstanceEndRepeatEntry –><!– InstanceEndRepeat –>

To control how many times a repeating region can repeat use _EntryLimitX

To control the minimum number of entries use _EntryMinimumX. Use zero to allow deleting.

<!– InstanceBeginRepeat name=”RepeatRegion2_EntryLimit10_EntryMinimum0” –><!– InstanceBeginRepeatEntry –>
…..

…..

<!– InstanceBeginEditable name=”Content1” –>
Enter your editable content here.

<!– InstanceEndEditable –>
…..

…..

<!– InstanceEndRepeatEntry –><!– InstanceEndRepeat –>

Define a default font style for the entire document:

A div tag is placed directly after the opening body tag wrapping the entire content of the body tag.

……

</div>

</body>

The system will automatically inject a footer with your information and standard requires links. If you want to use a custom footer you must contact support.

Design Meta Tag:

The meta tag name=”design” is required and used for defining default attributes for the template and for the system injected footer.

The content value is structured like a CSS definition. It uses a list of semicolon-separated entries. Each entry is formatted as key=value.

For Example

You can style links within all editable regions by prefixing the style name with “link.”.

To make all links red:
<meta name=”design” content=”link.color=’red’;”>

To make links have no underline:
<meta name=”design” content=”link.text-decoration=’none’;”>

Combine multiple styles:
<meta name=”design” content=”link.color=’red’; link.text-decoration=’none’;”>

The main design meta tag applies to the whole template, but you can define additional design meta tags to apply only to specifically-named editable regions using the following structure:

The {region name} is not case-insensitive and may contain whitespace. The region name can also be a pattern with wildcards, where * matches any characters, and ? matches any single character.

Example that applies to specific editable region named “Main Image”:
<meta name=”design.Main Image” content=”font-size=’2em’; color=’green’; link.color=’black’; link.text-decoration=’none’; image.maxWidth=’150′; “>

Example that uses a wildcard to match all regions that start with “Call”, which is useful for repeating regions:
<meta name=”design.Call*” content=”font-size=’1.5em’; color=’gray’; link.color=’orange’; link.text-decoration=’underline’;”>

You can restrict images in a specific region, such as a sidebar, to a certain width using this feature:
<meta name=”design.Sidebar” content=”image.maxWidth=’100′;”>

Valid entries are:

Used For	Key	Default Value	Description
template	link.{style-name}		Defines styles to apply to links within editable regions. {style-name} can be any CSS property name, such as color or text-decoration. Links outside editable regions will not be affected. The styles are applied when saving content.
template	image.maxWidth	Usually 650	Defines the maximum image width for any images within editable regions. Should be a number of pixels (without the px). Images outside editable regions will not be affected. The width restriction is applied when saving content.

footer	logo	footerLogo.gif	Filename only, not full path, of the image to use. Can be blank to leave out logo.
footer	logoLinkHref	user property, or system property, or reseller domain	Absolute URL for logo to link to. Can be blank to leave logo unlinked. Ampersands and semicolons in URL may not work properly at this time.
footer	logo2	blank	Filename only, not full path, of the image to use. Can be blank to leave out logo2.
footer	logo2LinkHref	blank	Absolute URL for logo2 to link to. Can be blank to leave logo2 unlinked. Ampersands and semicolons in URL may not work properly at this time.
footer	font-family	Arial, Helvetica, sans-serif	Defines the font family. Same purpose as CSS property of the same name. Accepts the same values.
footer	font-size	12px	Defines the font size. Same purpose as CSS property of the same name. Accepts the same values.
footer	color	#000000	Defines the font color. Same purpose as CSS property of the same name. Accepts the same values.
footer	background-color	#FFFFFF	Defines the background color of the outer table. Same purpose as CSS property of the same name. Accepts the same values. If the width of the outer table is less than 100%, then the background image or color of the message’s body element will surround the footer table.
footer	width	100%	Defines width attribute value of the outer table. Should be either a percentage (with the symbol) or a number of pixels (without the px). If pixels, then this should be >=580px because the 12-column grid is 580px-based.
footer	line-height	1.3 (about 15.6px)	Defines the line height of all text. Same purpose as CSS property of the same name. Accepts the same values
footer	inner-text-align	left	Aligns the text. Should be left, center, or right. Typically this would only ever get set to center if not left.]
footer	align	center	Aligns the outer table. Should be left, center, or right. Will only be effective if width attribute is less than 100%.

Email Marketing Knowledge Base

Where to begin:

Uploading a Template:

Testing a Template:

Tips

Merge Tags:

Repeating the Editable Region:

Define a default font style for the entire document:

Footer:

Design Meta Tag:

Was this article helpful?

Email Marketing Knowledge Base

Where to begin:

Uploading a Template:

Testing a Template:

Tips

Merge Tags:

Repeating the Editable Region:

Define a default font style for the entire document:

Footer:

Design Meta Tag:

Was this article helpful?

Related Articles