How To Create an HTML Template in Mailchimp Visual Editor

Want to create your own html templates, but don't know where to start? Don't worry — we'll tell you how to use Mailchimp Template Language to create unique emails.

Template Language consists of Mailchimp tags. It is enough to just place them in an email layout once, and then you can edit your html template in the visual editor. This means you won't have to dig into your code in order to change text, images, or single blocks in your email. The edited layout will load up as an ordinary template in the Templates tab.

In this article, we will tell you how to use the Template Language. The text combines elements of the original guide and our own additions to some confusing points.

Imortant! Always remember to backup the source code, otherwise you put it at risk. Also, always test your email templates before sending them to the subscribers.

How to Edit Text, Links, and Images Using Mailchimp Template Language

The first and most important feature is that you can edit text, links, and images in your emails. It can be done by placing an "mc:edit" element into the code.

mc:edit is used in the opening <dev> or any other content container. Syntax is mc:edit=»$unique name». The name inside the quotation marks should be unique for every block.

You should highlight the edited spaces with the empty <div> tags in order not to lose the text styles. Mailchimp won't give you such advice, but our experience shows that you'd better do it.

         
   <div mc:edit="body_text"> 
     <font face="Arial, sans-serif" color="#222222" style="font-size: 15px;   line-height: 20px; font-weight: bold; text-decoration: none;">   
      <span style="font-family: Arial, Tahoma, Geneva, sans-serif; color: #222222; font-size: 15px; line-height: 20px; font-weight: bold; text-decoration: none;">Text</span> 
     </font>
    </div>
        
      

Here is another precaution for the styles to stay still: first add the new text, then delete the old text.

To edit a link, you should:

1. highlight the part of the text that contains a link (not the whole text!);
   
2. write the new word;
   
3. delete the text you don't need;
   
4. change the link if necessary.

If you do it in any other way, Mailchimp will wrap the word with the link and the text style will be changed to the default setting.

How to Edit Images Using Mailchimp Template Language

If you want to edit images only, use mc:edit=»$unique name» inside the <img> tag. This will bring out the image replacement menu in the campaign editor.

If you add a tag, a new separate window for image editing will show up. You can use it to replace or edit an image, add links and alt-text.

         
  <img src="" alt="alt text" width="270" border="0" style="display: block; width: 270px;" mc:edit="image_1">
        
      

Notes:

1. You can't place one editable element inside of another one;
   
2. You can't place editable images inside editable elements;
   
3. Do not upload an image with a different scale. It can make the whole email layout display incorrectly;
   
4. If you design your emails with images for retina, the images will probably be displayed with full scale in the editor. However, in the emails sent, they will have the preset look.

How to Hide an Element in an Email Template in Mailchimp

Use the mc:hideable tag to hide a certain element of the letter. It is suitable for any element of the html code.

Just write mc:hideable in any element you need to hide. You don't need any unique name for this tag. If needed, just wrap the hideable element with the <div>...</div> tags.

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

Notes:

1. Do not use this tag in places where you have used the mc:repeatable tag;
   
2. You can hide elements in the block editor only in the campaign editor. The hidden element will be highlighted with the dim gray colour. You can see the result in the preview mode or in a test email;
   
3. Add this element to all of the editable blocks, so you can remove any of them at any moment.

How to Duplicate an Element in Your Email Using Mailchimp Template Language

Use the mc:repeatable tag if you want to duplicate an element or a block in the visual editor. This tag is suitable for the block or inline elements of the html code.

         
 <div mc:repeatable>
  content
 </div>
        
      

Notes:

1. Repeated elements can be inserted into each other. However, you should use this feature carefully if you don't want to bring out any errors while reduplicating the blocks;
   
2. The duplicated blocks can be swapped.

How to Create an Element with an Opportunity to Choose Block Types

Use the mc:variant tag if you want to create a space that allows you to choose block types. It is pasted together with mc:repeatable=»$block name» (this tag is used for reduplication).

Syntax: mc:repeatable=»content» mc:variant=»variant_1″.

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

Notes:

1. The blocks with mc:variant tag should be placed next to each other;
   
2. The name for such blocks should be given in mc:repeatable and be the same everywhere. In our examples, the name is mc:repeatable=«content»;
   
3. The blocks should not be inserted into each other;
   
4. You can replace the blocks only in the campaign editor, not in an email template.
   

Limitations of Mailchimp Template Language

1. The Template Language is not a no-code solution: you still have to dig into the code and write some tags if you want to edit your email layout in the visual editor.
   
2. You can't change the source structure of an email layout, i.e. you can duplicate the elements of your email, but not change their position;
   
3. At the editing stage, the text styles might get lost. To avoid this, add the new text first and only then delete the old text.
   
4. Some elements can be edited in campaigns only, not in templates;
5. The way emails look at the editing stage may differ from the way they will look like in the end. That's why it is important to check your emails in the preview mode or to send test emails.