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 img element. 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.

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:

Each editable CSS ruleset opens with the declaration block:

• “@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: