Advanced Version of The Email Template Adaptation
Maileditor creates stunning emails that integrate seamlessly with Mailchimp, HubSpot, and Salesforce Marketing Cloud.
Get Started Today
Creating Editable Areas
mc:edit
- mc:edit is used to provide a content-editing action for a particular element within a template.
- Adding mc:edit="$unique_name" to an HTML element allows you to add content or code from within the Mailchimp campaign editor.
- The name used in mc:edit must be unique.
- mc:edit="" should be used on a div, table cell, or any other element that can be considered a ‘container’.
- mc:edit can be placed on an
imgelement. This will allow the image to be replaced, resized, and edited using the Mailchimp campaign editor. - The name you assign via mc:edit="$unique_name" is used to create a field in the database to store the user’s content...
- The following naming conventions are a good rule of thumb for common content areas:
- mc:edit="header" — Use this to name your email header.
- mc:edit="header_image" — Use this to name an editable header image.
- mc:edit="sidebar" — Use this to name an editable left- or right-side column.
- mc:edit="body" — Use this to name the main content space of your email.
- mc:edit="footer" — Use this to name your email footer.
- A few things to watch out for when using mc:edit to create editable areas:
- You shouldn’t nest editable elements within other editable elements.
- You shouldn’t place editable images within an editable content container.
- Any content added within an editable window is tied to the name used in the mc:edit tag. If you change the name after saving, you’ll lose the content.
- Hardcoded height and width attributes on editable images will be stripped in favor of allowing you to manage the image size in the Content and Settings tabs.
- For editable images we suggest using a max-width in the style attribute so they never stretch beyond that size.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!-- // Begin Module: Left Image with Right Content \\ -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" mc:repeatable="image_with_content"
mc:variant="content with left image">
<tr>
<td align="center" valign="top">
<img src="..." mc:edit="left_image" />
</td>
<td valign="top">
<div mc:edit="right_content">
<h4 class="h4">Heading 4</h4>
Lorem ipsum dolor sit amet.
</div>
</td>
</tr>
</table>
<!-- // End Module: Left Image with Right Content \\ -->
<!-- // Begin Module: Right Image with Left Content \\ -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" mc:repeatable="image_with_content"
mc:variant="content with right image">
<tr>
<td valign="top">
<div mc:edit="left_content">
<h4 class="h4">Heading 4</h4>
Lorem ipsum dolor sit amet.
</div>
</td>
<td align="center" valign="top">
<img src="..." mc:edit="right_image" />
</td>
</tr>
</table>
<!-- // End Module: Right Image with Left Content \\ -->
Defining Editable CSS
Style Declaration Block
Style declaration blocks share a basic structure regardless of the element style targeted. In this example, H1 tag styling is declared:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
/**
* @tab Page
* @section heading 1
* @style heading 1
*/
h1{
/*@editable*/ color:#202020 !important;
display:block;
/*@editable*/ font-family:Arial;
/*@editable*/ font-size:34px;
/*@editable*/ font-weight:bold;
/*@editable*/ line-height:100%;
/*@editable*/ text-align:left;
}
Each editable CSS ruleset opens with the declaration block:
1
2
3
4
5
/**
* @tab Page
* @section heading 1
* @style heading 1
*/
- “@tab” defines a tab under which you can organize several editable styles. It’s best used for high-level groups like “header,” “sidebar,” or “footer.” @tab is required.
- “@section” defines a subsection within a tab. It’s best used for narrow-focus groups such as “body content,” “footer links,” or “background colors.” @section can encompass styles from several different elements or areas (“@section body,” for example, can have styles for the background color of the table, along with text and link styles.) @section is optional, but highly recommended.
- “@style” allows you to add a ruleset’s styles to the drop-down menu in the campaign text editor window. This facilitates the quick application of specific CSS to any selected text. @style should only be used on text styles. @style is optional.
Each editable CSS property is preceded by the @editable declaration:
1
2
3
4
5
6
7
8
9
h1{
/*@editable*/ color:#202020 !important;
display:block;
/*@editable*/ font-family:Arial;
/*@editable*/ font-size:34px;
/*@editable*/ font-weight:bold;
/*@editable*/ line-height:100%;
/*@editable*/ text-align:left;
}
Not Enough?
Order a Custom Template.
Can't find the perfect template? Our experts will design a custom email template tailored to your brand—responsive, unique, and fully tested for compatibility.
Tested with