How to Create Customized Quote Boxes in ConvertKit
Well, howdy TCCers, are you all over your post-Christmas hangover by now or are you still in full-on “no biz mode”? Well, I’m sorta hangin’ somewhere in the middle, trying to recover and get some work done.
If you’re not super familiar with me, you may not know that I have an eCourse on ConvertKit that I sell over on my website so I welcomed the chance to share a little sneak-peek with you over here when Emylee and Abagail asked me to!
One of the things I hear complaints about the most is not being able to make ConvertKit pretty, BUT, lemme just tell ya, you don’t really want those pretty templates because they will crush your delivery rates, BUT I completely understand wanting at least a little pretty in yo’ life.
So, enter today’s tutorial.
I’m walking you through how to insert a little smidge of code into your ConvertKit email template to create really pretty boxes within your emails.
Alright, first-things-first:
Open ConvertKit and go to “Account > Email Templates”
Now, scroll down to the template you want to customize (you can only have one style of this box in each template so if you wanted different looks, you might just want to create different templates) and click on it.
Ok, now, grab the code below…
<div class="codeview">blockquote { background-color: #f9f9f9; padding: 20px; text-align: center; border: 10px solid #fff; color: #595959; outline: 2px solid #f9f9f9; } </div>
This code will produce a box that looks like this
background-coloroutlinecolor
There are a ton of ways you can customize this but let’s keep it simple for the purpose of this post, k pumpkin?
Alright, now, moving on;
You’ll take the code I gave you above and paste it inside your template:
You’ll want to make sure that it’s placed somewhere between the beginning “<style>” tag
nd the ending “</style>” tag.
You’ll notice the screenshot above has my code pasted in after some other code, that’s ok, just as long as it’s between these style tags.
Alright, now, you can customize the hex #’s and other code to your heart’s content and hit “save”.
We’re basically done, but let’s go test it out!
Head in and create a new broadcast inside of your account, making sure that you have the correct template selected to use.
Type out your content and then select the text you want to be inside this box; head up to the top formatting bar and click on the “paragraph” button and select “quote”.
Now, you’ll have a box inside of your broadcast customized just like the code you put in there with that selected text in it.
I changed mine to be pink with a pink border and white text, so it looks like this:
Now, just send your broadcast as normal.
You.are.done.baby!
ABOUTH THE AUTHOR
Jessica Stansberry is THE Jessica behind Hey Jessica, LLC, an online content machine designed to help you figure out the moving parts of the technical systems needed to run your business.