How To Create Optimized Templates
Knowledgebase Article
How To Create Optimized Templates
MailMachine introduces a campaign builder that makes it easy for users to create email campaigns from a library of templates. We've added the possibility for resellers to offer their own templates as well.
The campaign builder lets users create a campaign in multiple ways:
- Choose one of MailMachine's templates, which use the concept of
content zones, - Start with a basic template (a blank layout)
- Let developers paste their code into a
textarea, - Upload a ZIP file that contains both the HTML and the campaign's assets (images or other essential files).
This document explains how to create templates that use content zones.
General considerations
Please follow these basic guidelines when building a template:
- Templates should be 600 pixels wide
- Templates must contain the address of the customer who sends the campaign to comply with anti-spam regulations
- Templates must contain an unsubscribe link.
Structure of a template
Content Zones
We've created a system that makes it easy to add content, with a simple point-and-click interface. To add content to a campaign, users just need to click on the "Add content" button.
Content zones can be visualized as a stack. By adding a new content zone, you add a new item to the stack.
The content zones that are currently offered are:
- Text
- Image
- Image + text
- Text + image
- Text on 2 columns
- Google Maps
- QR code
- Line / separator
- Social widgets
More content zones will be added in the future.
Each content zone can be editable and deletable. Additionally, you can specify that a content zone can be movable, allowing users to change the order of content zones.
Encapsulating the content
Content zones have to be encapsulated into a container. If a content zone is outside this container, it will be treated as regular code - it won't be editable, deletable and movable.
Content zones should be inserted into an object that has the movableContentContainer class on it. We strongly suggest adding this class to a td element.
<body>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<!-- HEADER -->
<tr>
<td>
<table width="600" cellspacing="0" cellpadding="0" align="center" border="0">
<tr>
<td class="movableContentContainer">
<!-- CONTENT ZONES -->
</td>
</tr>
</table>
</td>
</tr>
<!-- FOOTER -->
</table>
</body>
Structure of a content zone
Each content zone has to be encapsulated like this:
<div class="CONTENTTYPE contentEditableContainer">
<div class="contentEditable">
<!-- Your content -->
</div>
</div>
Then, replace the CONTENTTYPE tag with the type of the content zone (listed below). The content itself can be a <p>, a <table>, or any other HTML tag.
At the end of this guide, you have an example of a campaign that is built for this new editor.
Available content zones
Text
<div class="contentEditableContainer contentTextEditable">
<div class="contentEditable">
<!-- Your content here -->
</div>
</div>
Image
<div class="contentEditableContainer contentImageEditable">
<div class="contentEditable">
<!-- Your content here -->
</div>
</div>
In a contentImageEditable tag, an image accepts the following arguments:
<img src="your_path.png" data-default="placeholder" data-max-width="300" data-max-height="300">
data-max-width and data-max-height represent the maximum width and height the image can take. Those dimensions will be used in the Resize panel to display the maximum dimensions the image has the right to be resized to. For the width, if you put a wider dimension than the one used for the main container, the layout will break. By default, if you don't specify the dimensions, the image will have a max-width of 600 pixels, and a max-height of 300 pixels.
data-default="placeholder" is used to indicate that an image in the template is a placeholder only, and that if the user edits it, they should be prompted to add an image instead of editing an existing image.
Image + Text
This is a table that contains one column of text, and one column of image. This is how we usually set this up in a template:
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top">
<div class="contentEditableContainer contentImageEditable">
<div class="contentEditable">
<!-- Image content -->
</div>
</div>
</td>
<td>
<div class="contentEditableContainer contentTextEditable">
<div class="contentEditable">
<!-- Text content -->
</div>
</div>
</td>
</tr>
</table>
Text + image
This follows exactly the same principle as the one above.
Two column text
The only variation with this one is adding two columns of text.
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top">
<div class="contentEditableContainer contentTextEditable">
<div class="contentEditable">
<!-- Text content -->
</div>
</div>
</td>
<td>
<div class="contentEditableContainer contentTextEditable">
<div class="contentEditable">
<!-- Text content -->
</div>
</div>
</td>
</tr>
</table>
QR code
The trick with this one is to use the contentQrcodeEditable tag on the image you want the QR code to be pasted into.
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top">
<div class="contentQrcodeEditable contentTextEditable">
<div class="contentEditable">
<img data-default="placeholder" src="qr_code.png" width="75" height="75">
</div>
</div>
</td>
<td>
<div class="contentEditableContainer contentTextEditable">
<div class="contentEditable">
<!-- Text content -->
</div>
</div>
</td>
</tr>
</table>
Google Map
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top">
<div class="contentGmapEditable contentTextEditable">
<div class="contentEditable">
<img data-default="placeholder" src="gmap_example.png" width="175">
</div>
</div>
</td>
<td>
<div class="contentEditableContainer contentTextEditable">
<div class="contentEditable">
<!-- Text content -->
</div>
</div>
</td>
</tr>
</table>
Line / separator
We have introduced a line that acts a separator between content zones. Each line can be movable like other content zones.
<div class="movableContent" style="margin-top:10px;margin-bottom:10px;">
<img src="line.png">
</div>
In the templates we provide, we use a line as the separator between content sections, and as a way to add some visual separation between them.
Social widgets
We use three kinds of social widgets:
- A side-by-side Facebook widget and a Twitter widget
- Facebook only
- Twitter only
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top" width="280">
<div class="contentEditableContainer contentFacebookEditable">
<div class="contentEditable">
<img data-default="placeholder" src="icon_facebook.png" data-customIcon="true" data-noText="true">
</div>
</div>
<div class="contentEditableContainer contentTextEditable">
<div class="contentEditable">
<!-- Your Facebook teasing here -->
</div>
</div>
</td>
<td valign="top" style="padding-left:40px;">
<div class="contentEditableContainer contentTwitterEditable">
<div class="contentEditable">
<img data-default="placeholder" src="icon_twitter.png" data-customIcon="true" data-noText="true">
</div>
</div>
<div class="contentEditableContainer contentTextEditable">
<div class="contentEditable">
<!-- Your Twitter teasing here -->
</div>
</div>
</td>
</tr>
</table>
For social widgets, we have created two new tags.
data-customIcon="true" is used to indicate that the template provides a custom Facebook/Twitter icon and that you want to force the user to use this icon. That way, the icon will not be replaceable. However, clicking on the icon in the template will open a popup that will let the user indicate their twitter username or Facebook page link.
data-noText="true" indicates that clicking on the icon will not open the description popup.
Theming / Color Schemes
The new editor supports the notion of color schemes. Each template should have at last one color scheme that will be available by default. If you don't supply one, the default theme will be loaded (details below). Moreover, users can modify your color scheme by manipulating each individual color with a color picker.
In the campaign builder, there are five distinct colors that can be included in a color scheme (for now):
- The background color
- Color of the text (body)
- Color of the links
- Color of the text background
- Color for the
<h2>tag.
To add a color scheme, you need to add the following into the <head> of your template:
<head>
<!-- ...Other <head> information... -->
<script type="colorScheme" class="swatch active">
{
"name":"Default",
"bgBody":"ff508b",
"link":"ff0056",
"color":"555555",
"bgItem":"ffffff",
"title":"000000"
}
</script>
<script type="colorScheme" class="swatch">
{
"name":"Default",
"bgBody":"ffccee",
"link":"999999",
"color":"444444",
"bgItem":"ffffff",
"title":"f2f2f2"
}
</script>
</head>
All the colors should be transcoded into their hexadecimal values, without the #. Moreover, you should use the full 6 digits for their values (that means the value fff will not work, it has to be ffffff).
The active class indicates that this color scheme will be loaded when the editor loads.
Custom zones
There is one last thing you can add to a template. Because we allow users to dynamically add new content zones into their campaign, we need to ensure that each new zone that is added has the same layout, color scheme, typography, and alignment as the default content zones.
This is why we have created custom zones. By adding them at the end of your template, the new editor is able to grab the code of each new content zone that is added and overwrite the style with the one you provided for the template.
To add custom zones in your template, place them just before the </body> tag.
<!--Default Zone
<div class="customZone" data-type="image">
CONTENT HERE
</div>
<div class="customZone" data-type="text">
CONTENT HERE
</div>
<div class="customZone" data-type="imageText">
CONTENT HERE
</div>
<div class="customZone" data-type="Textimage">
CONTENT HERE
</div>
<div class="customZone" data-type="textText">
CONTENT HERE
</div>
<div class="customZone" data-type="qrcode">
CONTENT HERE
</div>
<div class="customZone" data-type="social">
CONTENT HERE
</div>
<div class="customZone" data-type="twitter">
CONTENT HERE
</div>
<div class="customZone" data-type="facebook">
CONTENT HERE
</div>
<div class="customZone" data-type="gmap">
CONTENT HERE
</div>
<div class="customZone" data-type="line">
CONTENT HERE
</div>
<!--Default Zone End-->
Finished Example
Here is a sample of a complete template.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Template 15</title>
<style type="text/css">
body {background: #fff; font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; font-size:14px; line-height:22px; color:#555;margin:0;}
p {margin-top:0;font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; font-size:14px;}
a {color:#ff0056;text-decoration:underline;}
h1 {color:#000; font-size:22px; line-height:32px; margin:0;font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;}
h2 {color:#000; font-size:18px; margin:0px 0 10px;font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;}
.bgBody {background:#ff508b;}
.bgItem {background:#fff;}
</style>
<script type="colorScheme" class="swatch active">
{
"name":"Default",
"bgBody":"ff508b",
"link":"ff0056",
"color":"555555",
"bgItem":"ffffff",
"title":"000000"
}
</script>
</head>
<body>
<table cellpadding="0" cellspacing="0" border="0" width="100%" class="bgBody">
<tr>
<td>
<!--content starting-->
<table width="600" cellspadding="0" cellspacing="0" border="0" align="center">
<tr>
<td align="center" style="padding-top:10px;">
<p>You are receiving this email because you signed up for our mailing list.<br />If you have trouble viewing this email, <a href="[SHOWEMAIL]">open it in a browser</a></p>
</td>
</tr>
<tr>
<td style="line-height:0; font-size:0;">
<img data-default="placeholder" src="line_white.png">
</td>
</tr>
<tr>
<td style="line-height:0; font-size:0;">
<div class="contentEditableContainer contentImageEditable">
<div class="contentEditable">
<img data-default="placeholder" src="header.png" data-max-width="600">
</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table><!--table 100%-->
<table width="600" cellspadding="0" cellspacing="0" border="0" align="center" class="bgItem">
<tr>
<td style="font-size:16px; line-height:24px; padding-top:15px;" class="movableContentContainer">
<!-- Text -->
<div class="movableContent">
<div class="contentEditableContainer contentTextEditable">
<div class="contentEditable">
<h2 style="text-align:left;">This is a subtitle</h2>
<p style="text-align:left;">Etiam bibendum nunc in lacus bibendum porta. Vestibulum nec nulla et eros ornare condimentum. Proin facilisis, dui in mollis blandit. Sed non dui magna, quis tincidunt enim. Morbi vehicula pharetra lacinia. Cras tincidunt, justo at fermentum feugiat, eros orci accumsan dolor, eu ultricies eros dolor quis sapien. Curabitur in turpis sem, a sodales purus. Pellentesque et risus at mauris aliquet gravida.</p>
<p style="text-align:left;">Integer in elit in tortor posuere molestie non a velit. Pellentesque consectetur, nisi a euismod scelerisque.</p>
<p style="text-align:right;"><a href="">Read more</a></p>
</div>
</div>
</div>
<!-- .Text -->
<!-- Line -->
<div class="movableContent" style="margin-top:10px;margin-bottom:10px;">
<img data-default="placeholder" src="line_black.png">
</div>
<!-- .Line -->
<!-- Image + Text -->
<div class="movableContent">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top">
<div class="contentEditableContainer contentImageEditable">
<div class="contentEditable">
<img data-default="placeholder" src="temp_img_1.png" data-max-width="400">
</div>
</div>
</td>
<td valign="top" style="padding-left:20px;">
<div class="contentEditableContainer contentTextEditable">
<div class="contentEditable">
<h2 style="text-align:left;">This is a subtitle</h2>
<p style="text-align:left;">Etiam bibendum nunc in lacus bibendum porta. Vestibulum nec nulla et eros ornare condimentum. Proin facilisis, dui in mollis blandit. Sed non dui magna, quis tincidunt enim. Morbi vehicula pharetra lacinia. Cras tincidunt, justo at fermentum feugiat, eros orci accumsan dolor, eu ultricies eros dolor quis sapien. Curabitur in turpis sem, a sodales purus. Pellentesque et risus at mauris aliquet gravida.</p>
<p style="text-align:left;">Integer in elit in tortor posuere molestie non a velit. Pellentesque consectetur, nisi a euismod scelerisque.</p>
<p style="text-align:right;"><a href="">Read more</a></p>
</div>
</div>
</td>
</tr>
</table>
</div>
<!-- .Image + Text -->
<!-- Line -->
<div class="movableContent" style="margin-top:10px;margin-bottom:10px;">
<img data-default="placeholder" src="line_black.png">
</div>
<!-- .Line -->
<!-- Text + Text -->
<div class="movableContent">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top" width="280">
<div class="contentEditableContainer contentTextEditable">
<div class="contentEditable">
<h2 style="text-align:left;">This is a subtitle</h2>
<p style="text-align:left;">Etiam bibendum nunc in lacus bibendum porta. Vestibulum nec nulla et eros ornare condimentum. Proin facilisis, dui in mollis blandit. Sed non dui magna, quis tincidunt enim. Morbi vehicula pharetra lacinia. Cras tincidunt, justo at fermentum feugiat, eros orci accumsan dolor, eu ultricies eros dolor quis sapien. Curabitur in turpis sem, a sodales purus. Pellentesque et risus at mauris aliquet gravida.</p>
<p style="text-align:left;">Integer in elit in tortor posuere molestie non a velit. Pellentesque consectetur, nisi a euismod scelerisque.</p>
<p style="text-align:right;"><a href="">Read more</a></p>
</div>
</div>
</td>
<td valign="top" style="padding-left:40px;">
<div class="contentEditableContainer contentTextEditable">
<div class="contentEditable">
<h2 style="text-align:left;">This is a subtitle</h2>
<p style="text-align:left;">Etiam bibendum nunc in lacus bibendum porta. Vestibulum nec nulla et eros ornare condimentum. Proin facilisis, dui in mollis blandit. Sed non dui magna, quis tincidunt enim. Morbi vehicula pharetra lacinia. Cras tincidunt, justo at fermentum feugiat, eros orci accumsan dolor, eu ultricies eros dolor quis sapien. Curabitur in turpis sem, a sodales purus. Pellentesque et risus at mauris aliquet gravida.</p>
<p style="text-align:left;">Integer in elit in tortor posuere molestie non a velit. Pellentesque consectetur, nisi a euismod scelerisque.</p>
<p style="text-align:right;"><a href="">Read more</a></p>
</div>
</div>
</td>
</tr>
</table>
</div>
<!-- .Text + Text -->
<!-- Line -->
<div class="movableContent" style="margin-top:10px;margin-bottom:10px;">
<img data-default="placeholder" src="line_black.png">
</div>
<!-- .Line -->
<!-- Qr Code -->
<div class="movableContent">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top" width="75">
<div class="contentQrcodeEditable contentEditableContainer">
<div class="contentEditable">
<img data-default="placeholder" src="qr_code.png" width="75" height="75">
</div>
</div>
</td>
<td valign="top" style="padding-left:20px;">
<div class="contentEditableContainer contentTextEditable">
<div class="contentEditable">
<h2 style="text-align:left;">This is a subtitle</h2>
<p style="text-align:left;">Etiam bibendum nunc in lacus bibendum porta. Vestibulum nec nulla et eros ornare condimentum. Proin facilisis, dui in mollis blandit. Sed non dui magna, quis tincidunt enim. Morbi vehicula pharetra lacinia. Cras tincidunt, justo at fermentum feugiat, eros orci accumsan dolor, eu ultricies eros dolor quis sapien. Curabitur in turpis sem, a sodales purus. Pellentesque et risus at mauris aliquet gravida.</p>
<p style="text-align:left;">Integer in elit in tortor posuere molestie non a velit. Pellentesque consectetur, nisi a euismod scelerisque.</p>
<p style="text-align:right;"><a href="">Read more</a></p>
</div>
</div>
</td>
</tr>
</table>
</div>
<!-- .Qr Code -->
<!-- Line -->
<div class="movableContent" style="margin-top:10px;margin-bottom:10px;">
<img data-default="placeholder" src="line_black.png">
</div>
<!-- .Line -->
<!-- Gmap -->
<div class="movableContent">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top" width="75">
<div class="contentGmapEditable contentEditableContainer">
<div class="contentEditable">
<img data-default="placeholder" src="gmap_example.png" width="175">
</div>
</div>
</td>
<td valign="top" style="padding-left:20px;">
<div class="contentEditableContainer contentTextEditable">
<div class="contentEditable">
<h2 style="text-align:left;">This is a subtitle</h2>
<p style="text-align:left;">Etiam bibendum nunc in lacus bibendum porta. Vestibulum nec nulla et eros ornare condimentum. Proin facilisis, dui in mollis blandit. Sed non dui magna, quis tincidunt enim. Morbi vehicula pharetra lacinia. Cras tincidunt, justo at fermentum feugiat, eros orci accumsan dolor, eu ultricies eros dolor quis sapien. Curabitur in turpis sem, a sodales purus. Pellentesque et risus at mauris aliquet gravida.</p>
<p style="text-align:left;">Integer in elit in tortor posuere molestie non a velit. Pellentesque consectetur, nisi a euismod scelerisque.</p>
<p style="text-align:right;"><a href="">Read more</a></p>
</div>
</div>
</td>
</tr>
</table>
</div>
<!-- .Gmap -->
<!-- Line -->
<div class="movableContent" style="margin-top:10px;margin-bottom:10px;">
<img data-default="placeholder" src="line_black.png">
</div>
<!-- .Line -->
<!-- Social -->
<div class="movableContent">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top" width="280">
<div class="contentEditableContainer contentFacebookEditable">
<div class="contentEditable">
<img data-default="placeholder" src="icon_facebook.png" data-customIcon="true" data-noText="true">
</div>
</div>
<div class="contentEditableContainer contentTextEditable">
<div class="contentEditable">
<h2>Facebook</h2>
<p>Follow us on Facebook to have all the latest news an update and to get in touch with people from us.</p>
</div>
</div>
</td>
<td valign="top" style="padding-left:40px;">
<div class="contentEditableContainer contentTwitterEditable">
<div class="contentEditable">
<img data-default="placeholder" src="icon_twitter.png" data-customIcon="true" data-noText="true">
</div>
</div>
<div class="contentEditableContainer contentTextEditable">
<div class="contentEditable">
<h2>Twitter</h2>
<p>Follow us on Twitter to have all the latest news an update and to get in touch with people from us.</p>
</div>
</div>
</td>
</tr>
</table>
</div>
<!-- .Social -->
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" width="100%" bgcolor="#000">
<tr>
<td>
<!--content starting-->
<table width="600" cellspadding="0" cellspacing="0" border="0" align="center">
<tr>
<td style="line-height:0; font-size:0; padding-top:10px;">
<img data-default="placeholder" src="line_white.png">
</td>
</tr>
<tr>
<td align="right" style="padding-top:10px; font-size:12px; color:#FFF; padding-bottom:20px;">
<p>[COMPANY.ADDRESS]</p>
<p>If you no longer want to receive emails from us, <a href="[UNSUBSCRIBE]">unsubscribe</a>.</p>
</td>
</tr>
</table>
</td>
</tr>
</table><!--table 100%-->
<!--Default Zone
<div class="customZone" data-type="image">
<div class="contentEditableContainer contentImageEditable">
<div class="contentEditable">
<img data-default="placeholder" src="header.png" data-max-width="600">
</div>
</div>
</div>
<div class="customZone" data-type="text">
<div class="movableContent">
<div class="contentEditableContainer contentTextEditable">
<div class="contentEditable">
<h2 style="text-align:left;">This is a subtitle</h2>
<p style="text-align:left;">Etiam bibendum nunc in lacus bibendum porta. Vestibulum nec nulla et eros ornare condimentum. Proin facilisis, dui in mollis blandit. Sed non dui magna, quis tincidunt enim. Morbi vehicula pharetra lacinia. Cras tincidunt, justo at fermentum feugiat, eros orci accumsan dolor, eu ultricies eros dolor quis sapien. Curabitur in turpis sem, a sodales purus. Pellentesque et risus at mauris aliquet gravida.</p>
<p style="text-align:left;">Integer in elit in tortor posuere molestie non a velit. Pellentesque consectetur, nisi a euismod scelerisque.</p>
<p style="text-align:right;"><a href="">Read more</a></p>
</div>
</div>
</div>
</div>
<div class="customZone" data-type="imageText">
<div class="movableContent">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top">
<div class="contentEditableContainer contentImageEditable">
<div class="contentEditable">
<img data-default="placeholder" src="temp_img_1.png" data-max-width="400">
</div>
</div>
</td>
<td valign="top" style="padding-left:20px;">
<div class="contentEditableContainer contentTextEditable">
<div class="contentEditable">
<h2 style="text-align:left;">This is a subtitle</h2>
<p style="text-align:left;">Etiam bibendum nunc in lacus bibendum porta. Vestibulum nec nulla et eros ornare condimentum. Proin facilisis, dui in mollis blandit. Sed non dui magna, quis tincidunt enim. Morbi vehicula pharetra lacinia. Cras tincidunt, justo at fermentum feugiat, eros orci accumsan dolor, eu ultricies eros dolor quis sapien. Curabitur in turpis sem, a sodales purus. Pellentesque et risus at mauris aliquet gravida.</p>
<p style="text-align:left;">Integer in elit in tortor posuere molestie non a velit. Pellentesque consectetur, nisi a euismod scelerisque.</p>
<p style="text-align:right;"><a href="">Read more</a></p>
</div>
</div>
</td>
</tr>
</table>
</div>
</div>
<div class="customZone" data-type="Textimage">
<div class="movableContent">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top" style="padding-left:20px;">
<div class="contentEditableContainer contentTextEditable">
<div class="contentEditable">
<h2 style="text-align:left;">This is a subtitle</h2>
<p style="text-align:left;">Etiam bibendum nunc in lacus bibendum porta. Vestibulum nec nulla et eros ornare condimentum. Proin facilisis, dui in mollis blandit. Sed non dui magna, quis tincidunt enim. Morbi vehicula pharetra lacinia. Cras tincidunt, justo at fermentum feugiat, eros orci accumsan dolor, eu ultricies eros dolor quis sapien. Curabitur in turpis sem, a sodales purus. Pellentesque et risus at mauris aliquet gravida.</p>
<p style="text-align:left;">Integer in elit in tortor posuere molestie non a velit. Pellentesque consectetur, nisi a euismod scelerisque.</p>
<p style="text-align:right;"><a href="">Read more</a></p>
</div>
</div>
</td>
<td valign="top">
<div class="contentEditableContainer contentImageEditable">
<div class="contentEditable">
<img data-default="placeholder" src="temp_img_1.png" data-max-width="400">
</div>
</div>
</td>
</tr>
</table>
</div>
</div>
<div class="customZone" data-type="textText">
<div class="movableContent">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top" width="280">
<div class="contentEditableContainer contentTextEditable">
<div class="contentEditable">
<h2 style="text-align:left;">This is a subtitle</h2>
<p style="text-align:left;">Etiam bibendum nunc in lacus bibendum porta. Vestibulum nec nulla et eros ornare condimentum. Proin facilisis, dui in mollis blandit. Sed non dui magna, quis tincidunt enim. Morbi vehicula pharetra lacinia. Cras tincidunt, justo at fermentum feugiat, eros orci accumsan dolor, eu ultricies eros dolor quis sapien. Curabitur in turpis sem, a sodales purus. Pellentesque et risus at mauris aliquet gravida.</p>
<p style="text-align:left;">Integer in elit in tortor posuere molestie non a velit. Pellentesque consectetur, nisi a euismod scelerisque.</p>
<p style="text-align:right;"><a href="">Read more</a></p>
</div>
</div>
</td>
<td valign="top" style="padding-left:40px;">
<div class="contentEditableContainer contentTextEditable">
<div class="contentEditable">
<h2 style="text-align:left;">This is a subtitle</h2>
<p style="text-align:left;">Etiam bibendum nunc in lacus bibendum porta. Vestibulum nec nulla et eros ornare condimentum. Proin facilisis, dui in mollis blandit. Sed non dui magna, quis tincidunt enim. Morbi vehicula pharetra lacinia. Cras tincidunt, justo at fermentum feugiat, eros orci accumsan dolor, eu ultricies eros dolor quis sapien. Curabitur in turpis sem, a sodales purus. Pellentesque et risus at mauris aliquet gravida.</p>
<p style="text-align:left;">Integer in elit in tortor posuere molestie non a velit. Pellentesque consectetur, nisi a euismod scelerisque.</p>
<p style="text-align:right;"><a href="">Read more</a></p>
</div>
</div>
</td>
</tr>
</table>
</div>
</div>
<div class="customZone" data-type="qrcode">
<div class="movableContent">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top" width="75">
<div class="contentQrcodeEditable contentEditableContainer">
<div class="contentEditable">
<img data-default="placeholder" src="qr_code.png" width="75" height="75">
</div>
</div>
</td>
<td valign="top" style="padding-left:20px;">
<div class="contentEditableContainer contentTextEditable">
<div class="contentEditable">
<h2 style="text-align:left;">This is a subtitle</h2>
<p style="text-align:left;">Etiam bibendum nunc in lacus bibendum porta. Vestibulum nec nulla et eros ornare condimentum. Proin facilisis, dui in mollis blandit. Sed non dui magna, quis tincidunt enim. Morbi vehicula pharetra lacinia. Cras tincidunt, justo at fermentum feugiat, eros orci accumsan dolor, eu ultricies eros dolor quis sapien. Curabitur in turpis sem, a sodales purus. Pellentesque et risus at mauris aliquet gravida.</p>
<p style="text-align:left;">Integer in elit in tortor posuere molestie non a velit. Pellentesque consectetur, nisi a euismod scelerisque.</p>
<p style="text-align:right;"><a href="">Read more</a></p>
</div>
</div>
</td>
</tr>
</table>
</div>
</div>
<div class="customZone" data-type="social">
<div class="movableContent">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top" width="280">
<div class="contentEditableContainer contentFacebookEditable">
<div class="contentEditable">
<img data-default="placeholder" src="icon_facebook.png" data-customIcon="true" data-noText="true">
</div>
</div>
<div class="contentEditableContainer contentTextEditable">
<div class="contentEditable">
<h2>Facebook</h2>
<p>Follow us on Facebook to have all the latest news an update and to get in touch with people from us.</p>
</div>
</div>
</td>
<td valign="top" style="padding-left:40px;">
<div class="contentEditableContainer contentTwitterEditable">
<div class="contentEditable">
<img data-default="placeholder" src="icon_twitter.png" data-customIcon="true" data-noText="true">
</div>
</div>
<div class="contentEditableContainer contentTextEditable">
<div class="contentEditable">
<h2>Twitter</h2>
<p>Follow us on Twitter to have all the latest news an update and to get in touch with people from us.</p>
</div>
</div>
</td>
</tr>
</table>
</div>
</div>
<div class="customZone" data-type="twitter">
<div class="movableContent">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top" style="padding-left:40px;">
<div class="contentEditableContainer contentTwitterEditable">
<div class="contentEditable">
<img data-default="placeholder" src="icon_twitter.png" data-customIcon="true" data-noText="true">
</div>
</div>
<div class="contentEditableContainer contentTextEditable">
<div class="contentEditable">
<h2>Twitter</h2>
<p>Follow us on Twitter to have all the latest news an update and to get in touch with people from us.</p>
</div>
</div>
</td>
</tr>
</table>
</div>
</div>
<div class="customZone" data-type="facebook">
<div class="movableContent">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top">
<div class="contentEditableContainer contentFacebookEditable">
<div class="contentEditable">
<img data-default="placeholder" src="icon_facebook.png" data-customIcon="true" data-noText="true">
</div>
</div>
<div class="contentEditableContainer contentTextEditable">
<div class="contentEditable">
<h2>Facebook</h2>
<p>Follow us on Facebook to have all the latest news an update and to get in touch with people from us.</p>
</div>
</div>
</td>
</tr>
</table>
</div>
</div>
<div class="customZone" data-type="gmap">
<div class="movableContent">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top" width="75">
<div class="contentGmapEditable contentEditableContainer">
<div class="contentEditable">
<img data-default="placeholder" src="gmap_example.png" width="175">
</div>
</div>
</td>
<td valign="top" style="padding-left:20px;">
<div class="contentEditableContainer contentTextEditable">
<div class="contentEditable">
<h2 style="text-align:left;">This is a subtitle</h2>
<p style="text-align:left;">Etiam bibendum nunc in lacus bibendum porta. Vestibulum nec nulla et eros ornare condimentum. Proin facilisis, dui in mollis blandit. Sed non dui magna, quis tincidunt enim. Morbi vehicula pharetra lacinia. Cras tincidunt, justo at fermentum feugiat, eros orci accumsan dolor, eu ultricies eros dolor quis sapien. Curabitur in turpis sem, a sodales purus. Pellentesque et risus at mauris aliquet gravida.</p>
<p style="text-align:left;">Integer in elit in tortor posuere molestie non a velit. Pellentesque consectetur, nisi a euismod scelerisque.</p>
<p style="text-align:right;"><a href="">Read more</a></p>
</div>
</div>
</td>
</tr>
</table>
</div>
</div>
<div class="customZone" data-type="line">
<div class="movableContent" style="margin-top:10px;margin-bottom:10px;">
<img data-default="placeholder" src="line_black.png">
</div>
</div>
<!--Default Zone End-->
</body>
</html>
If you have questions or issues building your own templates, don't hesitate to get in touch with us!
Powered by WHMCompleteSolution