Create Editable Styles 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.

In this article, you'll find more information on editable template styles.

Area declarations

Add the following declarations to your CSS to define the areas where styles should be editable.

Required

• @tab : defines from which design tab the styles can be set.

Optional

• @section : defines from which tab design styles can be set. This is optional, but recommended when you have a number of editable styles. Too many editable styles in one section or grouped in no sections can make it harder to find edit options.
• @style declaration takes a CSS rule set you've created and pulls it into the campaign text editor's drop-down menu and allows you to apply styles to your text in a quick and selective way.
• @theme : if you would like the colors of your template to be changeable via the Mailchimp color theme tool, use the following theme definitions in your CSS:
  • @theme page : defines the background color of the email.
  • @theme body : should be on the main body section of the campaign for text color and fonts
  • @theme header : should be used for the background color of the "view in this browser" section or left off entirely
  • @theme title : defines the foreground, size, and font of titles
  • @theme subtitle : defines the foreground, size, and font of subtitles
  • @theme footer : should be on the footer section of the template for background color.

Style declarations

Use the following declaration to define a single editable style within an area of your template.

/*@editable*/ property: value;

Style declaration blocks share a basic structure regardless of the element style targeted and the /*@editable*/ declaration repeats for each element you want to be editable within an area. In this example, a H1 tag is declared:

/** * @tab Page *
@section main heading *
@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; }