Creating an email template from scratch gives you the most control, but also means the most work and hassle with all those email rendering differences. To save time (and your hairline) you might like to start with one of our free email templates.
We've tested our templates in all the major email clients, so you know they'll work well (although of course they won't look identical in every case). You can grab the code, modify it to your needs and import it right into your account.
What you'll need to get started
Editing the templates is basically like editing a normal HTML page, so you will need some HTML editing tools and experience. If you have no HTML background at all, you can instead create a template using our template builder.
If you prefer to code your own, using a good HTML/text editor will save you trouble (in comparison to using something like MS Word or Publisher). Below are a few popular options.
For OS X
Also, if you'd like to brush up on your HTML skills, there are some great articles at SitePoint we recommend:
First, select a template
Getting started with a template is easy. Simply visit our template gallery and download your template of choice.
- Once downloaded, unzip the file to an easy-to-find directory on your computer.
- Next, navigate to the directory in question and browse the folders to see what you have to work with.
Inside the directory you will find:
- The Photoshop file (.psd) - this is the original design. For experienced web designers, you can use that file to make more significant image changes. You'd need to cut new images out of the file and export them as jpgs to use them. If you don't have a bit of web design experience, this is best left alone.
- A folder called HTML - these are static HTML files, with no special Campaign Monitor template tags in them. If you want to edit the content outside of Campaign Monitor and just import and send the complete campaign, these are the files to work with.
- A folder called 'html_with_cm_tags' - inside this folder are the same layout variations, but this time including the Campaign Monitor tags that make them usable in the Campaign Monitor WYSIWYG content editor. If you would like to upload a template, then you or your client log in, add content and send campaigns, these are the files you want to use.
Edit the copy and images
For this document, we'll assume you want to set up a template you can reuse with the WSIWYG editor. Open up the 'html_with_cm_tags' folder. Inside will be separate HTML files for the design variations available. Open the one you wish to use in your chosen editor.
This is where you can make changes to the header and footer copy, and add your own information. Be careful not to change the HTML tags, or the special Campaign Monitor tags (like <unsubscribe></unsubscribe>), because that could change the way the email is rendered.
If you want to make changes to the images, you'd need to do that in your own image editor. Open the .psd file included in the template to access the original files. Then cut out and export the changed images back into the same directory.
Import the modified template into your account
- When you are ready to import your template into your account, select ONLY the image files within this unzipped directory (just what is inside the 'images' folder) and zip those up, naming this file as you wish.
- Next log in to your account and select the 'Templates' tab on the right-hand side of the screen, then click the 'Add a new template' button.
- Then, give the template a name and locate the template's HTML file (the one you just modified). It will be something like 'right-sidebar.html' if you used that variation.
- Next, for the 'All other files in zip format (optional)' field, navigate to the .zip file containing the images you zipped up previously and select this.
- Finally, click the 'Add template' button to add the template to your account.
Sending a campaign using your template
Once your template has been imported, click on the Create & Send button and then choose Create new campaign. Fill out the details and click Next.
Finally, choose the Use one of my templates option and click on your imported template.
This will then load the WYSIWYG editor so you can begin adding your campaign content.
Once in the template, to enter text into an editable region within the template you simply click on the Edit icon to load the WYSIWYG editor. You are able to manually type your feature text here or paste it in as plain text. Then you can style it by bolding, underlining, italicising and so on.
You can upload one image for any specific element (if the template has one setup), using the 'Edit' button. To delete an editable region or feature in your template, simply click the 'Garbage bin' icon. To re-order regions, just click on the 4-way arrow icon and drag the regions to where you'd like it to appear.
If a content area is contained within repeater tags, you are able to add additional instances of it to create further editable layouts or regions. This is done by clicking the Add New button.
Learning more about Campaign Monitor templates
Now you know how to use the pre-made templates, you can start to experiment with them. Take a look at the HTML source code for your templates to see how they work.
For a full list of all the Campaign Monitor specific tags you can use, visit our detailed documentation. For design inspiration, browse the Campaign Monitor gallery and see what our other customers have produced.