The Basics

Customizing your email templates inside ConvertKit requires a bit of HTML and CSS knowledge, but for basic things it's pretty straightforward. This article will give you a starting point and hopefully get you comfortable with the basics.

1. Use another template as a baseline

A. Go to Account > Email Template.

B. Then select the Text Only template as a starting point.

C. Copy that full contents of the template to your clipboard (Ctrl + C).

2. Create a new template

A. Go back to the Email Template list page and create a new template.

B. Paste the sample template into your new template (Ctrl + V).

C. Name the template and hit save. Then click back in to the template.

Making Those Changes

Looking at the HTML and CSS you want to change a few key areas.

  • First for styling anything about the content you'll want to target the DIV with a class of 'message-content'. That looks like this:

.message-content { your CSShere }

  • The default template already has a max-width set on the message-content div like this:

.message-content { max-width: 600px; }

  • So we can just add to it for adding our font changes:

.message-content { max-width: 600px; font-size: 16px; }

  • And then if we wanted to change the color as well we would add this:

 .message-content { max-width: 600px; font-size: 16px; color: #ff0000; }

  (Don't use that color, though. It's an ugly red.)

  • Want to change your link colors? Try this:

.message-content a { color: red; }

Want to change the color of your unsubscribe link?

 That takes 2 steps.

  1. unsubscribe-link { color: red; } Then you'll target that command specifically in the footer with this...

    2. If you no longer wish to receive email, <a href="##{{ unsubscribe_url }}" class="unsubscribe-link">click here.</a>

But, again, change that color to match your own.

Feel free to look up CSS syntax in Google. But those examples should get you started! 

Create a Custom Header for your Email Template

Did this answer your question?