Bác nào có template html của campaign monitor không ah năm 2024

While email builders within services like Campaign Monitor and MailChimp are becoming increasingly more powerful, there are still great reasons to use an HTML email template that’s unique to your brand.

In this snappy tutorial, we’ll outline how to get started using an HTML email template in Campaign Monitor, for your email campaigns and automated workflows. Depending on how much you want to customize the template, it can take anywhere from five minutes to import and start sending, to quite a few hours of coding and testing for more customized design work.

Once you have found (and even customized) a template that you love, you’ll be able to use it repeatedly—and with Campaign Monitor’s design and spam testing tools, be confident that your email messages look great to recipients everywhere.

What is an HTML Email Template?

In short, an HTML email template (which we’ll simply call a “template” from now on) is an HTML document and accompanying image files, which are designed to be imported to an email platform like Campaign Monitor or MailChimp. Once imported, templates can be used time and time again to create email marketing messages, which can be sent to a list of subscribers (ie. email recipients). These can take the form of newsletters, weekly blog content summaries, event invitations and more.

Campaign Monitor Template Tags

An email template should come with editable text and image areas–either standalone, or within repeatable “layouts” as defined by Campaign Monitor’s template tag language. This versatile language can be used to personalize downloaded HTML email templates, convert existing HTML email newsletters to templates, or create your own templates from scratch.

• <repeater> is a content block which can be repeated an infinite number of times.
• <layout> includes multiple separate designs inside a repeating element.
• <multiline> outputs HTML you can modify using the Campaign Monitor WYSIWYG editor.

When a template has been correctly coded with tags, you will be able to import it, then use Campaign Monitor’s email editor to create email campaigns and automated workflows.

Why Use a Template?

If your business (or that of your client) has specific brand guidelines, then it’s likely that the email newsletters you’re working with already have an established look-and-feel. Alternately, if you’re making a first foray into email marketing, you might want to make all your messages look a certain way; one which can’t be achieved using the email builder.

In both cases, having a template can allow you to maintain your brand, plus reduce the design-to-send turnaround time dramatically in comparison to say, coding an HTML email from scratch.

If you’ve found a template which has exactly the layout, and aesthetic that you’re after, well done! You can skip the next section, import it into Campaign Monitor and start creating email campaigns. However, if you need to make edits, then the following may come in handy.

Skills You Need to Edit a Template

Back in the day, if you wanted to create a webpage, you would fire up Notepad to create an HTML file, create a folder for the images (usually called, well, /images), then after a few hours of adding content and testing in your browser, you’d upload the whole lot to a public folder on the web.

All these years later, working with template files is not that dissimilar, however instead of uploading, we’ll be importing the template to Campaign Monitor. To reach this step you need:

• Basic HTML / CSS coding skills
• Campaign Monitor’s template tag language
• Guide to CSS Support in HTML Email
• A code editor like TextMate, Sublime Text or Brackets

If you can confidently edit and test HTML documents (keeping in mind that CSS support in email clients like Gmail, Outlook and others is fabulously quirky), then you can edit email templates to your heart’s delight.

How to Import a Template into Campaign Monitor

To prepare your template for import, you’ll need:

• The HTML file.
• Any other files that your HTML references (such as images and CSS) contained in a single folder and compressed to ZIP format.
  
  
  

Once ready, you’ll be able to import the template to the Templates section of your Campaign Monitor account:

1. Click your profile image and go to Templates.
2. Go to Import.
3. Assign your new template a name, such as “My Newsletter.”
4. Click Choose file (below HTML page) to select the HTML file from your computer.
5. Then click Choose file (below All other image and CSS files) to select the ZIP file (if you have one) from your computer.
6. Click Add template to upload the files.

Is the Template Working?

If you’ve been able to import the template, congratulations! You should see it under My Templates when you create a new email campaign or workflow. Once selected, you can start adding content in the Campaign Monitor email editor.

Once you create a campaign, you can automatically test it across 20+ major email clients such as Mail for the iPhone & iPad, Gmail, Outlook and more, using Campaign Monitor’s design and spam tests. Alternately, you can manually test the campaign by sending a test email to your email accounts across various devices.

What Can Possibly go Wrong?

There can always be hiccups along the way, from the moment you attempt to import a template, through to the testing stage. So, here’s a quick look at some classic problems and solutions:

The Template Won’t Import into Campaign Monitor

Check that the HTML code (including template tags) is well-formed.

Make sure that you’re not accidentally attempting to import large and unnecessary files, like Photoshop assets and video.

My Campaign Doesn’t Look Good on Mobile Devices

Ensure the HTML email document is “responsive”, ie. contains valid media queries in the CSS stylesheet. Note that not all email clients support media queries, including Gmail on iOS/Android.

Emails Look Different in a Variety of Inboxes

You may find, for example, that results in Gmail appear different from say, Apple Mail. Check if the HTML email contains CSS3 properties, web fonts - and provides fallbacks where possible. Not all email clients provide comprehensive CSS support, but it’s often possible to ensure the message is still readable and degrades gracefully, even under less-than-perfect circumstances.

In Summary

A good email template will make your campaigns look great on both mobile, web and desktop devices alike–while there may be variation between how it looks in a web browser and in the inbox, the message should be always readable and easy to navigate.

However, if you’ve been manually importing HTML emails up to this point, you’ll likely find that using a good email template will save you and your team countless hours creating, importing and testing email messages. You’ll wonder how you ever survived without it!

I hope you enjoyed this tutorial and now feel confident selecting a template, preparing it for Campaign Monitor, then importing and using it for your email campaigns and automated workflows. For inspiration, I recommend visiting Campaign Monitor’s email design gallery - then using your template know-how to create your own unique design!

Useful Resources

• Campaign Monitor templates on Envato Market
• Campaign Monitor email design gallery, for inspiration
• Creating a Future-Proof Responsive Email Without Media Queries
• Getting Started with Email Marketing

Did you find this post useful?

Ros works at Campaign Monitor, the purveyors of truly awesome email marketing software for designers and their clients. With a background in direct marketing and email design, she spends her days assisting customers with their own campaigns, listening to the Campaign Monitor community and having a lot of empathy for folks who have just stumbled into this whole email thing. Find her on the Campaign Monitor blog, or on Twitter.