Create Editable Content Areas with Mailchimp's Template Language

The template options in this article are available for the classic email builder only. To learn about templates in the new email builder, read Design an Email in the New Builder.

When coding custom templates with Mailchimp's template language, use our recommended naming conventions to identify which areas of your template you would like to be editable from the Design section of the Campaign Builder. We recommend limiting the number of editable spaces to keep your code clean. It is important to create a unique name for each attribute value and to be consistent so you don't lose your content if you switch templates while building your campaigns.

Editable content areas

The general attribute format for creating editable content areas is: mc:edit="section"

Create a unique attribute values and add to elements whose content should be editable. This section contains code names for some common content areas that you can include in your template code:

• mc:edit="header"
  Used to name the header of your email.
• mc:edit="header_image"
  Used to name an editable header image.
• mc:edit="sidecolumn"
  Used to name an editable left- or right-side column.
• mc:edit="body"
  Used to name the main content space of your email.
• mc:edit="footer"
  Used to name the footer of your email.

In the following example, an editable body section is created using the mc:edit="body" attribute.

<td class="defaultText" mc:edit="body">
<h2 class="title">Primary Heading</h2>
<p>Sample copy. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id
pulvinar odio lorem non turpis.</p>
<h3 class="subTitle">Subheading</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</td>

Editable image area

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

In the following example, the attribute is added to an image element.

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

Editable text header

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

In the following example, the attribute is added to an image element that is made editable with the mc:edit="section" attribute.

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

Repeating content area

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

In the following example, the mc:repeatable attribute is added to a content area that is made editable with the mc:edit attribute.

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

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

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

In the following example, multiple mc:variant attributes are used with the same mc:repeatable name.

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

Hideable content area

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

In the following example, the mc:hideable attribute is added to a content area that is made editable with the mc:edit attribute.

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

Variable content area

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

In the following example, the mc:variant attribute is added to a content area that also uses the mc:repeatable attribute. In this case, the attribute name is "content with left image."

<div mc:repeatable="product" mc:variant="content with left image"> </div>

• If you're editing hideable sections in the campaign builder using the remove button in your campaign, the section won't disappear in the campaign builder screen. The section you want to remove will fade, but it will remain in case you change your mind and want to use the space. However, when you send out your email, the section you have "removed" won't appear in your campaign. You can preview this change by clicking on Preview and then Enter Preview Mode.
• The remove and hide this section buttons don't offer the same functionality in the template editor. In fact, you can't actually remove anything while working in the template editor. If you need to make changes like that, we suggest you work in the campaign builder instead.
• Certain variable or repeatable design edits, like adding images to variable blocks, will not be retained when emails are replicated or saved as templates from the campaign builder. To protect your edits, we recommend editing and saving content in the template builder, and exporting and saving your code in an HTML editor like Notepad or TextEdit.