Email Structure

To give you the most optimal experience with our template editor we set them up our templates using multiple tables.  To ensure that the templates you create utilize all the template editor’s functionality we recommend that you follow the same structure we use. Our template table structure is as follows:



<Head> <Title></Title> <Meta /> </Head>
<Body>

<Container>

<Header></Header> <Content></Content> <Footer></Footer>

</Container>

</Body>


Title

The <title> tag will be changed to the Campaign Name once the Campaign is sent. This is used when posting the Campaign to a Facebook wall. It uses the tag, which will be the Campaign Name, as the heading of the post. The tag must be used in the HTML.



Meta Data

The meta name = “description” will be a blank space in all DonorView predesigned templates.  It will appear as follows:



<meta name=”description” content=” ” />

 

This is what dictates the description of the template when it is posted to the Facebook wall.  If the user would like to have a description appear on the Facebook wall, they can enter that description between the blank quotation marks, such as:

 

<meta name=”description” content=”Please be sure to check out our October specials and share them with your friends. ” />

 

This would appear as:



Body

The body table is what gives the template’s it’s background color. In order to help the software identify the body table we put an id of “cv-body” inside of the body’s table tag.


 

<table id=”cv-body”>

 

Container

The container table is what gives the template it’s width and the background color for the email content.  To help the software identify the container table place an id of “cv-container” inside of the container’s table tag.


 

<table id=”cv-container”>

 

Building Blocks

Your email template should be built using building blocks or tables. Each table can be constructed to hold your desired content and can be customize with columns and rows. These tables can also be stacked on top of one another to give you the option of moving them around by dragging and dropping them in the Layout Section of the Email Editor. In order for each table to be recognized by the software you need to add the class “cv-layout-block” to each content table tag.


 

<table class=”cv-layout-block”>

 

Header

The software has a predesigned header that you can use in your templates. If you would like to use this header you will need to create a table with an id of “cv-header-wrap” at the top of your email inside the container. Then inside of that table place a “td” tag with an id of “cv-header-container”.


 

<table id=”cv-header-wrap” width=”100%” cellpadding=”0″ cellspacing=”0″ border=”0″>

<tr>

<td id=”cv-header-container”></td>

</tr>

</table>

 

Footer

The software also has a predesigned footer that can be added to your template If you would like to use this footer you will need to add a table with an id of “cv-footer-wrap” at the bottom of your email inside the container. Then inside of that table place a “td” tag with an id of “cv-footer-container”.


 

<table id=”cv-footer-wrap” width=”100%” cellpadding=”0″ cellspacing=”0″ border=”0″>

<tr>

<td id=”cv-footer-container”></td>

</tr>

</table>

 

Email Preview

Most email clients give the user a preview of the email before they open it. To ensure your email has a preview in these clients you need to add the class “PreviewBlock” and a style of “display:none !important;” inside a “div” tag above your first content block.


 

<div class=”PreviewBlock” style=”display:none !important;”></div>

 

Unsubscribe

Your email template must have at least one unsubscribe link. Usually it is going to be placed in the footer. In order for your unsubscribe link to work you need to add the class “UnsubscribeLink” into the “a” tag.


 

<a href=”#” class=”UnsubscribeLink”>unsubscribe</a>

 

Forward and View in Browser Links
To add a forwarding link in your email you need to add the class “ForwardLink” into the “a” tag.

 

<a href=”#” class=”ForwardLink”>Forward to a friend</a>

 To add a view in browser link to you email you need to add the class “ViewOnWebLink” inside the “a” tag.


 

<a href=”#” class=”ViewOnWebLink”>View in a browser</a>