Drag and Drop template editor: Documentation for Building D-n-D Compatible Templates

Last Updated: Jun 08 2017 10:41 am UTC

To successfully create an e-mail template using the new Drag'n'Drop editor, you have to know and understand the template's components. They are:

  • Background - Whole template wrapper
  • Header, Body and Footer
  • Frame - To gather bloks and make multiple columns
  • Content block - for content such as text, image or divider

Background

Email template Coding starts with the creation of the first table - Background. In this table you can set properties for the template, for example background color or image.

P.S. We recommend you to copy the code from this page while coding to avoid forgetting to add correct classes

<!-- BACKGROUND --> <table border="0" cellpadding="0" cellspacing="0" style="width: 100%; background-color: #f8f8f8;"> <tr class="mld-header"> <td align="center" valign="top">&nbsp;</td> </tr> </table>

The first table must be divided into three rows with classes mld-header, mld-body mld-body-1, mld-footer, so Drag'n'Drop editor could recognize these sections.

Inside each of these sections a layout table with fixed width needs to be added:

<!-- BACKGROUND --> <table border="0" cellpadding="0" cellspacing="0" style="width: 100%; background-color: #f8f8f8;"> <tr class="mld-header"> <td align="center" valign="top"><!-- LAOYUT HEADER --> <table border="0" cellpadding="0" cellspacing="0" style="width: 600px;"> <tr> <td align="center" class="mld-part" valign="top">&nbsp;</td> </tr> </table> </td> </tr> <tr class="mld-body mld-body-1"> <td align="center" valign="top"><!-- LAOYUT BODY --> <table border="0" cellpadding="0" cellspacing="0" style="width: 600px;"> <tr> <td align="center" class="mld-part" style="background-color: #ffffff;" valign="top">&nbsp;</td> </tr> </table> </td> </tr> <tr class="mld-footer"> <td align="center" valign="top"><!-- LAOYUT FOOTER --> <table border="0" cellpadding="0" cellspacing="0" style="width: 600px;"> <tr> <td align="center" class="mld-part" valign="top">&nbsp;</td> </tr> </table> </td> </tr> </table>

As you see in the sample above, you need to specify width in the layout table. We recommend using 600px for better user experience. In this table you can set all other styles like borders, shadows and radius that you add to the layout table tag. The only thing you set in the table cell is background color.

After you are done, let’s start adding content to our template

Content

To add content you need to have a frame and blocks.

  • Frame - To gather bloks and make multiple columns
  • Content block - for content such as text, image or divider

Frame

<!-- OUTER FRAME TABLE --> <table border="0" cellpadding="0" cellspacing="0" class="mld-element mld-container" style="width: 100%;"> <tr> <td align="left" style="padding: 0px 0px 0px 0px;" valign="top"><!-- INNER FRAME TABLE --> <table border="0" cellpadding="0" cellspacing="0" style="width: 100%;"> <tr> <td align="left" class="mld-element-content" valign="top"><!-- Block comes here --></td> </tr> </table> </td> </tr> </table>

In the sample above you see a container with a text block. All tables are 100% wide.
In the table cell you can specify padding, but styles like shadows, background colors, etc. you specify in inner tables within your frame or block.

Two Column frame

To make multiple columns you need to split the container in the inner table cell.

<!-- OUTER FRAME TABLE --> <table border="0" cellpadding="0" cellspacing="0" class="mld-element mld-container" style="width: 100%;"> <tr> <td align="left" style="padding: 0px 0px 0px 0px;" valign="top"><!-- INNER FRAME TABLE --> <table border="0" cellpadding="0" cellspacing="0" style="width: 100%;"> <tr> <td align="left" class="mld-element-content" style="width: 300px;" valign="top"><!-- OUTER BLOCK TABLE --> <table border="0" cellpadding="0" cellspacing="0" class="mld-element mld-block mld-block-image" style="width: 100%;"> <tr> <td align="left" style="padding: 0px 0px 0px 0px;" valign="top"><!-- INNER BLOCK TABLE --> <table border="0" cellpadding="0" cellspacing="0" style="width: 100%;"> <tr> <td align="left" class="mld-element-content" style="padding: 15px 20px 15px 20px;" valign="top"><span contenteditable="false" tabindex="-1"><span contenteditable="false" tabindex="-1"><span contenteditable="false" tabindex="-1"><span contenteditable="false" tabindex="-1"><span contenteditable="false" tabindex="-1"><img alt="Image" data-widget="image" height="100" src="image.jpg" style="display: block; border: none;" width="100" /></span></span></span></span></span></td> </tr> </table> </td> </tr> </table> </td> <td align="left" class="mld-element-content" style="width: 300px;" valign="top"><!-- OUTER BLOCK TABLE --> <table border="0" cellpadding="0" cellspacing="0" class="mld-element mld-block mld-block-text" style="width: 100%;"> <tr> <td align="left" style="padding: 0px 0px 0px 0px;" valign="top"><!-- INNER BLOCK TABLE --> <table border="0" cellpadding="0" cellspacing="0" style="width: 100%;"> <tr> <td align="left" class="mld-element-content" style="padding: 15px 20px 15px 20px;" valign="top"> <p style="font-size: 14px; color: #000000 font-family: Arial, Helvetica, sans-serif; line-height: 150%; margin: 0;">Hello world</p> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table>

You can split the frame in a maximum of 4 columns. As I mentioned, frames contain blocks, and the real template building starts there.

Blocks

In this guide I will show you how to code the most important blocks:

  • Text
  • Image
  • Button
  • Divider
  • Social

Every block has it's own classname on block's outer table.

Text and Title are the most commonly used blocks in Drag and Drop. They can contain one or more Paragraph and Span tags. If you want to make this a Title block, just change mld-block-text class to mld-block-title. See example below.

<!-- OUTER BLOCK TABLE --> <table border="0" cellpadding="0" cellspacing="0" class="mld-element mld-block mld-block-text" style="width: 100%;"> <tr> <td align="left" style="padding: 0px 0px 0px 0px;" valign="top"><!-- INNER BLOCK TABLE --> <table border="0" cellpadding="0" cellspacing="0" style="width: 100%;"> <tr> <td align="left" class="mld-element-content" style="padding: 15px 20px 15px 20px;" valign="top"> <p style="font-size: 30px; color: #000000 font-family: Arial, Helvetica, sans-serif; line-height: 150%; margin: 0; font-weight: bold;">Hello world</p> <p style="font-size: 14px; color: #000000 font-family: Arial, Helvetica, sans-serif; line-height: 150%; margin: 0;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tincidunt urna et sapien mollis, nec tincidunt ligula scelerisque.</p> </td> </tr> </table> </td> </tr> </table>

Image block is commonly used and it contains image tag

<!-- OUTER BLOCK TABLE --> <table border="0" cellpadding="0" cellspacing="0" class="mld-element mld-block mld-block-image" style="width: 100%;"> <tr> <td align="left" style="padding: 0px 0px 0px 0px;" valign="top"><!-- INNER BLOCK TABLE --> <table border="0" cellpadding="0" cellspacing="0" style="width: 100%;"> <tr> <td align="left" class="mld-element-content" style="padding: 15px 20px 15px 20px;" valign="top"><span contenteditable="false" tabindex="-1"><span contenteditable="false" tabindex="-1"><span contenteditable="false" tabindex="-1"><span contenteditable="false" tabindex="-1"><span contenteditable="false" tabindex="-1"><img alt="Image" data-widget="image" height="100" src="image.jpg" style="display: block; border: none;" width="100" /></span></span></span></span></span></td> </tr> </table> </td> </tr> </table>

Button block is more complicated than image and text blocks. You specify button styles in block’s inner table and you align buttons with align attribute in the table and outer table cell at the same time. Button height is set by padding on inner table’s cell, see sample below.

<!-- BBUTTON BLOCK OUTTER --> <table border="0" cellpadding="0" cellspacing="0" class="mld-element mld-block mld-block-button" style="width: 100%;"> <tr> <td align="left" style="padding: 15px 20px 15px 20px;" valign="top"><!-- BBUTTON BLOCK INNER --> <table align="left" border="0" cellpadding="0" cellspacing="0" style=" width:200px; overflow: hidden; border-collapse: separate; background-color: #000000; border-radius: 5px;"> <tr> <td align="center" class="mld-element-content" style="padding:5px 0px 5px 0px;" valign="middle"><a href="#" style="display: block; color: #ffffff; font-family: Arial; font-size: 15px; line-height: 150%; text-align: center; text-decoration:none; font-weight: bold;" target="_blank">Click Me! </a></td> </tr> </table> </td> </tr> </table>

Divider block is meant for making large spacing between blocks or frames. You can set a line on dividers by adding a top border to inner table and you add spacing with outer table cells padding.

<!-- OUTER BLOCK TABLE --> <table border="0" cellpadding="0" cellspacing="0" class="mld-element mld-block mld-block-divider" style="width: 100%;"> <tr> <td align="left" style="padding: 15px 0px 15px 0px;" valign="top"><!-- INNER BLOCK TABLE --> <table border="0" cellpadding="0" cellspacing="0" style="width: 100%; border-top: 1px solid #000000;"> <tr> <td align="left" class="mld-element-content" style="padding: 15px 20px 15px 20px;" valign="top">&nbsp;</td> </tr> </table> </td> </tr> </table>

Social block has two purposes. First is to allow readers to visit your social profiles, and the second is to share your email campaign online. The only difference is in the class name. For social visit classname will end with follow and for share it will be share.

Please note that inner block isn't 100% wide. You can add the icons you like, but if you want to make those icons editable in Drag and Drop editors, you need to add a specific source to image icon and use Mailigen default icons.

P.S. We recommend to create the share block through the Drag and Drop editor.

<!-- BLOCK --> <table border="0" cellpadding="0" cellspacing="0" class="mld-element mld-block mld-block-follow" style="width: 100%;"> <tr> <td align="center" style="padding: 15px 20px 15px 20px;" valign="top"><!-- TEXT --> <table align="center" border="0" cellpadding="0" cellspacing="0"> <tr> <td align="center" class="mld-element-content" style="padding: 0px 5px 0px 0px;" valign="top"><a href="#" target="_blank"><span contenteditable="false" tabindex="-1"><span contenteditable="false" tabindex="-1"><span contenteditable="false" tabindex="-1"><span contenteditable="false" tabindex="-1"><span contenteditable="false" tabindex="-1"><img alt="FB" border="0" data-widget="image" height="32" src="https://admin.mailigen.com/assets/images/social-buttons/style-2/facebook.png" style="display: block; border: none;" width="32" /></span></span></span></span></span> </a></td> <td align="center" class="mld-element-content" style="padding: 0px 5px 0px 0px;" valign="top"><a href="#" target="_blank"><span contenteditable="false" tabindex="-1"><span contenteditable="false" tabindex="-1"><span contenteditable="false" tabindex="-1"><span contenteditable="false" tabindex="-1"><span contenteditable="false" tabindex="-1"><img alt="YT" border="0" data-widget="image" height="32" src="https://admin.mailigen.com/assets/images/social-buttons/style-2/youtube.png" style="display: block; border: none;" width="32" /></span></span></span></span></span> </a></td> <td align="center" class="mld-element-content" style="padding: 0px 5px 0px 0px;" valign="top"><a href="#" target="_blank"><span contenteditable="false" tabindex="-1"><span contenteditable="false" tabindex="-1"><span contenteditable="false" tabindex="-1"><span contenteditable="false" tabindex="-1"><span contenteditable="false" tabindex="-1"><img alt="TW" border="0" data-widget="image" height="32" src="https://admin.mailigen.com/assets/images/social-buttons/style-2/twitter.png" style="display: block; border: none;" width="32" /></span></span></span></span></span> </a></td> <td align="center" class="mld-element-content" style="padding: 0px 0px 0px 0px;" valign="top"><a href="#" target="_blank"><span contenteditable="false" tabindex="-1"><span contenteditable="false" tabindex="-1"><span contenteditable="false" tabindex="-1"><span contenteditable="false" tabindex="-1"><span contenteditable="false" tabindex="-1"><img alt="IN" border="0" data-widget="image" height="32" src="https://admin.mailigen.com/assets/images/social-buttons/style-2/linkedin.png" style="display: block; border: none;" width="32" /></span></span></span></span></span> </a></td> </tr> </table> </td> </tr> </table>

As you see on social sources URL ends with /style-2/youtube.png, it will recognize social media and add the icon, but to know styles view table below.

Default styling

You can create default block styles when you add text blocks or frames. You need to add your default style within an embedded style with specific ID.

<!-- Default style--> <style id="mld-def-styles" media="screen" type="text/css"> </style>

Classnames for default text styles

  • mld-def-paragraph – normal text
  • mld-def-heading1 - heading1
  • mld-def-heading2 - heading2
  • mld-def-custom – custom style
  • mld-def-link – anchor text inside normal text
  • mld-def-link-heading1 - anchor text inside heading1
  • mld-def-link-heading2 - anchor text inside heading2
  • mld-def-link-custom - custom anchor text
  • mld-def-block-button-text - button text

NOTE:
If the class .mld-def-custom is not defined, settings .mld-paragraph are automatically assigned.
If the class .mld-def-link-heading1 and .mld-def-link-heading2 is not defined, settings .mld-link are automatically assigned.
And if the class .mld-def-link-custom is not defined, settings .mld-link are automatically assigned.

Settings for default blocks and frames:

  • mld-def-block and mld-def-block-outer - for all blocks
  • mld-def-block-title and mld-def-block-title-outer - for title block
  • mld-def-block-text and mld-def-block-text-outer - for text block
  • mld-def-block-image and mld-def-block-image-outer - for image block
  • mld-def-block-button and mld-def-block-button-outer - for button block, mld-def-block-button specify style of button itself.
  • mld-def-block-divider - for divider block, there is no outer style for block
  • mld-def-block-container and mld-def-block-container-outer - for frames
  • mld-def-block-share and mld-def-block-share-outer - for share block
  • mld-def-block-follow and mld-def-block-follow-outer - for social block

Example

<!-- Default style--> <style id="mld-def-styles" media="screen" type="text/css">/* Paragraph style */ .mld-def-paragraph { line-height: 1.5; margin: 0; font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #393838; } /* Text block style */ .mld-def-block-text { padding: 5px 20px 15px 20px; background-color: #e5e5e5; } /* Button style */ .mld-def-block-button { padding: 10px 0px 10px 0px; width: 150px; overflow: hidden; border-collapse: separate; background-color: #ec2027; border-radius: 5px; } .mld-def-block-button-text { display: block; color: #ffffff; font-family: Arial; font-size: 16px; line-height: 150%; text-align: center; text-decoration: none; font-weight: bold; } </style>

Other styles

To make email template responsive or hide elements, you need to add embedded style in your head section:

<style media="screen" type="text/css">/* Media Query for mobile */ @media screen and (max-device-width: 600px), screen and (max-width: 600px) { .mobile100{width:100% !important; height:auto !important;} .mobilesplit{width:100%!important; float:left !important;} .mld-mobile-hide {display: none !important;} } @media screen and (max-device-width: 500px), screen and (max-width: 500px) { .mobile1001{width:100% !important; height:auto !important;} } @media screen and (max-device-width: 400px), screen and (max-width: 400px) { .mobile1002{width:100% !important; height:auto !important;} } </style>

mobile100 and mobilesplit classes will be added automatically but if you want to hide something in your template then add mld-mobile-hide class to element.

Remember to add Merge tags in your code!

Keep in mind

  • Use default web fonts like Arial! Read more
  • Keep your HTML code within 100kb to avoid template cut on Gmail
  • Avoid HTML5 or CSS3 because it has lack of support
  • Don't use Javascript or Flash to avoid spam filters
  • Validate your code
  • Optimize your images for faster load speed. Use TinyPNG

I've made a starter template for you! :)


Was this article helpful?
What can we do to improve articles like this?

Copyrights © Mailigen. 2017 All rights reserved.