Author: Joel A. Kristenson
Last Updated: 1/27/2014
Overview
This article will show you some examples and tips on how to create email templates and paste the code into Trail Blazer as a template. Feel free to utilize any of the code as a shell to get you started. A good rule of thumb when e-blasting is “measure twice, cut once” in other words test, test, test on all available browsers and devices.
Outline
#1 Standard 600px Width – Header, Body and Footer (Trail Blazer Compatible Code for Copying)
#2 Copy and Paste Code into Trail Blazer and Save as a Template
#3 Mobile Friendly Template (Trail Blazer Compatible)
#4 Political or Nonprofit Advanced Template (Header, Body, Right Column, Links, Buttons and Footer)
#5 Related Resources
Tip - Email: When creating email templates focus more on content than an elaborate design like you might want in in a webpage. Don’t link to external style sheets and don’t use JavaScript.
Tip - Article Navigation: Use the Ctrl+F hot key to jump to different sections using keywords like #1, #2, Related Resources
Tip - Developer:
- In HTML <!-- COMMENTS ARE WRITTEN LIKE THIS, USEFUL FOR LEAVING NOTES OR FINDING SECTIONS. -->.
- In CSS /*COMMENTS LOOK */.
- Trail Blazer’s email composer will render code in different ways and sometimes strip it out altogether. For best results use the most basic html and inline css and focus more on content.
#1 Standard 600px Width – Header, Body and Footer (Trail Blazer Compatible Code for Copying)
*Click this button to preview the email in a browser
<!--HEADER/BANNER START-->
<!-- This is the body <tag> where you can switch out the background color, change the font for the entire document, control margins and many other things. Different browsers may or may not play nice with some of these attributes, so test extensively -->
<!--Control the banner image here. It’s highly advised to prep the image to have the same dimensions as the cell/table that will be holding it. You should upload the image to your Trail Blazer Application Menu https://www.trailblz.info/YourDatabaseName/upload.aspx and use that as the source URL-->
<BODY>
<P align=center><IMG border=0 hspace=0 alt="" align=baseline src="http://trailblz.info/license/images/political-email-banner-600px-wide-122px-high.png"></P>
<DIV align=center>
<TABLE style="HEIGHT: 25px; MARGIN-LEFT: auto; WIDTH: 600px; BACKGROUND-COLOR: #cc0000; MARGIN-RIGHT: auto" align=center>
<TBODY>
<TR>
<TD> </TD>
</TR>
</TBODY>
</TABLE>
</DIV>
<!--HEADER/BANNER END-->
<!--CONTENT OF BODY START-->
<DIV align=center>
<TABLE style="MARGIN-LEFT: auto; WIDTH: 600px; MARGIN-RIGHT: auto" cellSpacing=0 cellPadding=0 align=center>
<TBODY>
<TR>
<TD style="HEIGHT: 450px; PADDING-BOTTOM: 10px; TEXT-ALIGN: left; PADDING-TOP: 75px; PADDING-LEFT: 20px; PADDING-RIGHT: 20px; WIDTH: 600px; BACKGROUND-COLOR: #fcfcfc" vAlign=top>Dear Subscriber,<BR><BR><BR>Opening paragraph. <BR><BR><BR>Main content of message goes here. <BR><BR><BR>Closing statements. <BR><BR><BR><BR>Sincerely,<BR><BR><IMG alt=Signature src="http://trailblz.info/license/images/signature-jaun-g-pablo.png" width=140 longDesc="Juan G. Pablo Signature" height=30>
</TD>
</TR>
<!--CONTENT BODY END-->
<!--FOOTER START-->
<!--This is a simple example of a footer that includes hyperlinks to your website and social networks. You will want to upload the images to your Trail Blazer Application Menu and change out the hyperlink URLs with your own. Inside the <Style> tag you can adjust the background color, margins and dimensions of this footer-->
<TR>
<TD style="HEIGHT: 175px; TEXT-ALIGN: center; MARGIN-TOP: 25px; BACKGROUND-COLOR: #2a2a2a">
<SPAN style="COLOR: #c3c3c3"><A style="TEXT-DECORATION: none" href="http://www.juanpabloforcongress.com">
<SPAN style="COLOR: #c3c3c3"><U>www.JuanPabloForCongress.com</U></SPAN></A><BR><BR>Paid for by the Campaign to Elect Juan Pablo for US Congress.</SPAN>
<BR style="COLOR: #c3c3c3">
<SPAN style="COLOR: #c3c3c3">1600 Pennsylvania Ave NW<BR>Washington, DC 20500<BR><BR></SPAN>
<SPAN><A href="https://www.facebook.com/YourFaceBookPage"><IMG style="BORDER-LEFT-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-TOP-WIDTH: 0px; MARGIN-RIGHT: 5px; opacity: 0.9" alt=Facebook src="http://trailblz.info/license/images/fb-35x35-pixels.png" width=35 longDesc="Facebook - Campaign to Elect Juan Pablo" height=35></A></SPAN>
<SPAN><A href="https://www.twitter.com/YourTwitterPage"><IMG style="BORDER-LEFT-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; MARGIN-LEFT: 5px; BORDER-TOP-WIDTH: 0px; opacity: 0.9" alt=Twitter src="http://trailblz.info/license/images/twitter-35x35-pixels.png" width=35 longDesc="Twitter - Campaign to Elect Juan Pablo" height=35></A></SPAN>
</TD>
</TR>
<!--FOOTER END-->
</TBODY>
</TABLE>
</DIV>
</BODY>
Tip - Trail Blazer: Trail Blazer will automatically list your organizations name and address at the bottom of email campaigns. If you have admin access you can control this by following Application Menu > System Manager > Lists > Committee or Organization.
Image 1 of 2
Image 2 of 2
#2 Copy and Paste Code into Trail Blazer and Save as a Template
Copy the code from section #1 into your clipboard by highlighting and clicking Ctrl+C or right-click and select Copy.
Open your Trail Blazer database and follow Application Menu > Email Campaigns > Templates
Click [Search] in the upper left to pull up all of the templates you created and either open one to make modifications or click [+ New] to create a new one. In my example I clicked [+ New] to create and save a new template.
Give the template a Name and Subject Line.
