003: How to change colors of your links in your emails on ConvertKit?
Hey'all! Here is a quick tutorial for customizing your emails within ConvertKit. Specifically, changing colors of your links within your emails.
In this video, I will show you:
1. how to change the link color in your emails
2. how you can have two different colors for the text and for the link underneath. (Example: Orange text but green underline color)
3. how to remove the underline all together.
And
4. how to have two different colors for your link phrase. For example: Link A is Orange and Link B is Purple.
Take a look at the video here:
Changing Colors of Your Links within your emails
Why would you want to do that? Well, the default link color on CK emails looks like this:
But I want it to look like this:
So that's what I will show you how to do in the video and step-by-step list below.
But first, why change the colors?
Now, whenever you can add a branded look to your work, it helps in creating a sense of continuity. This is a concept I learnt in film school, interestingly. Continuity, basically, means you want things to look the same from scene to scene. So let's say there's a restaurant scene of Girl and Boy meeting for the first time. The time of day is morning. When you make a close-up of the girl speaking, there's got to be a sense of seamlessness. In other words, she cannot be wearing a different color top than the first scene, the lighting cannot be that of a mid-day sun, the people sitting on the table in the background cannot suddenly change to be different people.
Well, it is something like that for your audience as well. When they come to your website and see a certain look, then your emails can create a sense of continuity by carrying over some elements. This creates a sense of trust and comfort in knowing that things are familiar when you communicate with them via another channel. Does that convince you? I hope so and now here's how to do it.
Steps for Changing Your Links
Step 1: Make sure you already have done the creation of a custom email template (a tutorial coming up on that).
Step 2: Assuming you have already a custom template, all you need then is this piece of code:
.message-content a { color: #16bbb3; text-decoration: underline;}
Step 3: Replace the hexcode #16bbb3 to the color that corresponds to your site.
#16bbb3 is a hexcode that gives a teal/green color. So of course, you will need to replace #16bbb3 to be the hexcode of your links on your website.
Tip: Don't know your hexcode? use this free tool to see what color a specific hex code is or this free tool to find out what hexcode you are using currently on your site.
Step 4: Test it out by clicking preview in your emails. (Make sure that the specific custom email template is selected).
That's it.
If you want to do some other cool things like removing the underlining, have different color for the text and different for the underlining or have two text links with two colors, then go watch the video above.
To sum up, in the video I showed you all of these:
- how to change the link color in your emails
- how you can have two different colors for the text and for the link underneath. (Example: Orange text but green underline color)
- how to remove the underline all together AND
- how to have two different colors for your link phrase. For example: Link A is Orange and Link B is Purple.
Al'right. That's it. Let me know in the comments what tutorials you need.
Peace,
Sophia
PS: Also see this related blog on removing the double underlines:
https://www.sophiaojha.com/blog/037-how-to-remove-underline-from-links-in-convertkit
