- This is Andriy from Email Marketing NYC.
In today's video, I'll show you how
to design emails right there in Klaviyo.
(upbeat music)
I record this video because I work with many companies
where they have in-house designer and since we
I mean our agency, we do not provide design.
But I know, and I do respect
great appealing emails
that Graphic Designer designs, but my job is
for customer, make sure their emails gets to inbox.
So it has better deliverability and it looks good
as on desktop, as well as on mobile.
That's why, when I start working with companies
I have deep conversation with the design there
and explain them how they can achieve the same thing
what they do in Photoshop or Illustrator
same thing in Klaviyo.
So basically they will do the same job
but approach is a little bit different.
And I'll explain to you why in this video.
So if you're a designer or you have a designer
I highly recommend to let them watch this video
and if I'm too slow for you (laughs)
you can hold on right there below, click on the gear sign
and put one and a half speed or two X speed
and it will speed up the process
and smooths out all my mistakes.
Okay so, let's go to your Klaviyo account.
And let's use email templates since
for a designer, I highly recommend to use templates
because you can create all templates here
and then somebody like me or somebody on your team can build
use those templates to build flows and build campaigns.
And by the way, if you're owner
and watching this information, you can have custom access
for your designers, so they don't see numbers
how much you make, if you want to hide that information.
And on YouTube, I created the video, how to add users
to Klaviyo account and what permission levels.
So let's do this example.
So this is the thing that I use for different company.
Actually let's start from scratch, it will be much easier
to create template.
Let's do basic one, let's do column number one.
First, majority of designers are familiar
with MailChimp design and if you're not, it's fine.
But, Klaviyo is very similar to MailChimp in terms
of drag and drop, but it's more robust.
So basically everything that you see here on the left
it's drag and drop, and you add your text here
it's very easy to add.
This is the fonts you have, this is sizes.
So it's like Word Document or something you can add it.
So it's not very hard to do that.
Also there's two options, you have a block
where you added that block specifically
also there's block styles.
Let's say, if you want to have like font different color
you can change font right here.
Right here.
But you can do as well here.
One supersedes another.
Also like let's say, image split, like if you want
to have a split two columns, three columns, more columns
then you can have a button, then you can have a header.
Let's say, if you want to use some kind of header
then you have to play a lot with this.
It would be hard for me to show like all possibilities
but honestly, since you're a designer, if you play
for probably 30 minutes, one hour, you'll figure out how
to use it.
You can use Drop Shadow if you want that
and here you can use columns, like if you want
to split the email.
But for Graphic Designer, since you used to, I mean
you use everything in like Photoshop or Illustrator
I'll show you how to combine those features and
how to break down your emails.
So let's go to this really good emails
but by the way this is a great source for inspiration.
I highly recommend to check to see what other companies do
and let's use this email.
So the common mistake I see, people use one image
I already saved with it.
So this is how they create email.
So they use this email, upload, browse
and let's do this and upload.
Right here you can fit image to area
and it looks amazing email.
It's like, honestly, it's hard to desire something better.
It looks everything amazing.
However, this is, oops sorry, my bad.
Let's delete, let's delete this, let's delete this
and let's delete that.
Okay, so I mean, everything looks good
however just imagine person receiving this email
and they have images turned off on Gmail or Outlook.
I mean, they receive just empty mails
so this is a big problem
for deliverability because they will either click spam
or click unsubscribed
because you're sending them empty emails
with nothing in them and you're wasting their time.
And another problem was this kind of email
where you have only one image mobile.
This like, as you can see Star Wars
looks good, Me Undies
I don't know how to read it, looks good.
This looks fine.
But look, look at this, and this is like common problem.
It's so small I cannot read it.
I mean, I hardly can read it.
Maybe you say like, you don't need to be read
because there is unsubscribes.
Yeah, correct, and this might be too small.
So you want to create emails which are adjustable
to mobile or desktop or tablet and how to do it.
So for example, how would I recommend to add this template?
First, I would recommend two split, split in terms
of split images.
So first I would recommend to a designer is
to split this part like
this one
or maybe even right here, it will be block number one.
Then since this is custom email, custom font
I will split this block as well.
Then I will insert image, then
I will remove this or move it down
or I remove all that.
And I'll tell them to use this as a text block
font block and this as font block and on black
background was white font.
Then I will tell them to use this
as a button custom button, like this button
which one, right here.
So which block style, and let's say it's square
so you don't need radius, then you need something bigger.
So you do like 30, maybe something bigger, you need like 60
or 90, I mean, you have to play with that and you want text
and you want background, background, background.
Background is blue, but black background, you want black.
Yeah, so this is how you mimic this button
and then you create another one and now you have two.
But this way, when you do, I mean
you have to play with that, but this adjust
to mobile, mobile device, it makes text bigger
and readable on mobile devices.
Okay, so what's next, what's next.
All this, it's text block, text block
social media block text block, text block
doesn't have to be image.
In general, as I said, many clients
they design one email in Photoshop or Illustrator Export
as one image, in the best case, they slice it
as different images.
So like as this email, but different images, like instead
of this one as one image, they have one, two, three, four
five, six, seven, eight, like blocks
and they insert a separate images, which little bit better
but again, if the image option turned off on Gmail
or Outlook, their customer will not see the email.
But let's say you send it and the image is not enabled
so they do not see your logo, they do not see this picture
but they see
they see this right here.
And they just went to Digital Marketer
because probably the first article I read years ago about
Email Marketing for E-commerce.
So this is a great example from Tony Robbins.
And as you can see the same email
with no images and with images.
So as you can see, when you receive this kind of email
if there's no images, you're not missing anything
because all information is right here.
I mean, if it's with images, it'll look much better
but without the images, you're receiving information.
Maybe you do not receive pretty pictures
but you're receiving the same information.
So this is what I'm trying to convey to you
that either you send email with images
or without images, a person should receive the same kind
of information.
I showed you how to use designer like Email Klaviyo
or Email Designer, Klaviyo Email Designer (laughs)
drag and drop, how to do that.
Feel free to ask me any kind of questions below
because for me to use this designer it's like second nature
for you it might be new.
So please, please, please let me know
if you have any additional questions
I will be more than glad to help you out
and also subscribe to this YouTube channel
because we're releasing daily video
for the next year, how to better use Klaviyo.
Thank you.