Making Editable template with the Mailchimp Template Language

For creating the custom templates, the Mailchimp's is the better option. By following the conventions, we are able to create the custom template. It is important to create the unique name for each attribute value and to be the consistent so you don't lose your content if you switch templates while building campaigns. It allows a facility of making the editable section of template.

Making editable content areas :-

The general attribute format for creating a editable content areas is as follows: mc:edit="section". Create the unique attribute values and add to the elements whose content should be the editable. This section contains the code names for some common content areas that you can include in your template code:

1) mc:edit="header"
   Used to name header of email.

2) mc:edit="header_image"
   Used to name the editable header image.

3) mc:edit="sidecolumn"
   Used to name the editable left- or right-side column.

4) mc:edit="body"
   Used to name the main content space of email.

5) mc:edit="footer"
   Used to name footer of the email.

Here is the example for the editable content :-

<td class="defaultText" mc:edit="body">
<h2 class="title">Primary Heading</h2>
<p>Example primary heading content .</p>
<h3 class="subTitle">Subheading</h3>
<p>Subheading for the content.</p>
</td>

Making editable image area :-

To create the editable image areas, add attribute within the image element. Avoid creating editable images within the editable content areas to keep your code clean.

Here is the example for the editable content :-

<img mc:edit="postcard" style="max-width:600px;" />

Making editable text header :-

Add the mc:allowtext attribute to image element for your header image to allow the text to be entered instead of the image.

Here is the example for the editable content :-

<img mc:edit="header_image" mc:allowdesigner mc:allowtext />

Making repeating content area :-

Add mc:repeatable attribute to any area that includes the mc:edit attribute to create the content block that can be repeatedly added to the template. Repeatable content areas are hidden by the default so they only appear in the template if you add them within a Campaign Builder.

Here is the example for the editable content :-

<div class="article" mc:repeatable>
<h3 mc:edit="article_title">Title</h3>
<p mc:edit="article_content">Content</p>
</div>

Each instance of  the mc:repeatable creates the parent element. When the block is repeated, the new block is the child of that parent. Child blocks can only be rearranged if they're associated with same parent element. For example, if you have two mc:repeatable sections in your template, the repeated block from first instance can't be rearranged to appear between repeated blocks associated with second instance.

To move blocks around more freely, you should create multiple instances of mc:variant attribute defined by same mc:repeatable name. This will create one mc:repeatable parent element, so any repeated blocks will be the child of a same parent element.

Here is the example for the editable content :-

<table mc:repeatable="content" mc:variant="variant_1">
<tr><td mc:edit="section_1">
Variant 1 Content
</td></tr>
</table>
<table mc:repeatable="content" mc:variant="variant_2">
<tr><td mc:edit="section_2">
Variant 2 Content
</td></tr>
</table>
<table mc:repeatable="content" mc:variant="variant_3">
<tr><td mc:edit="section_3">
Variant 3 Content
</td></tr>
</table>

Making hideable content area :-

Add a mc:hideable attribute to the content area to allow that block to be toggled between hidden and visible when you build your campaigns. A mc:hideable attribute cannot be used in the conjunction with the mc:repeatable attribute.

Here is the example for the editable content :-

<div mc:edit="content" mc:hideable>
</div>

Making Variable content area :-

Add a mc:variant="somename" attribute to the content area to allow you to switch between the number of layouts for that content block within a Campaign Builder. A mc:variant attribute requires an attribute name and must be used in the conjunction with mc:repeatable.

Here is the example for the editable content :-

<img mc:edit="postcard" style="max-width:600px;"/>

By using all, we are able to make the editable templates. 

Thankyou