Bluecore’s platform gives users access to a powerful email template creation and management tool called the Template Editor. This tool allows users to create and edit static and dynamic content in their emails in real-time, and this guide will show you how to get started with the Template Editor. Unlike other HTML email editors, Bluecore allows marketers to quickly and easily add dynamic content specialized to your customers, such as Best Selling Products or New Arrivals, through selectable modules that can automatically be inserted into email code.
USING THE TEMPLATE EDITOR
Navigate to the Campaigns > Templates tab. If you or your team members have created templates already, they will display on this screen. From here you can:
Edit a template by clicking on one of these templates, or you can create a new one. For this tutorial, let’s create a new template together. Click on the Create new template button. The Template Editor will be displayed as follows:
Add text to the Editor Type “Hello world!” into the Editor on the left pane and click Preview. After a few seconds, the Preview pane should show you a preview of the email.
Add HTML and images to the Editor Now, let’s add some HTML and an image. Click on the Images button above where you typed “Hello world!” to get the image dialog. This dialog shows all of your images in the Bluecore system and allows you to upload new images. To add new images, click on “Upload Image” and select the images you would like to upload. The new images should now appear in the “Images” dialog. The web address you see next to the image in this tool is its URL. Add images to your email by adding the code snippet below to your email: <img src="URL"> where URL is the address of your just uploaded image (it should look similar to /img/bluebot_brands/logo.png)
Add dynamic attributes to the Editor to add dynamically populated product blocks.
Hit preview and your images will appear in the preview pane.
Add Dynamic Content to the Editor Bluecore provides several types of pre-populated dynamic content fields for you to insert into your templates. Insert dynamic content by clicking on the “Dynamic Content” button above the Edit Code field and selecting an option. For this example, we will select Best Sellers. Let’s choose to insert three Best Sellers. After configuring the dynamic content, the code to generate it will automatically pre-populate into the code editor. Hit Preview and your related products will update on the Preview Pane. Note that because these are dynamic products that will be different for each customer, Bluecore shows placeholders for the images. You may format the images and text by editing the HTML on the left pane.
Save the Template Hit Save and enter a name for the template. Let’s call it Awesome Shoes.
BASICS
The following outlines the framework that our team uses internally to build out responsive email templates. This framework relies on effective premailer software that, when enabled, will inline all css styles between standard <style> tags. It also assumes that your premailer software will have spotty support of stacking classes together, for example: class="mobile-hide align-right". It will offer a variety of options to workaround this limitation if it exists.
CSS RESET
The framework begins with a standard block of CSS to be included in all of your templates. This will normalize behavior across email clients, as well as provide standard structure and utility classes to be used as tools for effective responsive template construction.
<head>
<meta name="viewport" content="width=device-width"/>
<meta name="format-detection" content="telephone=no"> <!-- stops ios from altering phone numbers please remember to use <a href="tel:1-800...">1-800...</a> -->
<!-- desktop styles -->
<style type="text/css">
/*
>>>>> CSS standards <<<<<
1. Public Broadcast TeleVision | List css as: position, box-model, typographic, visual;
2. Attributes with a single property should appear inline
3. List comma separated selectors
4. Pre-mailer will make all styles inline before send
*/
/* ========== css reset styles to normalize behaviour ========== */
body {
margin: 0;
padding: 0;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
img {
border: 0 none;
height: auto;
line-height: 100%;
text-decoration: none;
outline: none;
-ms-interpolation-mode: bicubic;
}
a img { border: 0 none; }
/* normalizes image behavior by removing padding on top and bottom in gmail / yahoo */
.image-reset img,
img.image-reset { display: block; }
table,
td {
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
#wrapper-table {
margin: 0;
padding: 0;
}
/* fixes outlook appended ExternalClass to elements */
.ExternalClass {
width:100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
/* normalizes outlook generated view in browser link */
#outlook a {
padding: 0;
}
/* ========== end css reset ========== */
/* ========== utilities ========== */
.desktop-hide {
display: none;
padding: 0;
max-height: 0;
overflow: hidden;
float: left;
font-size: 0;
line-height: 0;
mso-hide: all;
}
.desktop-hide img,
img.desktop-hide {
max-height: 0;
width: 0;
}
.align-left { text-align: left; }
.align-center {text-align: center; }
.align-right { text-align: right; }
#navigation {
background-color: #FFFFFF;
border-top: 1px solid #CACACA;
border-left: 1px solid #CACACA;
border-bottom: 1px solid #CACACA;
border-right: 1px solid #CACACA;
}
#navigation td {
text-align: center;
}
#navigation td a {
color: #606060;
font-family: Arial, Helvetica, sans-serif;
font-style: italic;
font-size: 16px;
text-decoration: none;
}
#navigation .nav-spacer {
background-color: #CACACA;
}
/* ========== end utilities ========== */
/* ========== scaffolding ========== */
.row,
.spacer { }
.fixed-row {}
.block-content {
width: 100%; /* fills column width */
text-align: center; /* centers numbers not necessary for production */
}
/* ========== end scaffolding ========== */
/* ========== custom styles ========== */
/* ========== end custom styles ========== */
</style>
<!-- end desktop styles -->
<!-- responsive styles -->
<style type="text/css" media="only screen and (max-width: 600px)">
@media screen and (max-width: 600px) {
#content-cell { padding: 0 20px; } /* adds some padding to the side of entire template for mobile devices */
div,
p,
a,
li,
span,
td { -webkit-text-size-adjust:none; }
/* ========== utilities ========== */
/* makes images responsive inside columns on mobile devices */
.flex-image {
width: 100% !important;
height: auto;
}
.flex-button {
max-width:600px !important;
width:100% !important;
}
.flex-button a {
display: block !important;
font-size: 18px !important;
}
.mobile-hide { display: none !important; }
.desktop-hide {
display: table !important;
max-height: none !important;
overflow: visible !important;
float: none !important;
font-size: 12px !important;
line-height: 1.5 !important;
}
.desktop-hide td,
td.desktop-hide {
display: inline-table !important;
}
.desktop-hide img,
img.desktop-hide {
max-height: none !important;
width: auto !important;
}
.desktop-hide .flex-image {
width: 100% !important;
}
/* ========== end utilities ========== */
/* ========== scaffolding ========== */
#content-table,
.row,
.fluid-row,
.md-fluid-row,
.row-spacer,
#navigation,
.row .col-1,
.row .col-2,
.row .col-3,
.row .col-4,
.row .col-5,
.row .col-6,
.row .col-7,
.row .col-8,
.row .col-9,
.row .col-10,
.row .col-11,
.col-12 { width: 100% !important; }
.fluid-row .col-1,
.md-fluid-row .col-1 { width: 8.25% !important;}
.fluid-row .col-2,
.md-fluid-row .col-2 { width: 16.5% !important;}
.fluid-row .col-3,
.md-fluid-row .col-3 { width: 25% !important;}
.fluid-row .col-4,
.md-fluid-row .col-4 { width: 33% !important;}
.fluid-row .col-5,
.md-fluid-row .col-5 { width: 41.25% !important;}
.fluid-row .col-6,
.md-fluid-row .col-6 { width: 50% !important;}
.fluid-row .col-7,
.md-fluid-row .col-7 { width: 57.75% !important;}
.fluid-row .col-8,
.md-fluid-row .col-8 { width: 66% !important;}
.fluid-row .col-9,
.md-fluid-row .col-8 { width: 74.25% !important;}
.fluid-row .col-10,
.md-fluid-row .col-10 { width: 82.5% !important; }
.fluid-row .col-11,
.md-fluid-row .col-11 { width: 90.75% !important;}
/* ========== end scaffolding ========== */
/* ========== custom styles ============= */
/* ========== end custom styles ========== */
}
</style>
<style type="text/css" media="only screen and (max-width: 481px)">
@media screen and (max-width: 481px) {
.md-fluid-row .col-1,
.md-fluid-row .col-2,
.md-fluid-row .col-3,
.md-fluid-row .col-4,
.md-fluid-row .col-5,
.md-fluid-row .col-6,
.md-fluid-row .col-7,
.md-fluid-row .col-8,
.md-fluid-row .col-9,
.md-fluid-row .col-10,
.md-fluid-row .col-11 {width: 100% !important;}
}
</style>
<!-- end responsive styles -->
</head>
STRUCTURE
The basic structure of every template is a single body table with a width of 100%, and a container table with a maximum width of 600 pixels.
<body>
<table id="wrapper-table" width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td>
<table id="content-table" width="600" align="center" cellspacing="0" cellpadding="0" border="0">
<tr>
<td id="content-cell">
<!-- email content goes here -->
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
THE GRID
Our teams work off of a grid system that works much like the standard grids we see in web design today, with one caveat: they are built exclusively in tables.
<table id="content-table" width="600" align="center" cellspacing="0" cellpadding="0" border="0">
<tr>
<td id="content-cell">
<!-- begin section -->
<table class="row" width="600" align="center" cellspacing="0" cellpadding="0" border="0">
<tr>
<td>
<!-- section content -->
</td>
</tr>
</table>
<!-- end section -->
<!-- begin section -->
<table class="row" width="600" align="center" cellspacing="0" cellpadding="0" border="0">
<tr>
<td>
<!-- section content -->
</td>
</tr>
</table>
<!-- end section -->
<!-- begin section -->
<table class="row" width="600" align="center" cellspacing="0" cellpadding="0" border="0">
<tr>
<td>
<!-- section content -->
</td>
</tr>
</table>
<!-- end section -->
</td>
</tr>
</table>
Each section or row is based off of a 12 column grid. Each column should be a table with align set to left or right in place of the traditional float property, with a class that signifies the number of columns that table should occupy, with all column classes adding up to 12. For example, a single column table stretching the entire width of the template would have a class=col-12, signifying that this table will occupy all twelve columns. Three evenly spaced columns should each have a class="col-4" adding up to a total of 12 columns. This allows for very flexible layouts that support offset columns as well.
Nested inside each column should be a table with class="block-content" to properly contain the inner content, and then center it within it’s column. This also allows greater flexibility when needing to assign classes to the content within a column. It also allows us to avoid polluting our framework with the dreaded colspan attribute.
<table id="content-table" width="600" align="center" cellspacing="0" cellpadding="0" border="0">
<tr>
<td id="content-cell">
<!-- /\/\/\/\/\ SINGLE COLUMN | FULL WIDTH /\/\/\/\/\ -->
<!-- begin section -->
<table class="row" width="600" align="center" cellspacing="0" cellpadding="0" border="0">
<tr>
<td>
<!-- Single Column -->
<table class="col-12" width="600" align="left" cellspacing="0" cellpadding="0" border="0">
<tr>
<td>
<table class="block-content" align="center" cellspacing="0" cellpadding="0" border="0">
<tr>
<td>
<!-- column content goes here -->
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- end single column -->
</td>
</tr>
</table>
<!-- end section -->
<!-- /\/\/\/\/\ TWO COLUMNS | EQUAL SPACING /\/\/\/\/\ -->
<!-- begin section -->
<table class="row" width="600" align="center" cellspacing="0" cellpadding="0" border="0">
<tr>
<td>
<!-- First Column -->
<table class="col-6" width="298" align="left" cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse; mso-table-lspace:0; mso-table-rspace:0; border-left: 1px; border-right: 1px;">
<tr>
<td>
<table class="block-content" align="center" cellspacing="0" cellpadding="0" border="0">
<tr>
<td>
<!-- column content goes here -->
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- end first column -->
<!-- Second Column -->
<table class="col-6" width="298" align="left" cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse; mso-table-lspace:0; mso-table-rspace:0; border-left: 1px; border-right: 1px;">
<tr>
<td>
<table class="block-content" align="center" cellspacing="0" cellpadding="0" border="0">
<tr>
<td>
<!-- column content goes here -->
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- end second column -->
</td>
</tr>
</table>
<!-- end section -->
<!-- /\/\/\/\/\ THREE COLUMNS | OFFSET SPACING | LEFT AND RIGHT SIDEBARS WITH LARGE CENTER COLUMN /\/\/\/\/\ -->
<!-- begin section -->
<table class="row" width="600" align="center" cellspacing="0" cellpadding="0" border="0">
<tr>
<td>
<!-- First Column | left sidebar -->
<table class="col-3" width="148" align="left" cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse; mso-table-lspace:0; mso-table-rspace:0; border-left: 1px; border-right: 1px;">
<tr>
<td>
<table class="block-content" align="center" cellspacing="0" cellpadding="0" border="0">
<tr>
<td>
<!-- column content goes here -->
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- end first column -->
<!-- Second Column | large center content -->
<table class="col-6" width="298" align="left" cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse; mso-table-lspace:0; mso-table-rspace:0; border-left: 1px; border-right: 1px;">
<tr>
<td>
<table class="block-content" align="center" cellspacing="0" cellpadding="0" border="0">
<tr>
<td>
<!-- column content goes here -->
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- end second column -->
<!-- Third Column | right sidebar -->
<table class="col-3" width="148" align="left" cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse; mso-table-lspace:0; mso-table-rspace:0; border-left: 1px; border-right: 1px;">
<tr>
<td>
<table class="block-content" align="center" cellspacing="0" cellpadding="0" border="0">
<tr>
<td>
<!-- column content goes here -->
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- end third column -->
</td>
</tr>
</table>
<!-- end section -->
</td>
</tr>
</table>
NOTE: You must have the appropriate width assigned to each column, since we cannot support legacy email clients using CSS for width alone. The below table will outline the fixed pixel width of each column type that must be applied.
Wait! Why don’t they all add up to 600px?
Unfortunately for us, certain versions of Outlook present us with an alignment bug. The formula to rectify this is (total width / number of columns) - 2. So for each column, we must take its natural width and subtract two pixels. We then apply the following block styles inline to each column:
style="border-collapse: collapse; mso-table-lspace:0; mso-table-rspace:0; border-left: 1px; border-right: 1px;"
Without this, our last column will always appear to be too big in legacy versions of outlook. The inline styles adjusts the columns so they appear even across all email clients.