The love for ConvertKit is real, y’all!
Whether you fell in love with its ability to super-segment your list + tap into what they want from you… or you couldn’t believe how easy it was to create courses + funnels with sequences… or you fell hard for their automations, ConvertKit’s features has been captivating our hearts + minds as of lately.

Except, man – does she have to be so… plain-looking? Ummmm, NOPE!

And I will therefore use this opportunity to show you how YOU can create templates + customize the look of your emails with this post.

A lot ConvertKit converts (ahem!) are coming from MailChimp or Mailerlite. It is easy to understand the buzzkill of having no templates + yet, I’ve heard it a bunch when it comes to the utilitarian look that ConvertKit rocks. I don’t play that – and you’re reading this so I know you don’t either! It seems like you and I are on the same page about making your emails sexier – let’s do that!

Perhaps you’re tired of copying and pasting your links at the footer each time.
Maybe you wish your header would just auto-magically be there.
Or it may be that you think re-writing your signature block every time is sooooo passé.
Whatever you want to insert into your post – every! dang! time! – can easily be set up so I’ll walk you through the process.

Click here to subscribe

Here’s a quick video that will walk you through the whole process but feel free too skip that I just follow along with the step-by-step instruction.

You can therefore change any of the default settings of each + every email (so we’re talking about things like link colors or fonts or headers or footers) while will consequently modify its template.
To access your template, click on ACCOUNTS + then go to EMAIL TEMPLATE.

A quick coding 411 to explain what we’re doing :: in the video, I told you to put a header above the {{ message content }} + any footer you want to insert goes in after that.
Just above that, you notice is says <div class = “message-content”>. 

Consider this to be a most noteworthy element of your template. You are therefore telling your email template that it should adopt the style as it is defined in .message-content.

This means that just like an outfit… so if you don’t like the way something appears, you can change its “style”.
For instance, if you would rather use a bigger font, you would change::
.message-content { max-width: 600px; font-size: 10px; }
INTO .message-content { max-width: 600px; font-size: 12px; }

You can even add more customization to that line.
Picture this :: the default font type being used is something you want to change. Your entry could look like this ::

.message-content { font-family: Lato; max-width: 600px; font-size: 12px; }

Maybe you’d like to change the color of your links.
Then, you would do so by adding a line BEFORE the </style> tag that says ::

.message_content a { color: red; }

I’ve made these changes to my own code so here is a side-by-side of my newsletter with my email template, as an example.

CSS defines the code for your template. Think of CSS as America, where the over-arching language that is spoken, understood + delivered is English.
But what if you just want to change one thing, like making a single paragraph bigger?
That’s a job for HTML.
HTML is basically a regional accent – it’s the fine-tuning that allows you to give certain elements their own distinct flavor, all while abiding to the same rules + grammar set forth by the main frame, which is CSS.
With HTML, you won’t modify the template, change the language or how it is spoken but rather, HTML will allow you to toy with the specific email in question to make it its very own.

To do that, you’ll have to get out of your visual view + click the HTML view (in the emails within which you’re creating as broadcasts + sequences, not your within your template).

So let’s use that example of making a paragraph bigger.
Typically, the HTML browser default font will be a 3>
Font size gets measured on a scale of 1 to 7… but what would happen if you wanted to make your text turnt uuuuup!

Select the paragraph or sentence you want to increase the size of + in front of it, write <font size=”7”> + next, you’ll insert </font> at the end of your selection to make note that this is where the gigantor text ends.
It’ll look something (or how about we say EXACTLY!) like this ::

It’s a similar concept if you want to work in a header font like you have in your website.
You’ll therefore have to establish in the CSS code that you’re going to be using a header from now on + then when you choose to use that header, you’ll tell your HTML code that this is what’s up. In my case,
1 :: In the email template (the CSS), establish what font family or size you want to use as your header text.
2 :: When you’re writing your broadcast, use the established header tag in your HTML.
3 :: To then yield this end result.

What if as a result of your hard work, your preview still doesn’t work or look the way you want it to?
First, try double-checking that you’ve selected the correct the Email Template in your sidebar when you’re writing up your broadcast.
Then, if you have done this and it still doesn’t look right, go back to check that your code is the same. Hence, make sure you’ve used the right spaces, hyphens, brackets, quote marks, the whole she-bang.
Code tends to be more sensitive than your mother-in-law at a wedding so make sure everything is in perfect order.

That’s all there is – just a few lil lines of code! – and you’re off to creating your gorgeous new email templates!

Want the code just plain old handed to you? Mhmmm, I’ve got you!

Click here to subscribe