Create a Custom Email Template

At ConvertKit we highly encourage sending emails that look personal—like you just opened up Gmail and sent them a note. But that some customers want a more advanced style so we enabled coding custom email templates. If you don't want (or don't know how) to code from scratch, we created two simple templates to get you started: classic and modern.

Screen Shot 2016-03-25 at 6.57.25 AM Screen Shot 2016-03-25 at 6.57.12 AM

Classic uses serif fonts and modern uses sans-serif. Click on each image to see them at actual size.

The key differences between these and plain text templates are:

  • Centered layout
  • Larger font size
  • Custom fonts
  • Blockquote styles
  • Social link styles
  • Logo image snippet
  • Basic button styles

Installing the templates

First choose which template you want to use. Then get the code from here:

Then visit your account email templates page and create a new template. Or you can grab the code from the templates that are already installed in your account as a basis. 

Screen Shot 2016-04-01 at 8.47.59 AM

Name your template and copy in the template code from the link above.

Screen Shot 2016-04-01 at 8.50.27 AM

Save the template and then set it as the default for your account.

Screen Shot 2016-04-01 at 8.52.31 AM

Adding custom snippets

The CSS for each of these snippets is included in the Classic and Modern templates. If you want to use them in another template you'll need to add the corresponding CSS as well.

A logo image

To add a logo that links back to your site copy the following code. The <a> tag has the link to your site and the <img> tag has the link to your logo.
 <a href="http://convertkit.com">
   <img src="http://convertkit.com/images/template-images/template-logo.jpg">
 </a>

If you don't have your logo hosted anywhere right now you can upload it into a broadcast or sequence inside ConvertKit and then copy and paste the direct link to it.

Button

For a simple button add a class of "button" to any <a> tag.
<a href="" class="button">A button to my site</a>

Blockquote

<blockquote> This is an important quote. </blockquote>

Social follow links

For social follow links you can paste in the following code. Then follow these steps:

  1. Update the links to point to your profiles (e.g. change twitter.com to twitter.com/username).
  2. Remove any links that aren't relevant (like Google Plus)
  3. Paste it into your template.
   <div class="social-links">
<a href="http://www.facebook.com/"><img src="http://convertkit.com/images/social-icons/facebook.png" alt="Facebook" width="48" style="text-decoration: none; width: 48px;"></a>
<a href="https://twitter.com/"><img src="http://convertkit.com/images/social-icons/twitter.png" alt="Twitter" width="48" style="text-decoration: none; width: 48px;"></a>
<a href="https://instagram.com/"><img src="http://convertkit.com/images/social-icons/instagram.png" alt="Instagram" width="48" style="text-decoration: none; width: 48px;"></a>
<a href="https://www.pinterest.com/"><img src="http://convertkit.com/images/social-icons/pinterest.png" alt="Pinterest" width="48" style="text-decoration: none; width: 48px;"></a>
<a href="https://plus.google.com/"><img src="http://convertkit.com/images/social-icons/google-plus.png" alt="Google Plus" width="48" style="text-decoration: none; width: 48px;"></a>
<a href="http://youtube.com"><img src="http://convertkit.com/images/social-icons/youtube_alt.png" alt="YouTube" width="48" style="text-decoration: none; width: 48px;"></a>
<a href="http://convertkit.com"><img src="http://convertkit.com/images/social-icons/website.png" alt="Website" width="48" style="text-decoration: none; width: 48px;"></a>
 </div>

Want help with this? 

Melissa Thorpe is a Certified ConvertKit Expert, and would love to help you out! 

Reach her here!

Still need help? Contact Us Contact Us