How to make a template 'editable'

Hi, we've just taken over from our social media agency, choosing to manage our EDM campaigns in-house. However a number of templates they've set up does not seem to be editable i.e. it doesn't come up with customary little flags (hope this makes sense). How can I fix this? Thanks Isabel

davidaf davidaf, 2 years ago

Hi Isabel,

It would be helpful to know what kind of templates you are using and what you are trying to do with them. Can you get in touch with us at support with your account details and the templates you are trying to modify?

The Campaign Monitor Blog – HTML email smarts to go with your good looks
blad, 2 years ago

Hi Isabel

I'm dong something similar, so thought I would share how I've approached the issue of taking an existing email and turning it into a template.

1.  Save your email as an HTML file
Once you have your raw HTML file, you can work on this to turn it into a functioning CM template.

2.  Format the css
So you can work on it more easily, format it using a site like Clean CSS

3.  Strip the inline styling
CM outputs both the class attribute, and its styling as inline style="font-family: Arial" etc.
When creating on a template, you want to remove this inline styling (it will be re-inserted when the tempalte is used in CM). Use an inline-stripper to get rid of the inline CSS, and just leave the class=xyz etc. I use HTML Cleaner but there are others.

You should now be left with an HTML file that has no inline styles, and simply refers to the classes.

4.  Replace hardcoded text with CM tags
Eg. you might replace

<h1 class="one-col-bg">I am a header</h1>


    <singleline label='Your header line'>Default text till you change it</singleline>

See Create editable content for all the tags you can use. Note that unfortunately you can't (yet) use all of the features you might see in the CM template editor when using a CM template eg. the special logo section that lets you modify the size of the logo (see Making templates like those in gallery). For now, you'll need to just insert an <image editable> tag and set your own sizing in the HTML.

5.  Insert and zip up your images
Harcode your default images into your HTML template file, referring to them as ./images/xyz.jpg. Then zip up your image directory.

6.  Strip out the web version, unsubscribe, preferences and social media HTML
Remove the associated HTML and styling with these tags, and replace them with the CM tags <webversion>, <unsubscribe>, <preferences> and <fbook><tweet> etc. tags.

7.   Import your template
In the templates section of CM, import your HTML and zipped images file. You may get some errors (eg. missing images, <layouts> without <repeaters> etc. Fix these, and re-upload till the template validates. You can preview as you go.

8.   Use a new campaign for each new template.
Changing a template within an existing campaign can create problems as the campaign doesn't know where to put everything in the new template. You can end up with images etc all mixed up after you change templates in a campaign. After finding this out (see my question: Editor picking up wrong template ) , I found it best to simply create a new campaign when uploading a new template (and deleting the old campaigns as I go).

The steps can be a bit tedious, but once you've got your template validating and looking close, minor fixes are quite easy. Hope that helps anyone else performing this taks, and good luck with it!


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