Home Resources Blog

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.

This blog provides general information and discussion about email marketing and related subjects. The content provided in this blog ("Content”), should not be construed as and is not intended to constitute financial, legal or tax advice. You should seek the advice of professionals prior to acting upon any information contained in the Content. All Content is provided strictly “as is” and we make no warranty or representation of any kind regarding the Content.
Straight to your inbox

Get the best email and digital marketing content delivered.

Join 250,000 in-the-know marketers and get the latest marketing tips, tactics, and news right in your inbox.

Subscribe

See why 200,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Get started for free