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

Last Updated: May 15 2020 12:31 pm 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 blocks 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.

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

<span style="color:#000000;">&lt;!--{cke_protected}{C}%3C!%2D%2D%20BACKGROUND%20%2D%2D%3E--&gt;&lt;table border="0" cellpadding="0" cellspacing="0" style="width: 100%; background-color: #f8f8f8;" class=" cke_show_border"&gt;&lt;tr class="mld-header"&gt;&lt;td align="center" valign="top"&gt;&lt;br /&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt; </span>

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:

<span style="color:#000000;">&lt;!--{cke_protected}{C}%3C!%2D%2D%20BACKGROUND%20%2D%2D%3E--&gt;&lt;table border="0" cellpadding="0" cellspacing="0" style="width: 100%; background-color: #f8f8f8;" class=" cke_show_border"&gt;&lt;tr class="mld-header"&gt;&lt;td align="center" valign="top"&gt;&lt;!--{cke_protected}{C}%3C!%2D%2D%20LAOYUT%20HEADER%20%2D%2D%3E--&gt;&lt;table border="0" cellpadding="0" cellspacing="0" style="width: 600px;" class=" cke_show_border"&gt;&lt;tr&gt;&lt;td align="center" class="mld-part" valign="top"&gt;&lt;br /&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr class="mld-body mld-body-1"&gt;&lt;td align="center" valign="top"&gt;&lt;!--{cke_protected}{C}%3C!%2D%2D%20LAOYUT%20BODY%20%2D%2D%3E--&gt;&lt;table border="0" cellpadding="0" cellspacing="0" style="width: 600px;" class=" cke_show_border"&gt;&lt;tr&gt;&lt;td align="center" class="mld-part" style="background-color: #ffffff;" valign="top"&gt;&lt;br /&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr class="mld-footer"&gt;&lt;td align="center" valign="top"&gt;&lt;!--{cke_protected}{C}%3C!%2D%2D%20LAOYUT%20FOOTER%20%2D%2D%3E--&gt;&lt;table border="0" cellpadding="0" cellspacing="0" style="width: 600px;" class=" cke_show_border"&gt;&lt;tr&gt;&lt;td align="center" class="mld-part" valign="top"&gt;&lt;br /&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt; </span>

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

<span style="color:#000000;">&lt;!--{cke_protected}{C}%3C!%2D%2D%20OUTER%20FRAME%20TABLE%20%2D%2D%3E--&gt;&lt;table border="0" cellpadding="0" cellspacing="0" class="mld-element mld-container cke_show_border" style="width: 100%;"&gt;&lt;tr&gt;&lt;td align="left" style="padding: 0px 0px 0px 0px;" valign="top"&gt;&lt;!--{cke_protected}{C}%3C!%2D%2D%20INNER%20FRAME%20TABLE%20%2D%2D%3E--&gt;&lt;table border="0" cellpadding="0" cellspacing="0" style="width: 100%;" class=" cke_show_border"&gt;&lt;tr&gt;&lt;td align="left" class="mld-element-content" valign="top"&gt;&lt;!--{cke_protected}{C}%3C!%2D%2D%20Block%20comes%20here%20%2D%2D%3E--&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt; </span>

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.

<span style="color:#000000;">&lt;!--{cke_protected}{C}%3C!%2D%2D%20OUTER%20FRAME%20TABLE%20%2D%2D%3E--&gt;&lt;table border="0" cellpadding="0" cellspacing="0" class="mld-element mld-container cke_show_border" style="width: 100%;"&gt;&lt;tr&gt;&lt;td align="left" style="padding: 0px 0px 0px 0px;" valign="top"&gt;&lt;!--{cke_protected}{C}%3C!%2D%2D%20INNER%20FRAME%20TABLE%20%2D%2D%3E--&gt;&lt;table border="0" cellpadding="0" cellspacing="0" style="width: 100%;" class=" cke_show_border"&gt;&lt;tr&gt;&lt;td align="left" class="mld-element-content" style="width: 300px;" valign="top"&gt;&lt;!--{cke_protected}{C}%3C!%2D%2D%20OUTER%20BLOCK%20TABLE%20%2D%2D%3E--&gt;&lt;table border="0" cellpadding="0" cellspacing="0" class="mld-element mld-block mld-block-image cke_show_border" style="width: 100%;"&gt;&lt;tr&gt;&lt;td align="left" style="padding: 0px 0px 0px 0px;" valign="top"&gt;&lt;!--{cke_protected}{C}%3C!%2D%2D%20INNER%20BLOCK%20TABLE%20%2D%2D%3E--&gt;&lt;table border="0" cellpadding="0" cellspacing="0" style="width: 100%;" class=" cke_show_border"&gt;&lt;tr&gt;&lt;td align="left" class="mld-element-content" style="padding: 15px 20px 15px 20px;" valign="top"&gt;&lt;span contenteditable="false" tabindex="-1"&gt;&lt;span contenteditable="false" tabindex="-1"&gt;&lt;span contenteditable="false" tabindex="-1"&gt;&lt;span contenteditable="false" tabindex="-1"&gt;&lt;span contenteditable="false" tabindex="-1"&gt;&lt;span contenteditable="false" tabindex="-1"&gt;&lt;span tabindex="-1" contenteditable="false" data-cke-widget-wrapper="1" data-cke-filter="off" class="cke_widget_wrapper cke_widget_new cke_widget_inline cke_widget_image" data-cke-display-name="image"&gt;&lt;img alt="Image" data-widget="image" height="100" data-cke-saved-src="image.jpg" src="image.jpg" style="display: block; border: none;" width="100" data-cke-widget-keep-attr="1" /&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/td&gt;&lt;td align="left" class="mld-element-content" style="width: 300px;" valign="top"&gt;&lt;!--{cke_protected}{C}%3C!%2D%2D%20OUTER%20BLOCK%20TABLE%20%2D%2D%3E--&gt;&lt;table border="0" cellpadding="0" cellspacing="0" class="mld-element mld-block mld-block-text cke_show_border" style="width: 100%;"&gt;&lt;tr&gt;&lt;td align="left" style="padding: 0px 0px 0px 0px;" valign="top"&gt;&lt;!--{cke_protected}{C}%3C!%2D%2D%20INNER%20BLOCK%20TABLE%20%2D%2D%3E--&gt;&lt;table border="0" cellpadding="0" cellspacing="0" style="width: 100%;" class=" cke_show_border"&gt;&lt;tr&gt;&lt;td align="left" class="mld-element-content" style="padding: 15px 20px 15px 20px;" valign="top"&gt;&lt;p style="font-size: 14px; color: #000000 font-family: Arial, Helvetica, sans-serif; line-height: 150%; margin: 0;"&gt;Hello world&lt;/p&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt; </span>

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 its own classname on the 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.

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

Image block is commonly used and it contains image tag

<span style="color:#000000;">&lt;!--{cke_protected}{C}%3C!%2D%2D%20OUTER%20BLOCK%20TABLE%20%2D%2D%3E--&gt;&lt;table border="0" cellpadding="0" cellspacing="0" class="mld-element mld-block mld-block-image cke_show_border" style="width: 100%;"&gt;&lt;tr&gt;&lt;td align="left" style="padding: 0px 0px 0px 0px;" valign="top"&gt;&lt;!--{cke_protected}{C}%3C!%2D%2D%20INNER%20BLOCK%20TABLE%20%2D%2D%3E--&gt;&lt;table border="0" cellpadding="0" cellspacing="0" style="width: 100%;" class=" cke_show_border"&gt;&lt;tr&gt;&lt;td align="left" class="mld-element-content" style="padding: 15px 20px 15px 20px;" valign="top"&gt;&lt;span contenteditable="false" tabindex="-1"&gt;&lt;span contenteditable="false" tabindex="-1"&gt;&lt;span contenteditable="false" tabindex="-1"&gt;&lt;span contenteditable="false" tabindex="-1"&gt;&lt;span contenteditable="false" tabindex="-1"&gt;&lt;span contenteditable="false" tabindex="-1"&gt;&lt;span tabindex="-1" contenteditable="false" data-cke-widget-wrapper="1" data-cke-filter="off" class="cke_widget_wrapper cke_widget_new cke_widget_inline cke_widget_image" data-cke-display-name="image"&gt;&lt;img alt="Image" data-widget="image" height="100" data-cke-saved-src="image.jpg" src="image.jpg" style="display: block; border: none;" width="100" data-cke-widget-keep-attr="1" /&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt; </span>

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.

<span style="color:#000000;">&lt;!--{cke_protected}{C}%3C!%2D%2D%20BBUTTON%20BLOCK%20OUTTER%20%2D%2D%3E--&gt;&lt;table border="0" cellpadding="0" cellspacing="0" class="mld-element mld-block mld-block-button cke_show_border" style="width: 100%;"&gt;&lt;tr&gt;&lt;td align="left" style="padding: 15px 20px 15px 20px;" valign="top"&gt;&lt;!--{cke_protected}{C}%3C!%2D%2D%20BBUTTON%20BLOCK%20INNER%20%2D%2D%3E--&gt;&lt;table align="left" border="0" cellpadding="0" cellspacing="0" style=" width:200px; overflow: hidden; border-collapse: separate; background-color: #000000; border-radius: 5px;" class=" cke_show_border"&gt;&lt;tr&gt;&lt;td align="center" class="mld-element-content" style="padding:5px 0px 5px 0px;" valign="middle"&gt;&lt;a data-cke-saved-href="#" 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"&gt;Click Me! &lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt; </span>

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.

<span style="color:#000000;">&lt;!--{cke_protected}{C}%3C!%2D%2D%20OUTER%20BLOCK%20TABLE%20%2D%2D%3E--&gt;&lt;table border="0" cellpadding="0" cellspacing="0" class="mld-element mld-block mld-block-divider cke_show_border" style="width: 100%;"&gt;&lt;tr&gt;&lt;td align="left" style="padding: 15px 0px 15px 0px;" valign="top"&gt;&lt;!--{cke_protected}{C}%3C!%2D%2D%20INNER%20BLOCK%20TABLE%20%2D%2D%3E--&gt;&lt;table border="0" cellpadding="0" cellspacing="0" style="width: 100%; border-top: 1px solid #000000;" class=" cke_show_border"&gt;&lt;tr&gt;&lt;td align="left" class="mld-element-content" style="padding: 15px 20px 15px 20px;" valign="top"&gt;&lt;br /&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt; </span>

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 the 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 the image icon and use Mailigen default icons.

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

<span style="color:#000000;">&lt;!--{cke_protected}{C}%3C!%2D%2D%20BLOCK%20%2D%2D%3E--&gt;&lt;table border="0" cellpadding="0" cellspacing="0" class="mld-element mld-block mld-block-follow cke_show_border" style="width: 100%;"&gt;&lt;tr&gt;&lt;td align="center" style="padding: 15px 20px 15px 20px;" valign="top"&gt;&lt;!--{cke_protected}{C}%3C!%2D%2D%20TEXT%20%2D%2D%3E--&gt;&lt;table align="center" border="0" cellpadding="0" cellspacing="0" class=" cke_show_border"&gt;&lt;tr&gt;&lt;td align="center" class="mld-element-content" style="padding: 0px 5px 0px 0px;" valign="top"&gt;&lt;a data-cke-saved-href="#" href="#" target="_blank"&gt;&lt;span contenteditable="false" tabindex="-1"&gt;&lt;span contenteditable="false" tabindex="-1"&gt;&lt;span contenteditable="false" tabindex="-1"&gt;&lt;span contenteditable="false" tabindex="-1"&gt;&lt;span contenteditable="false" tabindex="-1"&gt;&lt;span contenteditable="false" tabindex="-1"&gt;&lt;span tabindex="-1" contenteditable="false" data-cke-widget-wrapper="1" data-cke-filter="off" class="cke_widget_wrapper cke_widget_new cke_widget_inline cke_widget_image" data-cke-display-name="image"&gt;&lt;img alt="FB" border="0" data-widget="image" height="32" data-cke-saved-src="https://admin.mailigen.com/assets/images/social-buttons/style-2/facebook.png" src="https://admin.mailigen.com/assets/images/social-buttons/style-2/facebook.png" style="display: block; border: none;" width="32" data-cke-widget-keep-attr="1" /&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt; &lt;/a&gt;&lt;/td&gt;&lt;td align="center" class="mld-element-content" style="padding: 0px 5px 0px 0px;" valign="top"&gt;&lt;a data-cke-saved-href="#" href="#" target="_blank"&gt;&lt;span contenteditable="false" tabindex="-1"&gt;&lt;span contenteditable="false" tabindex="-1"&gt;&lt;span contenteditable="false" tabindex="-1"&gt;&lt;span contenteditable="false" tabindex="-1"&gt;&lt;span contenteditable="false" tabindex="-1"&gt;&lt;span contenteditable="false" tabindex="-1"&gt;&lt;span tabindex="-1" contenteditable="false" data-cke-widget-wrapper="1" data-cke-filter="off" class="cke_widget_wrapper cke_widget_new cke_widget_inline cke_widget_image" data-cke-display-name="image"&gt;&lt;img alt="YT" border="0" data-widget="image" height="32" data-cke-saved-src="https://admin.mailigen.com/assets/images/social-buttons/style-2/youtube.png" src="https://admin.mailigen.com/assets/images/social-buttons/style-2/youtube.png" style="display: block; border: none;" width="32" data-cke-widget-keep-attr="1" /&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt; &lt;/a&gt;&lt;/td&gt;&lt;td align="center" class="mld-element-content" style="padding: 0px 5px 0px 0px;" valign="top"&gt;&lt;a data-cke-saved-href="#" href="#" target="_blank"&gt;&lt;span contenteditable="false" tabindex="-1"&gt;&lt;span contenteditable="false" tabindex="-1"&gt;&lt;span contenteditable="false" tabindex="-1"&gt;&lt;span contenteditable="false" tabindex="-1"&gt;&lt;span contenteditable="false" tabindex="-1"&gt;&lt;span contenteditable="false" tabindex="-1"&gt;&lt;span tabindex="-1" contenteditable="false" data-cke-widget-wrapper="1" data-cke-filter="off" class="cke_widget_wrapper cke_widget_new cke_widget_inline cke_widget_image" data-cke-display-name="image"&gt;&lt;img alt="TW" border="0" data-widget="image" height="32" data-cke-saved-src="https://admin.mailigen.com/assets/images/social-buttons/style-2/twitter.png" src="https://admin.mailigen.com/assets/images/social-buttons/style-2/twitter.png" style="display: block; border: none;" width="32" data-cke-widget-keep-attr="1" /&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt; &lt;/a&gt;&lt;/td&gt;&lt;td align="center" class="mld-element-content" style="padding: 0px 0px 0px 0px;" valign="top"&gt;&lt;a data-cke-saved-href="#" href="#" target="_blank"&gt;&lt;span contenteditable="false" tabindex="-1"&gt;&lt;span contenteditable="false" tabindex="-1"&gt;&lt;span contenteditable="false" tabindex="-1"&gt;&lt;span contenteditable="false" tabindex="-1"&gt;&lt;span contenteditable="false" tabindex="-1"&gt;&lt;span contenteditable="false" tabindex="-1"&gt;&lt;span tabindex="-1" contenteditable="false" data-cke-widget-wrapper="1" data-cke-filter="off" class="cke_widget_wrapper cke_widget_new cke_widget_inline cke_widget_image" data-cke-display-name="image"&gt;&lt;img alt="IN" border="0" data-widget="image" height="32" data-cke-saved-src="https://admin.mailigen.com/assets/images/social-buttons/style-2/linkedin.png" src="https://admin.mailigen.com/assets/images/social-buttons/style-2/linkedin.png" style="display: block; border: none;" width="32" data-cke-widget-keep-attr="1" /&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt; &lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt; </span>

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.

<span style="color:#000000;">&lt;!--{cke_protected}{C}%3C!%2D%2D%20Default%20style%2D%2D%3E--&gt;&lt;style id="mld-def-styles" media="screen" type="text/css"&gt;&lt;/style&gt; </span>

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

<span style="color:#000000;">&lt;!--{cke_protected}{C}%3C!%2D%2D%20Default%20style%2D%2D%3E--&gt;&lt;style id="mld-def-styles" media="screen" type="text/css"&gt;/* 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; }&lt;/style&gt; </span>

Other styles

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

<span style="color:#000000;">&lt;style media="screen" type="text/css"&gt;/* 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;} }&lt;/style&gt; </span>

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 a 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

We've created a starter template for you! 


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

Copyrights © Mailigen. 2020 All rights reserved.