Mailchimp mc:edit,mc:repeatable,mc:hedeable

Template Language

Although you don’t have to use it in order to send emails with MailChimp, our template language is a powerful, easy way to code your own email templates that are reusable and editable from within the application.

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 should be placed on an <img> element. This will allow the app to call up an image upload and editing dialogue.
• The name you assign via mc:edit="$unique_name" is used to create a field in the database to store the user’s content. If the user switches templates after writing content, they could lose their copy if the editable space names aren’t consistent. 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 the content to a template, you’ll lose the content.

mc:hideable

• mc:hideable is used to provide a hide/show action for a particular element within a template.
• Syntax: mc:hideable
• Use mc:hideable on any HTML element
• Avoid placing the mc:hideable tag on an element that already has an mc:repeatable tag.
• When an element is hidden, it will not be visible when the email is sent from MailChimp.
• There are no restrictions on the use of mc:hideable. Any element can be hidden.
• There’s no need to add a namespace to the mc:hideable tag (IE: mc:hideable=“$name”)
• If you’re editing hideable sections in the campaign builder using your template’s remove button, note that the section won’t disappear in the editor screen. The section you want to remove will fade, but remain—just 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 popup preview.
• The remove and hide 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.

mc:repeatable

• mc:repeatable is used to provide a duplication action for a particular element within a template.
• Syntax: mc:repeatable
• Use mc:repeatable on any HTML element
• mc:repeatable elements can be nested within each other, but use care if you’re going to do this. We don’t encourage this use.

mc:label

• mc:label is an optional tag used to name an editable section within the application.
• Syntax: mc:label=“header_image”
• Use mc:label on any mc:edit element
• If no mc:label name is specified, the app will use the name from the mc:edit tag instead.

mc:variant

• mc:variant is used to provide a way to switch between discrete blocks of HTML.
• mc:variant must be used in conjunction with mc:repeatable.
• Syntax: mc:repeatable=“product” mc:variant=“content with left image”
• Use mc:variant on any discrete HTML elements you wish to switch between
• mc:variant blocks should not be nested within each other.
• mc:variant blocks must be adjacent to each other in HTML:

<!-- // 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:

/**
* @tab Page
* @section heading 1
* @tip Set the styling for all first-level headings in your emails.
* @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:

/**
* @tab Page
* @section heading 1
* @tip Set the styling for all first-level headings in your emails.
* @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.
• “@tip” allows for a tooltip to show when the tab for its section is selected. @tip is optional.
• “@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:

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

• “@editable” is required on each style intended to be edited in MailChimp’s campaign builder.

Share on Google Plus

About Engr. Rokon Khan