With the release of our much improved new email editor this morning, I wanted to share the details of our new template language that takes advantage of all the exciting new features. Before I dig into the details though, you’ll be pleased to know these changes are much more evolutionary than revolutionary. Much of the language remains unchanged, some has been tweaked and we have a couple of new tags on the block.

To recap last week’s announcement, the new editor lets you put anything in a repeater, design multiple layouts within the same repeater and includes a much nicer WYSIWYG editor for your clients to work with. I’ll walk through the changes we’ve made to support this, but you can also jump to the full template language documentation to see it all at once.

One important thing to note is that we’ve automatically converted all your templates to the updated language for you behind the scenes. There’s no need for you to do any extra work, and all of your existing templates will continue to work in the new editor. Of course, if you do spot a problem with one of your existing templates, please let us know and we’ll get to the bottom of it for you right away.

Goodbye <$title$> and <$description$>

Now that you can have any combo of elements in a repeater, the old <$title$> and <$description$> tags were a little confusing. These have been replaced with the more generic <singleline> and <multiline> tags. Like their predecessors, singlelines are great for simple text that doesn’t need any special formatting like image captions, titles, dates, etc. Multilines expose our new WYSIWYG editor and are for much longer passages of text that might require formatting.

We’ve also moved towards a more HTML-like opening and closing tag structure. here’s how the tags look:


<singleline>Headline goes here</singleline

This code would create an editable text input with the default text of “Headline goes here”.


<multiline>Story goes here</multiline

This code would create a WYSIWYG field with the default text of “Story goes here”.

A cleaner way to handle images

We’ve done away with the awkward <$imagesrc$> tag and added a simple attribute you can add to any image in your template. Just by including editable="true" in any image, it can be changed by a client. If you want to include a default image, just reference it in the src attribute like any regular image. Here’s the code:

As always, the width of the image is required so we can automatically resize an image your clients add if it’s larger. You can also provide alt text for any images, which will be used by default when the image is replaced and can be updated easily by your client within the editor.

The all new label attribute

Now that we’ve thrown out the single title and description limitation, we needed a simple way for you to label each editable field in a template. The new label attribute does just that.

For example <singleline label="Image caption">Describe the photo</singleline> would create an editable single line field with the label “Image caption” and the default text “Describe the photo”.

By combining the new label attribute and adding your own default text for all fields, you can set simple guidelines for your clients right in the template code that makes it extremely easy for them to work with. Here’s an example for a photography email template that clearly explains what goes where. Just place this code inside a repeater:

Describe the photo
Introduce this photographer and share the story behind this particular shot

This will appear in the editor like so:

image

Introducing the <layout> tag

This tag is awesome. It’s a simple idea, but gives you complete flexibility in the types of template designs you can build. In a nutshell, the <layout> tag lets you build multiple layouts inside a single repeater.

For example, you might want the first item in a repeater to have an image aligned to the right, and in the next item aligned to the left. Or, you might want to have two repeating items that are just simple text, then throw in a gallery of images, then switch back to text again.

This is done by wrapping each alternate design in its own <layout> tag within a <repeater>. Here’s an example where the first layout has an image floated right, and the second has it floated left.

Each time your client adds a new item to this repeater, it will simply cycle through the layouts you have set in the template. You can add as many layouts as you like, and each layout can include any combo of elements.

Give each layout a label

The layout tag with a label

You can go one step further with your layouts by throwing in a label attribute. By labelling each layout in the same repeater, we’ll show your client a handy drop down each time they add a new item that lets them choose which layout they want to use. Here’s the code:

<layout label="New feature">

So, if you don’t include a label we just cycle through each layout in the order they appear in your template. Throw in a label and we let your client choose what they want to use and when. It’s your call.

Populating a table of contents

Previously, you had to add the toc="true" attribute to a repeater, and we’d just use the title in that repeater to populate a table of contents. Now we’ve moved away from title tags, you’ll need to tell us which <singleline> in a repeater should be used to build your table of contents. This is done with the new repeatertitle="true" attribute.

For example, you have a table of contents set up in your template, and you want the main headline in each repeating item to populate it automatically. Here’s how this would look:

In keeping with the HTML-like structure of our template language, the old <$repeatertitle$> tag, which tells us where to place each item in your table of contents layout has been updated to <repeatertitle></repeatertitle>.

This also means you can populate a table of contents from multiple repeaters, which is something we’ve had a lot of requests for. These will appear in the order they appear in your template code.

Date tags tweaked

For consistency, date tags have also been tweaked by removing the dollar symbol. For example, the old <$currentday$> tag has been simplified to <currentday>. Check the full documentation for examples of all date fields.

Get coding…

To dive straight into the new language, you can check out the full documentation, or get your hands dirty with the sample template below. This is the same template used in last week’s video demo, is mobile optimized and includes a lot of the new tags such as layout and label.

Download the templateDownload the sample template (zip file, 688kb)

One of the biggest aims of this update to the editor and template language was to try and make the migration as simple as possible. Hopefully we’ve struck a balance between giving you all loads more flexibility in how you design templates, whilst still retaining the simple template language to make it all happen.

This is step one of something that we’ll continue to evolve, but in the mean time we can’t wait for you guys to start importing designs that were never previously possible.

  • Alex Dunae

    Great update and much appreciated. Really looking forward to the layout tag.

  • Alex Dunae

    Great update and much appreciated. Really looking forward to the layout tag.

  • David Greiner

    Thanks Alex, we’re really pumped to see what sort of designs these updates make possible.

  • David Greiner

    Thanks Alex, we’re really pumped to see what sort of designs these updates make possible.

  • Muzza

    CM thanks for the sample template, just for other user it still has some of the old language. ie <$currentyear$>

  • Muzza

    CM thanks for the sample template, just for other user it still has some of the old language. ie <$currentyear$>

  • David Greiner

    Great spotting Muzza, we’ll get that fixed up first thing tomorrow along with our free templates.

  • David Greiner

    Great spotting Muzza, we’ll get that fixed up first thing tomorrow along with our free templates.

  • Jason

    So far, so good. The new layouts feature solves so many issues for me. Thanks for the continuous investment in CM!

  • Jason

    So far, so good. The new layouts feature solves so many issues for me. Thanks for the continuous investment in CM!

  • Jammy93

    Wow – can’t wait to play with this. Thanks CM.

  • Jammy93

    Wow – can’t wait to play with this. Thanks CM.

  • Chris

    Just in time. I had three templates lined up to do. Now I only need to do one. Lets put it through its paces and see what happens.

  • Chris

    Just in time. I had three templates lined up to do. Now I only need to do one. Lets put it through its paces and see what happens.

  • Steven Quick

    Nice update.

    On request the editor pane could be wider than 400px on larger screens eg: 1920×1080, 1680×1050. How about some responsive design style css for that or perhaps give it a drag handle to resize it.

  • Steven Quick

    Nice update.

    On request the editor pane could be wider than 400px on larger screens eg: 1920×1080, 1680×1050. How about some responsive design style css for that or perhaps give it a drag handle to resize it.

  • Jason

    auto-generated previews for templates… nice touch.

  • Jason

    auto-generated previews for templates… nice touch.

  • Gary

    Hi,

    I’ve noticed something rather alarming… since the new editor has come about all of my campaigns fail to render correctly in Gmail. Hotmail, Outlook are fine.

    Even more of a concern is that campaigns using *tried and tested* templates (old ones) that I know have worked in the past perfectly with Gmail are now no longer rendered correctly in Gmail.

    I’ll generate a support ticket but this is really a headache, hopefully this may be an isolated incident… but I can’t explain why old templates that did work are now no longer working via campaignmonitor…

    Cheers

  • Gary

    Hi,

    I’ve noticed something rather alarming… since the new editor has come about all of my campaigns fail to render correctly in Gmail. Hotmail, Outlook are fine.

    Even more of a concern is that campaigns using *tried and tested* templates (old ones) that I know have worked in the past perfectly with Gmail are now no longer rendered correctly in Gmail.

    I’ll generate a support ticket but this is really a headache, hopefully this may be an isolated incident… but I can’t explain why old templates that did work are now no longer working via campaignmonitor…

    Cheers

  • Marc

    @Gary

    Yes, we are experiencing the same issues in Gmail which were rendering find before these recent changes.

  • Marc

    @Gary

    Yes, we are experiencing the same issues in Gmail which were rendering find before these recent changes.

  • David Greiner

    @Gary and @Mark, thanks for the heds up about the Gmail rendering. We’re looking into this one for you right now and will get back to you as soon as we get to the bottom of it.

  • David Greiner

    @Gary and @Mark, thanks for the heds up about the Gmail rendering. We’re looking into this one for you right now and will get back to you as soon as we get to the bottom of it.

  • Marc

    Thanks David, from our quick investigations it appears that inline styles for elements that have a set class are no longer getting applied (at least on tags)

  • Marc

    Thanks David, from our quick investigations it appears that inline styles for elements that have a set class are no longer getting applied (at least on tags)

  • David Greiner

    Spot on Marc, we’re working on a fix for this right now and I’ll let you guys know the moment it’s pushed live.

  • David Greiner

    Spot on Marc, we’re working on a fix for this right now and I’ll let you guys know the moment it’s pushed live.

  • David Greiner

    Marc and Gary, I just wanted to let you both know that a fix to the inline CSS has been pushed live, and all emails look great in Gmail by default now. Thanks gain for the heads up.

  • David Greiner

    Marc and Gary, I just wanted to let you both know that a fix to the inline CSS has been pushed live, and all emails look great in Gmail by default now. Thanks gain for the heads up.

  • Chris Guillou

    This opens up so many perspectives it makes my head spin ;-)

    Bravo à toute l’équipe de Campaign Monitor !

    Chris

  • Chris Guillou

    This opens up so many perspectives it makes my head spin ;-)

    Bravo à toute l’équipe de Campaign Monitor !

    Chris

  • Stephen

    When did you guys first start working on the new editor? Excellent job.

  • Stephen

    When did you guys first start working on the new editor? Excellent job.

  • Sarah

    This sounds awesome, I can’t wait to try it out!!

  • Sarah

    This sounds awesome, I can’t wait to try it out!!

  • Justin

    Does this mean that we have to update all old templates to the new code, or will they still work and this is for future builds?

  • Justin

    Does this mean that we have to update all old templates to the new code, or will they still work and this is for future builds?

  • Diana Potter

    @Justin all previous templates have been automatically updated to the new code, so you don’t need to do anything. You can even import a template using the old code and we’ll update it for you. We’d definitely recommend using the new code, though, since it opens up so much more functionality for you!

  • Diana Potter

    @Justin all previous templates have been automatically updated to the new code, so you don’t need to do anything. You can even import a template using the old code and we’ll update it for you. We’d definitely recommend using the new code, though, since it opens up so much more functionality for you!

  • Alex Collins

    Guys, great work on the new editor! Double thumbs up from us here. Only thing I noticed is that it didn’t want to work on my iPad – I couldn’t click the text fields to edit the text, it may just be my device, or are there known issues with this at the moment?

    Cheers – keep up the awesome work!

  • Alex Collins

    Guys, great work on the new editor! Double thumbs up from us here. Only thing I noticed is that it didn’t want to work on my iPad – I couldn’t click the text fields to edit the text, it may just be my device, or are there known issues with this at the moment?

    Cheers – keep up the awesome work!

  • Chr1s

    Hi guys, terrific new features and possibilities!

    Steven’s suggestion about a resizable editor pane is a good one though… I already caught myself hoovering over the vertical divider thinking it was already possible to drag it… ;-)

    So +1 for that idea.

    But overall: fantastic!

  • Chr1s

    Hi guys, terrific new features and possibilities!

    Steven’s suggestion about a resizable editor pane is a good one though… I already caught myself hoovering over the vertical divider thinking it was already possible to drag it… ;-)

    So +1 for that idea.

    But overall: fantastic!

  • David Greiner

    Thanks Chris/Steven, that’s something we’re looking into right now too. Once we’re 100% happy that the current design is handling every template you guys can throw at it, we’ll be making some subtle improvements to the editing experience. An editing area optimised for your screen is a big part of that.

    Alex, care to get in touch about the iPad experience. We had it working on our end during testing, so hopefully it’s a simple issue we can sort for you.

  • David Greiner

    Thanks Chris/Steven, that’s something we’re looking into right now too. Once we’re 100% happy that the current design is handling every template you guys can throw at it, we’ll be making some subtle improvements to the editing experience. An editing area optimised for your screen is a big part of that.

    Alex, care to get in touch about the iPad experience. We had it working on our end during testing, so hopefully it’s a simple issue we can sort for you.

  • Chris

    CM-Agency seems to be the last full service agency that doesn´t produce any bullshit! Thank you very much for this update.

  • Chris

    CM-Agency seems to be the last full service agency that doesn´t produce any bullshit! Thank you very much for this update.

  • RJ

    Wonderful new editing tools and I love the new template code.

    Found a teenie bug:

    It cropped up in a template with a full width header image; that header image is the full width of the container table at 540 pixels. Now where I see the bug is when the header image placed within a nested table, inside that container.

    i.e., table – tr – td –
    table – tr -td –
    img

    On first view everything is cool. But when the header image is replaced, the value of width attribute seems to be ignored and the image is crushed down to 100 pixels wide.

    Pop the image out of the nested table and all is well.

  • RJ

    Wonderful new editing tools and I love the new template code.

    Found a teenie bug:

    It cropped up in a template with a full width header image; that header image is the full width of the container table at 540 pixels. Now where I see the bug is when the header image placed within a nested table, inside that container.

    i.e., table – tr – td –
    table – tr -td –
    img

    On first view everything is cool. But when the header image is replaced, the value of width attribute seems to be ignored and the image is crushed down to 100 pixels wide.

    Pop the image out of the nested table and all is well.

  • Jonathan

    Good Lord you are clever! Well done. Well done. It’s glorious. Encore bravo à toute l’équipe!

    Here’s my +1 on the resizable editor pane, and just one thought. The editor pane is open but black on first load, then closes and opens and closes and opens on changing from element to element. It makes for a bit of a jumpy ride for the eye.

    OK, sorry, here’s another thought: how about a “Replace image” choice on the image selector. Currently I have Edit Link, Remove Link, Remove Image. Replace Image would save me a *whole click* ;-)

    Good job. Good job. Well done etc. etc. etc. …

  • Jonathan

    Good Lord you are clever! Well done. Well done. It’s glorious. Encore bravo à toute l’équipe!

    Here’s my +1 on the resizable editor pane, and just one thought. The editor pane is open but black on first load, then closes and opens and closes and opens on changing from element to element. It makes for a bit of a jumpy ride for the eye.

    OK, sorry, here’s another thought: how about a “Replace image” choice on the image selector. Currently I have Edit Link, Remove Link, Remove Image. Replace Image would save me a *whole click* ;-)

    Good job. Good job. Well done etc. etc. etc. …

  • Allan White

    The new template editor rolls out the day before my next project! Epic!

    A humble request: would you guys mind updating the Coda clips? They’re key to my workflow and so elegant. Thank you!

  • Allan White

    The new template editor rolls out the day before my next project! Epic!

    A humble request: would you guys mind updating the Coda clips? They’re key to my workflow and so elegant. Thank you!

  • agribusiness

    Hi
    Having a lot of trouble with missing content from any and all of the previous sent campaigns which are to be editeded and resent. content from the right column is gone, sometimes it shows on the preview mostly it is just gone. which means I have to recreate the whole email from scratch. Please Help!

  • agribusiness

    Hi
    Having a lot of trouble with missing content from any and all of the previous sent campaigns which are to be editeded and resent. content from the right column is gone, sometimes it shows on the preview mostly it is just gone. which means I have to recreate the whole email from scratch. Please Help!

  • David Greiner

    Hi @agribusiness, I’m actually speaking with Paul about this issue right now. We’re currently restoring the content for your drafts now, and I’ll let him know the moment it’s complete and available in your account. Apologies for any confusion this one caused.

  • David Greiner

    Hi @agribusiness, I’m actually speaking with Paul about this issue right now. We’re currently restoring the content for your drafts now, and I’ll let him know the moment it’s complete and available in your account. Apologies for any confusion this one caused.

  • agribusiness

    Thanks David, I had started to redraft but will hold off.

  • agribusiness

    Thanks David, I had started to redraft but will hold off.

  • agribusiness

    My newsletter draft now contains the content. However the content from any other campaign thatI want to edit and resend is still not working. I have loaded another draft which still has the same problem of missing content. Hopefully you are still working on this.

  • agribusiness

    My newsletter draft now contains the content. However the content from any other campaign thatI want to edit and resend is still not working. I have loaded another draft which still has the same problem of missing content. Hopefully you are still working on this.

  • David Greiner

    We’re looking at exactly that right now, and will be in touch once everything is wrapped up.

  • David Greiner

    We’re looking at exactly that right now, and will be in touch once everything is wrapped up.

  • agribusiness

    more issues have become apparant. need help immediately.

  • agribusiness

    more issues have become apparant. need help immediately.

  • David Greiner

    Hi Deb, I just fired you an email with an update, but figured I’d add it here too in case you missed it. All of those outstanding issues have been resolved – your content now appears for all drafts, and resending any old campaigns also works.

    Thanks again for your patience while we got to the bottom of this for you.

  • David Greiner

    Hi Deb, I just fired you an email with an update, but figured I’d add it here too in case you missed it. All of those outstanding issues have been resolved – your content now appears for all drafts, and resending any old campaigns also works.

    Thanks again for your patience while we got to the bottom of this for you.

  • agribusiness

    Thanks for fixing the content issues so expediently. :)

  • agribusiness

    Thanks for fixing the content issues so expediently. :)

  • Fern

    If I go to edit content for a draft, i get the panel on the left which says click any edit button, unfortunately I see none, and cannot edit the content ?

  • Fern

    If I go to edit content for a draft, i get the panel on the left which says click any edit button, unfortunately I see none, and cannot edit the content ?

  • David Greiner

    @Fern, please fire all the details you can through to our support team and we’ll help you get to the bottom of it right away.

  • David Greiner

    @Fern, please fire all the details you can through to our support team and we’ll help you get to the bottom of it right away.

  • Eystein Mack Alnæs

    This is great!
    Is there a way to add anchors within a <singleline>? Alternatively not to let <multiline> add formatting paragraph tags within itself?

  • Eystein Mack Alnæs

    This is great!
    Is there a way to add anchors within a <singleline>? Alternatively not to let <multiline> add formatting paragraph tags within itself?

  • Marcia

    just reallized that things have changed!!! I have one “issue”. In edit a resend a campaign, I cannot find how to change a photo in the body of the content. It used to be extremely easy, so I can’t imagine you have made it more difficult, so please explain to me how to accomplish this minor task!!!!

  • Marcia

    just reallized that things have changed!!! I have one “issue”. In edit a resend a campaign, I cannot find how to change a photo in the body of the content. It used to be extremely easy, so I can’t imagine you have made it more difficult, so please explain to me how to accomplish this minor task!!!!

  • Gary

    A little update on Gmail not rendering correctly: we had to move all CSS inline which fixed everything … but is this the recommended protocol for all future CampaignMonitor campaigns?

  • Gary

    A little update on Gmail not rendering correctly: we had to move all CSS inline which fixed everything … but is this the recommended protocol for all future CampaignMonitor campaigns?

  • Mathew Patterson

    Gary,

    Yes, that’s always been our recommendation for Gmail, and Campaign Monitor can automatically do that for you (that’s the part that was temporarily broken).

  • Mathew Patterson

    Gary,

    Yes, that’s always been our recommendation for Gmail, and Campaign Monitor can automatically do that for you (that’s the part that was temporarily broken).

  • Chr1s

    Hi guys,

    A little thing you might want to have a look at (not a biggie). When updating a template, you have to upload the zipped images again too, even when you only updated the html (I remember this was the case also a couple of years ago). Is this something that “creeped back in” or is it necessary because of the new editor?

  • Chr1s

    Hi guys,

    A little thing you might want to have a look at (not a biggie). When updating a template, you have to upload the zipped images again too, even when you only updated the html (I remember this was the case also a couple of years ago). Is this something that “creeped back in” or is it necessary because of the new editor?

  • scott

    Feedback on new interface:
    a bigger edit area width on left panel
    ability to insert line breaks
    as well as

    . When you press enter at the of a line a new paragraph is created would like option to insert a line break.

  • scott

    Feedback on new interface:
    a bigger edit area width on left panel
    ability to insert line breaks
    as well as

    . When you press enter at the of a line a new paragraph is created would like option to insert a line break.

  • Jonathan

    +1 on Chr1s’ last comment. I’ve noticed this a few(!) times today.

  • Jonathan

    +1 on Chr1s’ last comment. I’ve noticed this a few(!) times today.

  • Jammy

    Absolutely fantastic update – well done CM.
    Couple of small points to add to the above.

    Multiline editor is a bit too small – finding it hard to work in that space. Would be nice to be able to click down/up arrow to extend/contract as per the old editor.
    No longer able to upload a screenshot of an email template which is a shame.
    +1 to Chr1s’ comment above too.

  • Jammy

    Absolutely fantastic update – well done CM.
    Couple of small points to add to the above.

    Multiline editor is a bit too small – finding it hard to work in that space. Would be nice to be able to click down/up arrow to extend/contract as per the old editor.
    No longer able to upload a screenshot of an email template which is a shame.
    +1 to Chr1s’ comment above too.

  • Andrew Lamont

    Love the new functions, but will existing legacy templates still work. Having clients with ie7 reporting all kinds of issues (will provide actual feedback when I have it).

    is this widespread?

    Thanks,
    aj

  • Andrew Lamont

    Love the new functions, but will existing legacy templates still work. Having clients with ie7 reporting all kinds of issues (will provide actual feedback when I have it).

    is this widespread?

    Thanks,
    aj

  • David Greiner

    Hey Andrew, great to hear you like that you see. All legacy templates are updated to the new langage automatically, but if you see any funky behaviour please contact us with as many details as you can and we’ll get to the bottom of it for you.

    Usually something like an unclosed tag or lack of doctype can be the reasons behind strange behaviour, but either way let us know and we’ll sort it out for you.

  • David Greiner

    Hey Andrew, great to hear you like that you see. All legacy templates are updated to the new langage automatically, but if you see any funky behaviour please contact us with as many details as you can and we’ll get to the bottom of it for you.

    Usually something like an unclosed tag or lack of doctype can be the reasons behind strange behaviour, but either way let us know and we’ll sort it out for you.

  • Lauren

    Is there any way to switch an article to a different layout? It seems that once it’s applied, I can’t switch it; I can only add a new article and choose another layout.

  • Lauren

    Is there any way to switch an article to a different layout? It seems that once it’s applied, I can’t switch it; I can only add a new article and choose another layout.

  • David Greiner

    Hey Lauren, once you’ve created an item using a certain layout, you can’t switch it I’m afraid. You’ll need to create a new item if you want to switch to use a different layout instead.

  • David Greiner

    Hey Lauren, once you’ve created an item using a certain layout, you can’t switch it I’m afraid. You’ll need to create a new item if you want to switch to use a different layout instead.

  • colleen

    Hello I was very excited to watch the video, however the title editor functions aren’t coming up on our existing template, do I need to start up again in a new template to be able to access the new funtions?

  • colleen

    Hello I was very excited to watch the video, however the title editor functions aren’t coming up on our existing template, do I need to start up again in a new template to be able to access the new funtions?

  • David Greiner

    Hi Colleen, if you’re referring to the little drop downs when adding a new item to your template, they’re accessed via the new <layout> tag, which you’ll need to add to your template code first. We explain those tags i more detail in this post.

  • David Greiner

    Hi Colleen, if you’re referring to the little drop downs when adding a new item to your template, they’re accessed via the new <layout> tag, which you’ll need to add to your template code first. We explain those tags i more detail in this post.

Want to improve your email marketing? Subscribe to get tips on improving your email marketing delivered to your inbox.
X

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free