In the last few weeks, we’ve extensively covered email templates, from earlier tutorials on getting started and using content tags, to a Q&A with ThemeForest regarding their extensive template gallery. Finally, we’re going to treat you to a quick overview of Campaign Monitor’s editor tags, so you can get started on creating templates that can be edited in Campaign Monitor’s WYSIWYG editor.
Our web-based visual editor is certainly one of the easiest and powerful email builders available – its intuitive interface requires no prior experience with HTML email templates or code, yet provides your clients with the tools they need to add and format text and images, as well as add personalization tags and quick links. As a designer, all you have to do is add a few editor tags to an email template, upload your creation to your client’s account and they’ll be off and running before you can say, “monthly newsletter”!
What are editor tags?
Editor tags denote areas of your email template that can either be edited, or be dynamically updated by the Campaign Monitor WYSIWYG editor. They can be inserted into the HTML code of your email template:
For example, the editor tag,
<$title$> can be inserted into an email template to denote where a heading can go. The email template designer can then apply creative control, using plain old HTML and CSS to suit. The title text can then be edited once the template is uploaded to the WYSIWYG editor and have links applied.
Using editor tags
There are a number of functional reasons why you would use editor tags in your email templates, including:
- Ensuring the current date, month or year is displayed on your email:
Welcome to our <$currentmonthname$> newsletter…
- Marking where specific copy should go:
<$description default='<p>You can insert your email copy here</p>'$>
- Insert a default image to be used in the email template:
<img src="<$imagesrc link='true' default='cute_cat_exp.jpg'$>" width="160">
Here’s an example of an email template in the WYSIWYG editor, with these tags inserted:
Note that the red arrows are our addition, not the editor’s! As you can see, the date tags have dynamically updated, as has the table of contents on the left-hand side. We achieved this using
<repeater toc='true'> tag and attribute. Take a look at our complete list of Campaign Monitor tags for the full story on tag usage.
Adding your template to a client’s account
Once you have finished creating an email template, it’s time to upload it to your client’s Campaign Monitor account. To get started, log in, navigate to your client’s account and click the ‘Templates’ tab:
You can then add a new template for your client to use. Click on “Add a new template”, then upload your files just as you would an HTML email campaign. You can also add a screenshot so your template can be easily identified later:
Now, when your client logs into their account, the template will be available for them to add to a new campaign and edit to their heart’s content.
So… What’s next? We hope that this series of blog posts on email templates has inspired you to get messy with code, build your own templates and even consider selling your designs! Don’t forget that you can always tweet in if you’ve created something you’re particularly proud of – we’re always keen to share the love. If you have any questions regarding the creation of email templates, we’ll ensure they get answered on the forums.