How To Increase The Font Size And Change Colors In Email Templates

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.

Screen Shot 2016-01-18 at 7.45.28 PM

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.

3. Making your 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)   a.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!

Still need help? Contact Us Contact Us