Unlocking Creativity: Custom-Code Mailchimp Templates for Editable Style

If you want to custom-code emails on Mailchimp, you must abide by the platform’s email template language. Think of it as traversing through the technical zeitgeist of Mailchimp. You speak the language of the platform in order to derive the right results out of it.

In this post, we will look at Mailchimp’s template language for creating editable content blocks and template styles for your emails. Let’s get started!

(Note that your access to custom-coded Mailchimp template design depends on your current plan. You can visit this page to change your plan if needed.)

Custom-coding Editable Styles

Add the following CSS declarations to define the template’s editable areas:

@tab: To define the tab from which the editable styles can be set. (The @tab declaration is not optional.)

@section: If you have many editable styles, the @section declaration makes it easier to find the edit options.

@style: This declaration takes a custom CSS rule set and grafts it onto the text editor’s dropdown menu, ensuring the designer can style the text more effectively.

@theme: You can expect the designer to want to edit the background color of the email, the font and size of titles, etc. To that end, add the following CSS declarations:

@theme page: to define the template’s background color.

@theme body: for editing the color and font of text within the body of the email.

@theme header: for the background color of the “View this email online” section.

@theme title: to define the foreground, size, and font of titles.

@theme subtitle: to define the foreground, size, and font of subtitles.

@theme footer: for the background color of the footer section.

Next, for style declarations, use the following CSS declaration to define a single editable style within a specified area of your template:

/*@editable*/ property: value;

Finally, use the following style declaration block to define any editable style within the template. In this example, the 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; }

Custom-coding Editable Content Areas

In Mailchimp, the standard format for defining editable content areas is mc:edit = “section”

Add the following declarations to define the header, header image, columns, body, and footer in your custom template:

mc:edit=”header”

mc:edit=”header_image”

mc:edit=”sidecolumn”

mc:edit=”body”

mc:edit=”footer”

To define editable image areas, just add the attribute to an image element, as shown below:

Now, the designer will want to add text to the header image. To create an editable text header, add an attribute to the image element which, in turn, is made editable within another attribute, as shown below:

<img mc:edit=”header_image” mc:allowdesigner mc:allowtext />

To create repeatable content blocks, add the mc:repeatable attribute, as shown in the following CSS stylesheet:

<div class=”article” mc:repeatable>

<h3 mc:edit=”article_title”>Title</h3>

<p mc:edit=”article_content”>Content</p>

</div>

It is important to note that each time you define the mc:repeatable attribute, it creates what in Chimpspeak is called a parent block. When you repeat a content block, the resultant block is the child of the parent block. Significantly, child blocks cannot be rearranged if they are not spawned from the same parent block.

BUT, there is a way around this limitation. We’ll talk about it in just a moment.

Next, you can create a hideable content area in your Mailchimp template design by defining the mc:hideable attribute. “Hideable” means the designer can switch the block from hidden to visible and vice-versa while building a campaign.

Finally, the mc:variant=”name” attribute allows the designer to transition between multiple layers in that content block. This will also help you get around the limitation we talked about. Check out the following example code:

Variant 1 Content

Variant 2 Content

Variant 3 Content

As you can see, the mc:variant attribute has been used multiple times with the same mc:repeatable name (highlighted in red). This ensures every repeated child block is associated with the same parent block. As a result, the designer can jockey the blocks around more conveniently.

Wrapping Up!

Custom templates allow you to create emails in a more flexible environment. Unlike with predefined designs, you can incorporate your unique creative vision into your emails without having to shed the markers of your brand identity.

With the help of Mailchimp’s template language, you can custom-code dynamic templates, which can be imported as HTML files.

N.B. Since custom-coded templates are an upper-tier feature in Mailchimp, it is recommended that those properly acquainted with custom coding use it.