The following are code snippets that will work within your custom ConvertKit email template.
NOTE: Some of the CSS below is included in the Modern/Classic templates by default! So if you’re building off of one of those templates, you may be able to locate the existing code and edit it rather than adding it in from scratch. This prevents your template from getting too bloated, as well as any potential styling conflicts.
First things first:
Have you created your custom email template yet? If not, check out this article for a how-to!
Are you looking for CSS snippets for our visual Email Template editor? If so, click here instead!
Realign your email content
If you want your email content to be centered, try this CSS:
.message-content {
margin: 30px auto;
}If you want it to be left-aligned, try this CSS:
.message-content {
margin: 30px 30px;
}
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.
Button
For a simple button, add a class of "button" to any <a> tag from the email code editor. For a video tutorial of how to do this, click here.
To change the styling of your button, find or add this into your template CSS:
.button {
border: none;
background: #777;
color: #fff;
padding: 10px;
display: inline-block;
margin: 10px 0px;
font-family: Helvetica, Arial, sans-serif;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}You can customize the your button styling attributes from here. For example:
background: #777;
Change #777 to any color hex code you like to change the background color of your button.
padding: 10px;
Increase/decrease the ‘10’ value here to increase/decrease the size of your button accordingly.
Blockquote
If you want to call out a particular section of text in your template, trying using the blockquote styling!
To change the styling of your blockquote, find or add this into your template CSS:
blockquote {
border-left: solid 5px #aaa;
margin: 20px 0px;
padding: 15px 30px;
font-size: 20px;
line-height: 1.5em;
color: #444;
font-family: Helvetica, Arial, sans-serif;
}To apply this to text in your email, click the < > icon in the editor toolbar, and add <blockquote> where you want the quote to begin, and </blockquote> where you want it to end.
For example: <blockquote>Your very important quote here!</blockquote>
Social follow links
For social follow links you can paste in the following code, which you can customize according to the steps below:
<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; display:inline-block;"></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; display:inline-block;"></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; display:inline-block;"></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; display:inline-block;"></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;display:inline-block;"></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;display:inline-block;"></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; display:inline-block;"></a>
</div>
Follow these steps to customize it:
Update the links to point to your profiles (e.g. change twitter.com to twitter.com/username).
Remove any links that aren't relevant (like Google Plus)
If you want to use your own icon images, change the image path inside the quotes after src=”...” to your own icon image.