035: Customize Your ConvertKit Email Template With these 5 Videos

If you'd like to customize your ConvertKit Emails to match your brand, this blog is for you. Below I've listed five most asked for videos/tutorials when it comes to customizing the look of emails inside ConvertKit.

Take a look at the following blog posts that have step-by-step directions with screenshots, code for copying into your template as well as complete video walkthroughs:

1. How to add a banner image to your emails: https://www.sophiaojha.com/blog/005-adding-banner-to-convertkit-emails

2. How to changing the color of the unsubscribe link: https://www.sophiaojha.com/blog/016-how-to-change-unsubscribe-link-color-in-convertkit

3. How to change "unsubscribe" into German or other languages: https://www.sophiaojha.com/blog/018-change-unsubscribe-into-german-or-other-languages

4. How to change the link colors that are in the body of your emails: https://www.sophiaojha.com/blog/003-changing-link-color-on-convertkit

5. How to add social media icons: https://www.sophiaojha.com/blog/002-social-media-links-convertkit-email-template

I hope this helps. If you'd rather have a template created by me, then you can hire me for an hour on my new Services page to get started.

Peace,
Sophia

023: How to Create A Custom Opt-Out link (Path 2: Custom Template)

Follow my blog with Bloglovin

In ConvertKit, there's one unsubscribe link. It is at the very bottom of your email in the footer.

And there's really no way to have your subscribers update their preferences. So what if you have a launch sequence or a free email course sequence and you want to give your audience to opt-out just from those emails. But still stay on your list. What do you do?

You create a Custom Opt-out Link.
Yes, the answer to that question is that you'd create a custom opt-out link. But before I show you how to create that op-out link, we need to know where do you place it. Because the steps on how to create that opt-out link will depending on where you want to place it.

There are two places you can choose to place your custom opt-out link:

Path 1. Simple & Easy: In side every email in your sequence
You just place it next to your signature or somewhere at the end of the email. But then you'd have to do this for each email in that sequence.

Path 2. A bit more involved: in the footer of a custom email template
When you put in the custom email template, then it shows up in the footer of all the emails that use this custom template - making it automatic; no need for you add it again and again. For this second option, you'd have slightly more steps involved but it's doable. Just follow along. And if questions arise, do share them with me in the comments.

Decided which path you want to follow?
Now follow along these steps below or watch the video to create your very own custom unsubscribe link.

For Path 1, see Video 022 here.

---

Path 2. Adding the Opt-out Link inside a Custom Email Template

If you go for this route, then know that this opt-out link will show up in the footer of any email which has your custom template activated. It builds upon the steps I showed you for option 1 above. These are the steps:

a. Create a Thank You Page
b. Create a Tag
c. Create a Link Trigger (Watch video: 001 on link triggers if you'd like to refresh your understanding of what they are)
d. Create a Custom Template (or use a custom template you already have)

e. <a href="https://www.sophiaojha.com/preferences-updated" trigger-id="216785"> Opt-out  </a> of Gardening 101 only or
    <a href="{{ unsubscribe_url }}"> unsubscribe from everything </a>|  {{ address }}

f. Customize the above:
+ add the right thank you page link to replace: "https://www.sophiaojha.com/preferences-updated"
+ add the right trigger-id
(which you can find by adding your link trigger to a sample sequence email. Then click the <> html view in that sample email and then Grab the trigger code behind the link trigger)
+ and customize the text that goes to replace this: of Gardening 101 only or

g. Activate this custom template for your email sequence or broadcast.
k. Do a happy dance in celebration! :-)

Watch the video below to follow along. 

For Path 1, see Video 022 here.

I hope that you will use one of these two options to give your audience a chance to opt-out of certain kinds of emails. Do give it a try and always feel free to write me your follow-up questions in the comments below.

Peace!

Sophia

Note: This is not for replacing your unsubscribe link. That would be breaking anti-spam laws. So we will leave that unsubscribe link alone. We are just adding another "opt-out" link for removing someone from a particular type of email we are sending out in addition to the official unsubscribe link.

022: How to Create A Custom Opt-out Link in Your Email (Path 1: Within Each Email)

In ConvertKit, there's one unsubscribe link. It is at the very bottom of your email in the footer.

And there's really no way to have your subscribers update their preferences. So what if you have a launch sequence or a free email course sequence and you want to give your audience to opt-out just from those emails. But still stay on your list. What do you do?

You create a Custom Opt-out Link.
Yes, the answer to that question is that you'd create a custom opt-out link. But before I show you how to create that op-out link, we need to know where do you place it. Because the steps on how to create that opt-out link will depending on where you want to place it.

There are two places you can choose to place your custom opt-out link:

Path 1. Simple & Easy: In side every email in your sequence
You just place it next to your signature or somewhere at the end of the email. But then you'd have to do this for each email in that sequence.

Path 2. A bit more involved: in the footer of a custom email template
When you put in the custom email template, then it shows up in the footer of all the emails that use this custom template - making it automatic; no need for you add it again and again. For this second option, you'd have slightly more steps involved but it's doable. Just follow along. And if questions arise, do share them with me in the comments.

Decided which path you want to follow?
Now follow along these steps below or watch the video to create your very own custom unsubscribe link.

For Path 2, see Video 023 here.

---

Path 1. Adding the Opt-out Link inside Every Email in your Sequence

If you go for this option then note that you will have to add the link in every email of the sequence. But the steps are simple.

a. Create a Thank You Page
b. Create a Tag
c. Create a Link Trigger (Watch video: 001 on link triggers if you'd like to refresh your understanding of what they are)
d. Add it into your email.

Watch the video to see how to do this. (Coming soon!)

For Path 2, see Video 023 here.

I hope that you will use one of these two options to give your audience a chance to opt-out of certain kinds of emails. Do give it a try and always feel free to write me your follow-up questions in the comments below.

Peace!

Sophia

Note: This is not for replacing your unsubscribe link. That would be breaking anti-spam laws. So we will leave that unsubscribe link alone. We are just adding another "opt-out" link for removing someone from a particular type of email we are sending out in addition to the official unsubscribe link.
 

020: How to Use Clickable Buttons in Your ConvertKit Emails

Let's say you want to have your readers click a button in your ConvertKit emails that goes to a page on your website. This could be for really anything - link to blog post, link to a sales page, link to a video on YouTube - really any link.

Your ConvertKit emails are set up so that you can use buttons as long as you use the Modern or Classic templates or create your very own template from scratch. Plus, the buttons can be used both in your broadcast emails as well as sequences emails.

Watch the video below to see how I set them up and scroll down below in this post to grab the code that you will need to use.

Step 1: Set up Modern or Classic as your default template OR Create your own custom template from scratch if you'd like to customize how the button looks.

Step 2: Customize how your button looks in your custom template. 
You can change the colors for example or the button or the color of the text itself.
 

to change the button background: 
background: #ffbc42;
Change the #ffbc42 (yellow) to a color of your choice

to add a border:
border: 2px solid #A09D87;
Change the #A09D87 (grey) to a color of your choice

to increase or decrease the spacing of the text:
letter-spacing: 3px;

to increase or decrease the font-size of the text:
font-size: 15px;

If your want to pick a color from a webpage, download this free app for Chrome/Firefox: http://www.colorzilla.com/

Step 3: Go inside your sequence email or your broadcast email and input this piece of code where you want the button to show up.

<a href="https://www.sophiaojha.com/live" class="button">Sign up to my next Live Training!</a> 

Step 4: Add the link that you want your button to link to

Step 5: Change the text that you want the button to show.

Step 6: Every time you need to use the button, just use the code snippet again. 

That's it!

So, that's another little step on how you can use ConvertKit the way you want to connect with your audience!

Do let me know if this was useful and what else you'd like to learn about ConvertKit or email marketing! Just drop a note in the comments below.

Peace,

Sophia

018: How to Change "Unsubscribe" into German or other languages in your ConvertKit Emails

Hello my multi-lingual friends, 

This video tutorial is specifically for you if you are writing your emails in a language other than English.

Yes, a lot of your readers may be bilingual or multi-lingual and may understand what it means when you write "unsubscribe". But let's say everything you write is in Dutch or French, then to have this one lone English word in the footer of your emails, just stands out unnecessarily. 

So, right now, you may have the foot of your emails looking like this:

But what if your audience is German speaking. And you want to just make it easy and familiar to them when they want to unsubscribe. You may want your email footer to look like this:

So then how to add "abmelden" instead of "unsubscribe" in the footer?

Follow the steps in my super short video which will make it simple as...

A B C. It's easy as, 1 2 3. As simple as, do re mi... well, you get the idea! Yes, I am a MJ fan ;)

Al'right, watch the video for the quick steps:

So, I hope that was super easy to follow. Please let me know what language you changed your unsubscribe link to and what it translates to in your language! Plus, if you have a question you'd like me to make video tutorial on, just drop it in the comments. I will add that to my list of blog ideas - probably to the top of my list if I know it's a burning question you have. (I want to make tutorials that solve a real problem - not something I think you may need. So please take advantage of this).

Also, if you'd like me to email you a link of that tutorial when it is done, then please make a free tutorial request using the button in the footer of this website. You can drop in your question there.

Thanks again for watching! Good luck in your Convertkit + blogging adventures! :)

Peace and harmony to you,
Sophia

016: How to Change Unsubscribe Link Color in ConvertKit

Alright, my friend! You know how to change the link color in your emails in ConvertKit (partly because you saw this quick tutorial: How to Change the Color of Your Links in Your ConvertKit Emails). But that was for the email content. What about changing the color of your unsubscribe link that's sitting at the bottom of your emails?

There are two steps involved here and the both involve code. But no worries, follow my steps and you will be able to accomplish this easily. Afterall, you do want that customize look for your unsub link right? ;-) Believe me, it's worth it and you know what you may fall in love with code - it's magic!!

So go ahead open your custom template and start plugging these codes.

Note: You will first need to create a custom template in ConvertKit. The following steps are applied inside the custom template. I have another video tutorial where I show you how to add social media links in your emails - and in that video (Video 002), the first part shows you how to create a custom template. So watch that video first and then follow the steps below.

Step 1: Add this code under style section of your custom template.

a.unsubscribe-link { color: #16bbb3; } 

Note: #16bbb3 is a green teal color. Put in the hex code that you want here. Don't know what the hex code for your color is? Go to this free tool and look for your color hex code: color-hex.com. 

Step 2: Add code in the Footer section of the custom template.

class="unsubscribe-link"

Add this piece of code ( class="unsubscribe-link") in the footer section at the very end of the template.

Where exactly to place it? Look for the following bit of code in the footer of the template.

<div class='message-content'>
  {{ message_content }}
  <div class="footer">
    <a href="{{ unsubscribe_url }}" Unsubscribe</a> | {{ address }}  </div>
</div>

So it should now look like this: 

<div class='message-content'>
  {{ message_content }}  <div class="footer">   
<a href="{{ unsubscribe_url }}" class="unsubscribe-link">Unsubscribe</a> | {{ address }}
  </div>
</div>

---

Then place this code : class="unsubscribe-link" right before >Unsubscribe</a> | {{ address }}.

Watch video to see how quickly you can set this up. You will also understand clearly where the right spot is to place the code in the template by watching the video.

So, hope that you now can easily change the link unsubscribe link color in your ConvertKit emails! 

If you tried my steps, write  me a note in the comments to share how it turned out!

Peace,
Sophia

005: How to Add a Banner or Logo in your ConvertKit Emails?

If you are using ConvertKit for sending out emails you know how awesome it is to have a clean, minimalist design that helps your emails land in inboxes. But you may be thinking, "How about adding a banner image to add that brand recognition!" Well, you can add a banner or a logo for that matter to the top of your emails as a header and you do this by following these steps.

1. Create a Tag called "Test"

Now you are wondering why do I start with a tag? You will find out in a moment, so hold your horses!

2. Create your Banner Image

You can create a banner using any of the free design tools out there such as Canva, Picmonkey or Easil. Or you can have it designed by a graphic designer on Upwork or other freelancer sites. 
The important thing is the size. Make the banner to be 600px in width and about 125px in height. This proportion looks quite nice on CK emails. You can try 600px x 200px and see if you like that better but I think 600px x 125px works just fine.

Here's the link to the video training on How to Create An Email Banner in Less Than 5 minutes.

3. Create a Custom Template From Scratch

Start by grabbing the code in one of the three default templates. Then click on create new template and paste it there. Name it and click save.

4. Then come over to the blog and grab the header code:

<div class="header">
<p><img src="Add the html code of the banner here"  alt="Sophia Ojha"></p>
</div>

Note: the text you see in bold will be replaced. See instructions in step 5.

5. Upload the banner into Convertkit via Broadcasts

Go into Broadcasts and create a new broadcast. Under recipients make sure you are selecting the test tag...you see now why we created this in the first place? :-) Next, upload the banner by clicking on the photo icon in the tool bar. Finally, click the html code icon and grab the code for the image. (Place it in header code you grabbed in Step No. 4).

6. Preview and Click Save.

7. Test the Template under Sequences or Broadcasts

Make any tweaks you may need so it looks like you want it. One way to do this is by going into Sequence, creating a test sequence and sending yourself a preview by email. This is a really good way to see how your email template will look like in the inbox. You can also do this by going into broadcasts and sending yourself a test email. 

Take a look at the video below to see it all play out in action:

Al'right that it. Let me know how it works out for you. I'd love to what you create so make a screenshot and share it in the comments! 

Cheers!
Sophia

PS: Let me know what other tutorials on ConvertKit and Squarespace you'd like to see and I'd be happy to create videos that will help you achieve it.

002: How to Add Social Media Links to Your Convertkit Email Template

ConvertKit's unique selling proposition is that their emails are simple, to the point and focus on the message. This style of clean emails also makes ConvertKit the email marketing platform of choice for many successful entrepreneurs as it is more likely to make it into your subscribers' inboxes rather than ending up in the spam folder. (Emails with lots of design and images are more likely to be looked upon as spam).

Having said that, you may still want to add a bit of design, especially when it comes to adding quick links to your social media presence. So how do you do that? Well, follow these quick steps to create those quick links! It involves a bit of code but if you can copy and paste, you can do this! :-)

Adding Social Media Links into your ConvertKit Emails

So here are all the steps in summary:

1. Create a custom template
2. Copy and paste the basic code for styling text.
3. Copy and paste the social media code into your custom template.
4. Paste the code from Step 3 right above the unsubscribe link code.
5. Add the closing bit of code for the unsubscribe link code.
6 Add your specific social media urls.
7. Hit Preview and Voila, you are done!

Watch the Video Tutorial

Watch the video tutorial here or go below to follow the step by step description.

---

Step 1: Create A Custom Template

You go into your Account. Click Email Template. Then click the blue button on the upper right hand that says, "New Email Template".

Step 2: Copy and Paste the Basic Code for Text Styling

This piece of code instructs Convertkit on the look of your email as in font size, margin width and so on. You cannot save a custom template without this piece of code. So this is muy importante!

Grab the code from your within the "Text Only Template" of Convertkit. I have already done this for you here, so just copy the following code.

<style>
  .message-content { max-width: 600px; }
  .message-content div { padding-bottom: 10px; }
  .message-content img { max-width: 100%; height: auto; }
  p {
    margin-bottom: 1em;
  }
</style>
<div class='message-content'>
  {{ message_content }}
  <br>
  <br>
  <small>
    {{ unsubscribe_link }} | {{ address }}
    <br>
  </small>
</div>

Step 3. Copy and paste the following social media code into your custom template.

Copy the following piece of code. In Step 4, I will show you exactly where to paste it.

<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;"></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;"></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;"></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;"></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;"></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;"></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;"> </a>

</div>

Step 4. Paste the code from Step 3 right above the unsubscribe link code.

So you see the code in Step 2, right? Well, the final section is all about the unsubscribe link that is mandatory in all emails so that subscribers have a chance to unsubscribe if they like.

Right above that bit of code is where you would paste the social media link code that you see in Step 3. (Watch the video for more clarity).

So that's right above this bit:

<small>
    {{ unsubscribe_link }} | {{ address }}
    <br>
  </small>

Step 5. Add the closing bit of code

Now you must add this bit before and after the unsubscribe code.

Before:

<div>

After:

</div>

So this is how it should look like in the end:

<div>
 <small>
    {{ unsubscribe_link }} | {{ address }}
    <br>
  </small>
</div>

Step 6: Add your specific social media url

You now must grab all your social media urls and place them in their respective spots.

So let's take an example. My social media link for facebook is: https://www.facebook.com/EmailMarketingSpecialistSophia/

Where I see the facebook url, I shall now add my specific url.

So instead of this:

<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;"></a> 

It should say: 

<a href="https://www.facebook.com/EmailMarketingSpecialistSophia/"> <img src="http://convertkit.com/images/social-icons/facebook.png" alt="Facebook" width="48" style="text-decoration: none; width: 48px;"></a> 

Basically, I am adding my Facebook link between the quotes right after <a href=

Go on and do this for all your social media links. Remove any platforms you are not using or don't want to add.

Step 7. Hit Preview and Voila, you are done!

That's it. You are done.
 

Let me know in the comments if this was useful and if you need anything else to get your social media links implanted within ConvertKit.

Let's make it happen!

Sophia with love