How To Export Email Designs to Klaviyo | 2024 Tutorial

how to set up email designs in clavio in 2024 so you've created your beautiful email whether it was in canva Photoshop or figma but now it's time to actually set it up and send it through clavio I'm Nikita and I run an email marketing agency and today I'll be showing you exactly step by step how to set it up like the pros in today's example I'll be using figma but again this applies to canva photoshop or any other design tool that you're currently using so we have our design already created here this is for one of my clients kingsfield Fitness and the first thing we need to do before we even set it up in clavio and Export it is we need to outline which sections are going to be images and which sections are going to be text so for Best Practices we need to have a balance of text and images in our emails if you have too much text your email is going to be offbrand and it's not going to look so good but if you have way too many images and it's way too branded your emails are going to get marked as spam and not even deliver so I already had this this set up so you can see the sections in green are going to be the image sections the sections in Orange are going to be not image and they're going to be text and so on and so forth so I I went ahead and outlined this just to make it easier on my end so that way we can go ahead and Export these out we have the sections highlighted and one more thing before we start exporting these images is it's important to outline the dark mode compatibility of this email I'm going to let you in on a little secret here but over 50% of devices have dark mode enabled if you're sending out an email through Gmail Apple mail Yahoo and Outlook and you don't have dark mode optimized well your emails are going to look like garbage so we're going to set that background to uh a dark finish here we're going to do this for the rest of the emails and let's go ahead and see how this email is going to look in dark mode and see if there's any issues assume that all of the text is going to be white because it's going to automatically flip to white but this image is going to to look good this button is going to look good these little sections here with all the different products are going to look good all of these text sections that are supposed to be text sections like we highlighted here are going to look good because the text is going to be automatically white and so we are good to go and let's go ahead and start exporting so first things first let's go ahead and start off with this header here we're going to go ahead and click on export one thing to keep in mind is I try to keep my exports at 2x because that will maximize the resolution of the export and it's going to make your images look very very crispy so we want to keep up that crispiness like we see in figma and Export them at a 2X we're going to export it as a PNG export the header and boom we're done next up is these next body sections and I'm going to go ahead and spare you all the details and just go ahead and speed run through this a few moments later and there we have it we have all of our sections exported here now let's go ahead and open them up so we have a divider we have our guarantees we have our header we have our section of text and sections of products we have our header image with the text you're probably wondering why did I export them with all this text here and the main reason is again for that dark mode compatibility because if I exported this with the white background on a dark mode image you know this will come up as black and then this will come up as white and it's just not going to look good once you have all of your images exported we need to go ahead and compress them tinyi or tiny PNG or tiny jpeg are my favorite tools to use so we're going to go and drag all of our images in here and compress them and the main reason why we're compressing these is because the heavier your images are the longer they're going to take to load within your email if an email doesn't load in time when a person opens it a person's more likely to back out and bounce from that email and not even see it to begin with so we want to reduce that as much as possible got all of our images and let's head over to clavio here we are in clavio it's a dummy account so let's go ahead over to templates and let's go ahead and create a blank email now when it comes to building emails from scratch I like to start with the header the footer and then the body mainly because the header and footer are going to stay consistent for the most part with your emails and the body is what's going to require the most change so first things first replace this with an image the reason we do this is because in dark mode if you were to have a PNG in here that PNG is going to be inverted and we don't want to ruin that brand look that we have because the black bar is consistent with the websites got the header done onto the footer so I like to have the figma file in a sep seate browser here so that way I can set up the footer a lot easier first we want to go ahead and set up the footer section we're going to go with a split column section we want to make sure that there's uneven spacing mainly because in the design there's uneven spacing between the social icons and the the hyperlinks at the bottom we're going to go ahead and split those sections off so that way we can have our about FAQ and content links separate from our social icons okay great we have the footer and the header set up now it's time to actually move on to the body now if you remember we had images and text completely separated let's go ahead lay out those sections so we're going to need an image first then text then image then text image then text then image I know I was repeating myself there but that's how we're going to set it up so let's go ahead and do that when you're initially setting these up don't worry about how it's going to look right now we're going to fix all of those issues later down the road and one of the things that I'm going to do first I'm going to put in the main product image but but I'm going to crop it multiple times because all of those four different sections have separate links attached and I know I exported it as one big image it was just easier that way to export it as one big image but when we're setting it up we need to have those separate sections so after we've split up those image sections we're going to work on the guarantees and the buttons at the end of it we're going to work on the actual text itself and stylize that text to make sure that it lines up with the formatting of the email so the the font as well as the coloring and the sizing of it all now let's go ahead and paste in that text and format that text as we go through it we want to make sure that we're using the same exact font that the client is using which is going to be Poppins now as we go through and set this up we want to make sure that we're also using the right color code so we're going to take that hex code from our figma file and lastly we want to Center all that text and make sure that the spacing looks real good and we're going to adjust some of the padding and one thing we can do to speed up the process is to duplicate the text and then paste in our text from before into our our new paragraph so that way we don't have to reyli it now when it comes to the look side everything looks pretty much on par with the initial email that we actually had designed we're pretty much there all that's left is to add in that alt text to these images and add in the URLs from those specific product pages now when it comes to alt text you just want to describe what's in the image or some of the text that's in the image so that way if the image doesn't load you know the person on the other side sees what's the what the image is about and when it comes to URLs just make sure that you open them in a separate tab so that way people don't click away from your email if there's something else interesting on your email now I'm going to go ahead and speedrun through doing the rest of these so that way you don't have to sit through and watch me get all of the links and all the all Texs done 2 hours later we are done we have all of our URLs set up all of our alt text set up and all of our images set up now one thing that I didn't mention and this is a pro tip for you guys a section that you know you're going to be reusing and possibly switching up and changing I would recommend saving that section like for example this this um this footer section you can save it as a universal piece of content and you can just name it whatever I'm just naming it akt footer and now that we have that section in here what we can do is add in another Universal section here and it automatically populates with that section so it's going to speed up your design time significantly faster and the cool thing about them is once you change one thing it spreads across all of your other emails so if you're going to change up this about section or this about text to something else the rest of the emails that you have set up like let's say in your automations that have the same exact footer their section is going to change as well so you save so much more time updating one section instead of updating 28 other emails in your flows if you're curious on how to set up some of your automations and flows I recommend checking out the playlist up above somewhere up here where I go through the welcome flow abandoned cart flow and all the other flows and the strategy behind them as well now if you're following along with me and setting up your own email and you got it done congratulations great job it's a beautiful looking email even though I can't see it but now all that's left is to go ahead and send yourself a test to make sure that everything looks good and you know check it on your phone check it on your computer maybe check it on a couple different browsers make sure everything's looks good if everything looks good that's fantastic that means your email is good to set up for a campaign or for an automation flow with that said if you like the video hit the like button and if you want to see more videos and tutorials like this click that subscribe button down below and I'll see you in the next video cheers

Channel: Nikita Vakhrushev

Views: 449

Keywords: how to setup email designs in klaviyo, how to setup figma emails in klaviyo, how to setup photoshop emails in klaviyo, how to setup canva emails in klaviyo, how to setup emails in klaviyo, klaviyo email design, figma email design to klaviyo, klaviyo tutorial, email design, Figma email design, design emails for klaviyo in figma, professional email design for figma, organic marketing, boyuan zhao, shopify, peyton fox, Flowium, figma how to, klaviyo design, email marketing

Id: hhG5Y65KVsk

Length: 9min 2sec (542 seconds)

Published: Tue Jan 23 2024