Newsletter template design in Mailchimp - Indepth tutorial

in this video you will learn step by step how to design this MailChimp template now this is a more in-depth tutorial where you will also learn the following subjects choosing the right template content blocks layout fonts and colors image sizes social media and footer and finally merge tags so let's get started now it's time to have some fun and design our first newsletter template so I've simply clicked templates here and we'll go ahead and click create template now first off there are a lot of different starting opportunities here built into MailChimp first off I recommend you check out the themed templates first and see if there's anything that resembles your company's racial identity because then you'll already have a head start to building your first newsletter so take a look at these different templates and see if anything makes sense for this introduction however we will start with a more plain template so as you can see the there are some feature templates for selling products causes a small for a webshop announcement story follow up some sort of educate template and then we have the basic templates down here so I recommend you start by figuring out if you want the layout to be either full width or the more box layout you can see it doesn't go to the edge over here and my own rule here is that I want the newsletter to resemble the website as much as possible and for this introduction I want to create a newsletter for a website called terranova nutrition and as you can see this website is full with it goes to the edge of the screen so that's what I want the template to do as well and for the design of things I want to use one of the more advanced templates because it's really nice to have the ability to for example hair things in two columns and also have some more content further down so for this purpose I will choose the one to one column which is full width for the first newsletter so this is the starting screen for building a template and we want to design as much as possible because that makes it much easier to build our newsletters every time we want to do that so first off we have our preview window here in the left side and then we have all the different content elements on the right side which we can simply just drag in to our preview area so also we have the design tab up here on the right where we can design all sorts of different things and we will get to this very soon but first off let's just try and see for example if you want to add a textblock well then we simply just drag it and then you can see we get all these information about where the other boxes start and stop and then we can simply drop it wherever we'd like it to be so that's really simple you can see we have just added a text block down here and I'll just go ahead and delete it right away I don't really want that so you can just use that trashcan in the right corner to delete anything so now we're ready to start designing our newsletter so I want to kick off the design of this newsletter by looking at the fonts and as I said earlier I want the newsletter design to resemble the company's website as closely as possible so let's have a look at the fonts on the website now as you can see here we have a headline font which is without serifs and a large text here which is also used as paragraph text down here which does have the seraphs which simply means the feet on the front and I want to be using this font right here without service for the headlines on the newsletter now in MailChimp we have a smaller selection of fans to choose so we have to find one that resembles this as closely as possible so I'll go back to MailChimp here and I will go to the design options and then page where we have the heading settings we have the heading one two three and four right here so I'll simply go ahead and look at the fonts right here and for example pick Tahoma I'll just removed boldness and actually just to be able to assess this fund I'll just change the text to large letters instead so I'll just right newsletter or Mightiest cinder it is as well I'm safe then go back to a page and I don't really think the home is the right one so besides the the standard web fonts we also have some custom web funds down here and maybe later could be the right one I think that's pretty nice I'll just change the size to a bit smaller and I think this is quite good the only difference is I want the font to be that red color you can see down here for example we have that font with red text and a clever way to get the color code from a website is if you're using the Chrome browser you can simply right-click the text and click inspect and then down here on the right side you should be able to scroll until you find the color code right and here it is you can see that it has this color and you can copy this hex code it's called right besides the hash tag and then you can put it inside MailChimp and see it update right away so I think that's pretty good now we just need to update it update all the headings to be using later as well so I'll just go to heading 2 and repeat change the font size maybe go a bit smaller and I might just wait to change the the headlines here maybe it's only the top one it's going to be red let's see okay so now for the paragraph text I want to find something that resembles this font right here and a good way to assess your fonts it's actually looking at the t's and you can see here that this is a more rounded G so I want to find something that looks like that and I'll just try and find the options here the design options for the font that's right here and I think this must be the preheader text no okay that is the subtext up here actually so I think that might also be fine with the later fund yeah I think that's okay so I'll click Save and then this part must be the upper body so let's try and find a font that resembles the websites maybe Georgia yeah you can see that the T's are also rounded just as on the website and it has the seraphs so I'm pretty happy with that and I think also the font size is okay so I'll just go click Save and then make sure that the font down here is also in the same maybe the columns yeah the columns should also be Georgia you can't really see that right now but it'll probably be visible at some point and lower body yeah and also I'm just noticing that the Lynx has this blue color which definitely doesn't fit to our business design so I'll just find you here this the color for the Lynx so I'll just paste in the color code from earlier and you can see that now we have this red color so I'll just save that and actually maybe there will be links on the other body at some point so we can just as well update the colors for those as well and maybe the columns will also have colors links with color so we'll say that as well okay so I think this is pretty good with the fonts I can see that the caption text there for the images hasn't really updated itself so maybe we'll just change these individually and you can do that here on the fonts tab and simply just pick the front the same way as before I'll update this one as well right so before we go on and start editing the footer here just want to add a bit of distance from the logo to the headline and we'll go back here to content and then I'll drag a divider up here and release it and I'll just change this color to white to resemble the background and then maybe just remove the bottom padding so it's not quite as high as before yeah I think that's pretty good so a last thing I want to do here is I really like the the design of this grey area that comes to this white area here so I feel like doing the same design for this newsletter so I want maybe to actually have that top being white and then the background for the rest being gray so I'll just go back to design change the pre header to be all white so that's FFF you can also click here if you want and then click the white down here so you can see up here nuts up it's all white you know what maybe though Georgia is actually better than later for that for that area No but I done with that then the preheader will then keep being white and then the other body I think we will make that gray and I will use this color code fa-fa-fa save columns very good and lower body okay so um you only think we need I can see now that the separator doesn't it looks white so we'll just change this also to gray so you can't see that all right so I'm pretty happy with these funds so I think the next step here is to add some images so let's begin adding some images to our newsletter template the easiest way to do this is simply to attract the image content block over to our design from here we can simply click browse and then start adding some images to our library you can either do that by clicking upload up here or you can find a URL to an image you want to add from someplace online or you can do like me here and have your images open in your finder then select them and then drag them over to MailChimp so when it's finished uploading your images you can simply select the image you want to add and then click the insert button up here now with the image edit we can take a look at a few settings here the first is style where we can simply add a border around the image if you want which I don't think is really nice in this case we can make the corners rounded which pretty much only works decently with a completely square image so in other cases that I want to recommend using that and then we have the settings where we can align the image in this case it's full width so that doesn't really matter we can change the margins here to go edge to edge or we can constrain this image by 50% for high resolution displays which means the graphics will be really sharp on ya on iPads and iPhones and so on that are utilizing this high resolution display so because of chosen a full width template the content area will be 600 pixels in and that means if I want to have an image that goes from edge to edge it must be around 600 pixels in width now I want to constrain this image by 50% then it means it needs to be in double the size which is 1200 pixels and the image table uploaded here is actually 1200 pixels in width so a clicking constraint image will make it look as if it was 600 pixels in width so simply a half of the original width so I'll simply save this now and let's try and replace the logo with our own logo instead so I'll simply click replace and from here I'll simply click the import from your L button and try to import a image file from our website so I'll go to the business website and I'll just find a simple version of the logo which I know you have write down here in the footer so I'll go ahead and right-click it and then copy image address and then I will paste this address into here and then import it right and if the image is not the correct size then you can change it over here in settings and then constrain it by 50% you can see here without the constraint it is way too large for the design so for the next image I want to show you how to add an image with text side-by-side so in this case I actually don't want to be adding these images with captions underneath so I'll simply delete these blocks and I can always utilize these content blocks that are side-by-side at a later time but I want to show you another way of adding an image with some text so I'll grab this image plus caption and I'll drag it underneath these two blocks and I'll simply start by finding an image these berries seem nice let's use those and then we can go ahead and go to oh I think it's settings that's right the caption position then we can make that right and so now we have this image on the one side and text on the other and we can for example go ahead and make a headline and I'll make this headline a heading 2 for example actually I'll just write that in large letters since that is the style of this company and maybe I'll just make a single space just to put this headline sort of in the middle here I can always change it again remove it if I'm adding some more content later just see how it'll look yeah of course if there's a lot of content I can simply remove the headline so the text fits better with the image in in the height so for now I'll just and the space right here and I actually want to mimic a design that's on the website I think it is under philosophy you can see down here that we have an image that is shifting from one side to the next so the way we can do that here in the newsletter is simply to duplicate this block and then over here on the settings we'll simply change the caption position to left instead and then of course we can go ahead and go to content and then replace the image with for example some other berries or we can have this guy here oh we just need to have only one image selected so do you select that one and then insert and now we have this this nice effect that is mimicking the website let's just add one more and again do the same go to Settings caption position right and then go to content and replace this image with these right here right so that's a few different ways to add image to your newsletter so let's start designing the footer of our newsletter and we'll find the design of the footer over in a design tab and right down here so I've decided that I want the footer to be read with some white text so I'll start by finding the hex color that I used for the links and copy that and then go back to the footer and paste that into this background color right here next let's change the font and I think for the footer I will use the same as the headlines which was the later fund right here then I'll change that to white and for the footer link I think that white is also just fine and maybe the font size should be just a little sad larger yeah I think this is just a little bit better and next I want to remove this separator or divider right here and I'll simply click the delete trashcan button so this is already one much better so the last thing I need to change here I think is the social media icons so I'll just click these and I'll go to style or maybe settings right settings and then I will change these to white instead just so that they fit the design right here and of course if you want you can use some larger social media icons you can change the layout of them in my case I think this is fine with the small icons so I'll just be using those and of course it's a very good idea to get these changed to your real social media links so remember to update these now if you have some other social media you can simply click down here and then use this drop down to for example find a medium or Pinterest or whatever you need just remember to update the URL and the link text is simply to when people hover the mouse over the text that they'll see then so also remember to update the link text so when you run with that simply click Save now regarding the content of your footer some of it is actually not required you are allowed to change some of this now for example the mailing list address is required but the update preferences link is not required so if you're not segmenting your subscribers then you can simply remove this URL and simply just have the unsubscribe link instead in fact I will recommend you doing that just to simplify your footer as much as possible and make it easier for people to find the unsubscribe link so for example we can also change this one to want to unsubscribe so you can see how it looks down here while you're editing so the mailing address that is required and the top part up here as well is required so I'll recommend just keeping that as it is and also the rewards down here in the bottom they're required if you have a free user of MailChimp but if you are a paid member of MailChimp then you can remove this as well I've added a link to the information about the footer underneath this video right here let's have a look at how to personalize our newsletter with a first name so we can write something like hello Peter welcome to our newsletter or something like that and for that purpose we need to look at merge text so I'll just go out of this newsletter and okay I just need to give it a name so just write Terranova simply and save that and let's go ahead and find our birds tags so we'll go to list and then under our list we'll look at settings and then we have down here the list fields and merge tags and you can see here we have the first name and here is the merge check it says up here put this tag in your content and you have to remember that we're using this Asterix and the line I'm not sure what you call that if name and then the same on the other side the line and the star and I'll actually just use my notepad here just to make sure that it's completely created in the same way as it is right here so I'm just copying these things and here we go now I have the merge tag ready to use in my newsletter so I'm just copying this and heading back to the template I was just working on right so I want to make like a more bold text for the for the Welcome of the newsletter but I think I'll save this text just to have a text block underneath this image as well so I'll just go ahead and copy this text this is just for this specific example and then I will insert this text down here so I just I'm just giving myself more options more things to work with when I'm making my final newsletter so it's really nice to have this because when I'm beginning to edit my newsletter I can simply go ahead and click the delete blocks anywhere I want and then end up just editing the existing blocks that I found find useful for my newsletter anyways let's look at this block specifically I will just make this text larger so let's see oh that's actually smaller I was 16 before I think 18 is good and we'll look at the text color I might just make it a little bit more grey maybe a bit darker I can go to more colors as well and just find the right type of grey I think that's the one okay so I'll just copy my merge tag now and then I will make a line here that says hi Peter and then I I hope you will enjoy our content and then I think that's fine because I can always edit this when I'm creating the final newsletters so this should end up being yeah hello name the first name Peter Maria whatever and that is really that simple you just put in this merge tag and MailChimp will do the rest for us so I'll just click Save okay so it looks like it's all set up properly but let's make absolutely sure of it and test this right away so we can't unfortunately test it in here in the template editor so we need to go over to campaigns and do the testing there so I'll just say this and exit then I'll head over to campaigns and I'll create the a test campaign you could say we'll choose email and we will just write tests in the campaign name and we just need to add the recipients first and we'll just use that one list that we have and we can look at all these things later but I always recommend personalizing the to field where we use the first name and last name you can see the two merge tags here but it's not really relevant this is just a test so we'll go ahead and go to a design email then we'll use our save template and from here we can go to the preview up here on the right and now we can enable the live merge tech info to see okay here we go hi Stefan so it is working properly we can say it sell right away so that's really nice and now we can countably use this template for our future newsletters did you know that this video is part of a full MailChimp for beginners online course for more information go to the link in the video description you

Channel: WP Explainer - WordPress made easy

Views: 30,309

Keywords: mailchimp template, mailchimp templates, mailchimp design, newsletter design, mailchimp newsletter, mailchimp tutorial, custom newsletter design, mailchimp campaign

Id: NvooFty9O7I

Length: 35min 49sec (2149 seconds)

Published: Wed Jul 31 2019