The following are code snippets that will work within your custom HTML email template. If you're using the visual template editor, none of the below applies. Check out this article for help specific to visual templates.
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, if you haven't yet created your custom HTML email template, check out this article for a how-to!
Now, on to the specific examples!
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 into your HTML template. 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.
Buttons
The email editor uses a class of "email-button" for buttons.
So, to style them using an html template, find or add this into your template CSS:
.email-button {
border: none !important;
background-color: #777 !important;
color: #fff !important;
padding: 10px !important;
display: inline-block !important;
margin: 10px 0px !important;
font-family: Helvetica, Arial, sans-serif !important;
-webkit-border-radius: 3px !important;
-moz-border-radius: 3px !important;
border-radius: 3px !important;
}You can customize the your button styling attributes from here. For example:
background: #777 !important;
Change #777 to any color hex code you like to change the background color of your button.
padding: 10px !important;
Increase/decrease the ‘10’ value here to increase/decrease the size of your button accordingly.
IMPORTANT NOTE: You will ONLY see the effects of this CSS when previewing your emails. The editor doesn't load CSS the same way the platform does when it sends an email. When editing your email, buttons will show in their default color and styling. When previewing or sending the email, that color and styling will be overridden by the CSS you put in your template.
Blockquote
If you want to call out a particular section of text in your template, try using the blockquote styling!
To change the styling of your blockquote, find or add this into your template CSS:
.blockquotes {
border-left: solid 5px;
border-left-color: #000 !important;
margin: 20px 0px;
padding: 15px 30px;
}
.blockquotes-line {
font-size: 20px;
line-height: 1.5em;
color: #000 !important;
font-family: Helvetica, Arial, sans-serif;
}
You can customize the size and color of the blockquote border, as well as the font used within the individual lines of the blockquote.
Updates to this styling will show in the editor as well as in preview emails and normal sends.
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.