Build A Perfect MailChimp Template: Step-by-step | Stuart Waters | Skillshare
Drawer
Search

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Build A Perfect MailChimp Template: Step-by-step

teacher avatar Stuart Waters, MailChimp Pro Partner, Kajabi Partner

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

    • 1.

      MailChimp Templates Introduction

      3:26

    • 2.

      Image Blocks

      9:53

    • 3.

      Text Blocks

      9:10

    • 4.

      Boxed Text Blocks

      5:54

    • 5.

      Image Caption Blocks

      5:31

    • 6.

      Add Your Company Logo

      1:28

    • 7.

      Call to Action Buttons

      6:57

    • 8.

      Video Blocks

      3:03

    • 9.

      Social Media Icons

      4:17

    • 10.

      Editing Hyperlink Appearance

      3:00

    • 11.

      Editing A Pre-made Template

      9:38

    • 12.

      Understanding Template Sections

      7:57

    • 13.

      Share and Duplicate Your Template

      4:03

    • 14.

      Classic vs BETA Design?

      4:10

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

101

Students

--

Projects

About This Class

Are you an entrepreneur who is looking to use MailChimp to grow your business? 

MailChimp is the largest and most popular email marketing platform in the world, however, working out how to use it can be difficult if there is no one there to help.

My name is Stuart and I am a MailChimp Pro Partner, I have thought hundreds of people how to use MailChimp successfully. I have over 120 5-star reviews on People Per Hour and my course has over 100 students on other platforms. I am now excited to bring this to SkillShare also!

With my tuition, I am confident that you will be able to build a perfect template to match your brand within an hour.

We will work through all the steps to add every type of layout and section design you need for your email campaigns.

Your time is too precious to work it all out yourself...Learn the world's number one email marketing tool the easy way, with step-by-step videos...

Meet Your Teacher

Teacher Profile Image

Stuart Waters

MailChimp Pro Partner, Kajabi Partner

Teacher
Level: Beginner

Class Ratings

Expectations Met?
    Exceeded!
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. MailChimp Templates Introduction: Now a template, this is where Mailchimp starts to get a little bit more fun, is less figures and data and processes and more about being creative and making your brand really stand out. So you want your email to do your brand justice and you want it to be consistent with what your website shows. So I'm gonna run through how to start and create your own template. And we'll look at how to make it look like your brand and make sure it looks great on mobile and desktop. So it's really important, but there are some tools which will make this quite easy. To get into the template section. This time we're gonna go to campaigns. On the left-hand side menu, which is the megaphone speaker option. You click on this. And then the yellow sub bar is the second one down. This email templates we'll click on Next as well. And at the moment, because this is a brand new demo account, we don't have any templates saved, which is good. As if your account is new, you won't either create a new template. We simply go and create template. And the top right corner. And mailchimp does provide us with a number of pre-made layouts already. So it's not really a ready-made template, but it creates the blocks which you can build and base your template from. So it has suggested layouts based on products, based on announcements, blogs, education follow-ups. And it also provides different basic layouts as well already. So it's purely just the text blocks and image box there at the moment. And it has layout save. You want everything in one column. If you want someone to, if you want in three even, or a mixture of all of them. Also. If you click on themes, they have some pretty good, that's pretty good pre-made templates there for you as well. These are only available once you have a paid plan. But to be honest, they're not actually that great. And I do find that they can look a bit funny on certain browsers. And the flexibility isn't that amazing? So I think you read the better off creating your own or using one of the ready-made designs that I've added into the templates module under resources. But I will show you how to edit one of them and upload this to your account later. 2. Image Blocks: Images is what really brings your template or campaign to life. And this is super easy to add in. Again, we want to go into our template, which we're currently making on the right-hand side and our blocks, we will see what options we have here. We have images, we have image group, that image card, an image text. So again, it'd be one to drag any of these in, hover over and click on the one of our choice. So I'll click an image. And I can drag this into the arena and choose where I want it to go. So I'm going to have it on this occasion between these two blocks. And at the moment it just has a standard gray block which shows you need to add something in. To add in our own images. We click on upload an image. This takes us to our files, which we already have in our account. So if you've already got some images, you will see these here in your concept studio. If you want to upload some, that one click Upload. Even upload some. We can go into our mean, go into our folder of choice. We can simply click, double-click and upload it. Once that's loaded, it will show into your template. And a lot of the time when you upload an image, it will come up with this error message. It will say this image is too big and might slow load times or get clipped. And people's inboxes aim for 800 to 1200 pixels width instead, let's fix it. So as they mentioned, having really, really big photos and images is not going to do your e-mail campaigns any good. They're going to either get blocked by different e-mail browsers or they can end up in people's spam. And if females are slow to load and open and people are less likely to click on them. So Mailchimp suggests between 801,200. But if you remember me saying earlier, an email is only 600 pixels wide. So I would always, always make sure my images are 600 pixels maximum. That way you've got the best chance your campaigns to be delivered. So you can change this nice and easily by clicking. Let's fix it. And it will take you to a really cool editor that they have. So we don't have to edit all this in Photoshop or something before we can upload it and do the cropping within. So it has 1200 width. It corrects it to that, but I'm going to change it to 600. If you have the blue tick filled in, then your height will automatically change in relation. We changed the correct size in relation to the new width. So once you're happy that you've got 600 width, you can click Save. Now you see that error message is gone. If you want to edit this further, we can click on edit. And we can actually crop images as well. So I might think, Hang on, I don't want all of this in here. I quite like it to be a square. And then it creates a square automatically. And you can drag which part you want within the image. Or again, it has some other pre-made options for you. Or again, you can even do custom. This is where you may want to turn off the lock dimension tick. So we can click on that and it's gone. Now, we can crop it manually exactly how we want. So you can say you can just want part of the phone in there. He might just want sectors the left. Once you are happy with your crop in, you can click Save. Do say that you don't want to have pixels above 600, but you don't want to start getting them under 600 really either, because then it weren't sure the whole width of the template and they look a bit funky. So once you happier that in click Save, We can also add links to our images as well, which you can see by the Link button. So let's click on that. And again, we can choose do you want it to go to an e-mail or out of file again, or just go to an e-mail or a web, or just go to a web address. So we can go this kinds of brand remote. If you want to remove the link, no problem. Just click on Link again. Click Remove link. You can also see here the image display size has kind of drag percentage indicates a. So we can drag this up and down and we will see change in size within our template. We have a style box for images too. And we can add a border around it, just like we did with our text. She's dash. Changed the pixels again. Pick our color. We can also choose if we want rounded corners, our image and our border. You see it looks like a game of snake with it moving around at the moment. And just like we did before, we can extend this style to other image blocks that we have. And then settings, we can choose if we want to align central, left or right. And it also gives an option for if you want to edge to edge. So automatically it melts them as images and it gives a little bit of padding to the left and right and top and bottom. So what you can do, click edge to edge, and you see it stretches out and four main wide images. I think it looks really cool when you do that. You can also constrain the image dimensions by 50 per cent for high res displays. But I wouldn't recommend that. Then you can save. If you want to replace the image, simply click on Replace. Once you're happy, click Save and Close on that box. And you can also decide if you want to have image groups. So we select an image group. It's exactly the same again. But here you can see you got two images left and right. You can add up to five images per group. If we click on, Add another image, it creates this cool effect here. We can add another. Now we go to settings. It provides us with a few layout options. If you do have two images next to each other within an email, you do want to make sure they are the same size though, as if they're not. It can look a little bit uneven and a bit messy. So we upload pictures to this block and we want to have a square picture of a goat on the left. And then we have a landscape picture of a sheep on the right-hand side. You can see there's a big, ugly whitespace underneath where the sheep par. So we want to make sure these two images are exactly the same height and width. So we can see that I mentioned are the two images here underneath the names for 127 times 427 for the goat. And on the sheet we have 640 times four to eight. We can see the goat is cropped to a square. So we can do exactly the same for the sheep and they will match. So we click on Edit. And we could choose one of the pre crops options that Mailchimp has. So we can go square, move it to where you happy. And click Save. Now they are even heights. And say if you wanted them to be landscape, instead of cropping, just one of them to the square. You could go Edit. And you could choose on. And you can click on 69, for example, crop, and do the same on the sheet. It doesn't really matter what you choose, but just make sure that they are even. And it looks so much better. 3. Text Blocks: To create a template from scratch, we want to go back into templates. So just to run through that a bit again with you, we click on campaigns. So the left-hand menu, which is the speaker phone icon. Click on that. And then the yellow menu, we click on email templates. And we want to go to Create template in the top right. From scratch is best. Start off with one of the basics. The most basic of all of them is the one column. And this is fine because we can add in two column elements easily anyway, the only thing we can add in is three column elements to the basic design. So if you really do want three columns, then you will have to go and select the three column templates below. But three column templates often look quite squished because within e-mail marketing we don't get much space. It's not liking when you're creating a PDF or are you creating a PDF? We have quite a nice big canvas to work with an e-mail marketing. We only get 600 pixels width to play with whitewash. You can make it as long as you want. But the width does make design slightly limited. So when you've got three columns, 200 pixels for each section is quite small, but it's completely up to you and it's worth having a play with. It's got two variations for each layout. So for example, we got one column and we've got one column, full width. Full width means that you don't have any kind of gray border around an email like you normally would. And I personally don't think that it's quite a smart. So I'm gonna go choose one column. Again, it's all down to preference. And you can play around with this as much as you like to get your kind of get what works best for you. On this occasion, I'm going to click one column. And it brings up a very, very basic layout. This is basically a blank canvas. You can see what elements are already in the template by hovering your mouse over the actual template. So when it has a border around it, it means that is a different section or block. So we click on this text box here. On the right. It brings up text where we can edit it. So if you go in here and you change it to, I'm learning about templates. You'll see it comes up on the right hand, on the left-hand side, straight away also. And again with the title. Templates. Just like any other word document or any kind of platform used before, you can edit the text within. So it's very similar layouts of word, which is great. So we can highlight the text. You can click on font, change the font. Cisco quite as got a few fonts here. Unfortunately, you are quite limited with what fonts you can use in your marketing. I guess so many people ask if they can have their custom font, they use their website. But email is quite an old fashioned kind of technology and it's crazy. But most platforms and web browsers don't actually accept any other fonts apart from the ones with him, Mailchimp. But there's still enough where you can get it pretty close to your brand anyway. And as long as it looks good and it looks close, then it's fine, doesn't really matter. We can change the font by clicking on various different fonts and you can see how it looks in the left hand side. We can change the size. Just like on Word. We can also change the alignment. So we can have it laughed at the moment. We have a central, the right-hand side. We can get it justified. We enlighten left the moment. And we can change color, the text color, and click on this, the a with the underlying, and it has a drop-down. So this would bring up different colors for us. And we can choose a selection of colors here. Or you can even pick more colors. And you can type in the hex code. Of what amino of your branding color or specific color that you like. We can also make the text bold, italic, or underline as well, simply by clicking on the three icons as the same as in word. Again, nice and easy. And if we have quite a lot of different, if you wanted to have bullet points, we've got three lines here. They wanted to name two bullet points. We can just highlight the three lines. And we can click on the bullet list icon here. And again, if you want it numbers instead, you can click on the 123. And you say any single update happens on the left here, which is great. We can see exactly what we're doing. If you realize you don't like the styling you've got within the text and you want it to get back to how it was. You can highlight it all and click Clear styles. Or if you realize you made a mistake and you delete something you don't want to, you want to go back. You can do undo by clicking on the undo button on the right-hand side. If you want to change the line height I the spacing between the different lines in your template. You can simply click on style. Click on line-height. We can choose between normal, slight 1.5 or double-space. And you say if you click on double spacing, we've got double-space between the lines. We have normal. They got really, really close south and we're going to have slight, slight looks good. We're going to keep slide that we can save it if you do decide that you want this in two columns instead of one. So you might want, as you see, this is quite, we've got quite shorter sentences. So if we've got bullet points on the left, we might think it might be quite cool to have the same again on the right. So we simply go to Settings. And then it lets us choose how many columns we want. One or two. You want to choose two columns and this occasion. And we can choose the split if you want it, half and half, three-quarters and a color either way. Half and half. It looks much neater to me. So we're going to click on that. You will see another layer to this. You will see that there's a column one and column two oxygen. So automatically it will have what you've just typed in a minute ago in your column one. And then I'll call him too. It will have just the generic text. So we want the same thing on the right-hand column. We can copy this and paste it. And then we can change this to campaign. And then you can change the bullet points again too. But when you already seen, just watch out and make sure you are changing the right column. 4. Boxed Text Blocks: If you want to add a text box which has either a border or background color. You can see on the right-hand side all the different blocks that we can actually choose from. So the normal textbox is the one we just used, the one that is already built in there. And if you want to use box text, then we can add that into. If you want any element from the right-hand side, you simply just have to drag it and drop it in the position where you would like it. So we can have it above below where we were before. On this occasion, we're going to drop it below. So just like before, you can change the styling. You can change the font. You can change the color. You can change the one at bold, underlined. And as you can see, it's automatically given it a dark gray background color, which would be yellow. Actually, it's quite cool. But what you can do to change that, we simply go to style. And in the normal text box, we only had this first section within styling. But now with the box text, we have container style too. So we can change the background by clicking on color preview. And we can either choose one of the colors by dragging it around. You can move the right hand sides to get it into the area of colors would like. Or we can click on the colors beneath. Or again, we can type in our own custom colors within the hex codes. If you have your brand colors and you're not quite sure what they are, and you really want them within your campaign. Then our add another little module of some tips how to get those colors. But for now, we can just pick pick a pink. And he don't just get a choice of what background color you have. You can actually choose what kind of board that you want as well. Automatically, this will start with none. But if we click on the down arrow next to it, we can actually choose what types of border we like. So we can have a solid one. We can have dashed, we can have dotted double and said, oh, we have quite a cool amount of choices with eight choices which you can pick from. So if we do a dotted one for now, you can start to see that on the left-hand side. But it's very, very thin. That is because we see here are pixels is set as one. So as I said, we have 600 pixels within an email width. So as you can imagine, one pixel is tiny. So we'd want to change that maybe to five. We can just see how that starts to look. As you see, it has got a lot bigger already. Starting to look a little bit like miss the blobby. And to change the color of our dots. Again, exactly the same as how you change it within the font. You can hover over or click on the colors below. Or we can type in our own colors. And this tick option below lets you apply this to all other box, text box. So if you have others on the page like this, say we drag in another one just for an example. If I say, okay, cool, I really love this pink and blue and yellow. Strange design. I want this in all my box text is awesome. I can click on style. And I can click on Apply to all existing box text box. And you see the new styling change as well. If you actually want to change the font, colors, and types within style. This will then go to both to. One thing I did forget to mention, which is very important, is how to add hyperlinks to our text. As I mentioned before, is just like using Microsoft Word. So if you are familiar with that, it'd be really easy. But if not, no worries, It's super, super easy. To say. If we want Mailchimp to be a hyperlink, we want this to link through to the Mailchimp site. We can highlight the text as such. You see on the right-hand side. Then we can click on Link. And here we can choose how you want it to be a web address and e-mail address, file or anchor link. So we click on web address. We can type in MailChimp.com. Click Insert. You can see that word is now linked to melt. 5. Image Caption Blocks: If you would like image and texts within the same block, then we can do that with two different options. So again, we go back into the blocks on the right hand side. And we can drag in images and texts. When you can drag this into your template, you will see the kind of layout that it has. So it has an image and automatically adds a text caption below it. Just like our textboxes, we can choose how many columns we have though. So if we go to settings, we can choose. We have one or two images. And just like it had with a text, it then breaks that into just like we had with the image blocks. We can choose a few of the positions of the images. So we can choose if we want. We can choose if we want the image above the text. We want it to the right of the texts. The left or the bottom. So I quite like it when the image is to the bottom. And again, we can choose if you want the image aligned left sensor array. We can change any of our font styles, or if you want them bold, italic, colors, fonts, what links should like if you let them bullet points, exactly the same as the way we did not text box. Also, in styles we can choose what line-height we'd like and what board would like around the image. Again. Like I mentioned with the image groups, we want to make sure it bears image left and right of each other. They're the same. So now we've cropped these images quite a lot and they're too small for what we'd really ideally want them. But just to get an example of how it does look, we've got the text, it just underneath it. You may think, why, why use that instead of just have image and texts underneath shortly, that will do the same thing. But I'll show you why we don't do that. So if we added an image group, we had two images here. And again, we're going to use for sick of this goat and sheep who are going to upload these two again. And then if we wanted to add a textbox and want a text underneath them, will go to Settings and choose two columns. We save that. It looks pretty much exactly the same, doesn't it? But what you need to remember is that people won't just be looking at this on desktop. There also be looking at it on mobile and immobile. What happens is MailChimp reads it left to right, and it reads individual sections at a time. So as these are two different sections, it will read it as sheep, goat text, one text too. And if you're ever unsure how your campaign is looking at mobile, what you can do is you can click on preview and test and the top right. Into preview mode. You can see how it look on someone's email. And then you can actually click on mobile as well. Say, Oh looks good and the order you want. And this is with our caption blocks we have. So it has image with the caption, image with the caption. Then it will go to version two, which is built with just image and then text blocks. As I mentioned, it will show image, image, texts, texts, which won't make any sense. So that's just something to keep an eye out when you do that. There is another way of adding images, text, which is the image card. And the text in this section is laid out exactly the same as boxed text module that we used above. Our little dots around it. So do you want it to change the styling of this? Click on style. You can see we've got the textiles are the height. And we've also got the card color background. And we've got the rounded corners. You can see the corn is changing here. The texts and caption blocks are exactly a combination of the 2 first elements we did, which is box texts, text blocks, and then the image groups. 6. Add Your Company Logo: One of the images I did forget, as I mentioned quickly, which is quite important. At the top of your campaign, with a basic gate, we'll have a logo here, a credit default blank logo. This is exactly the same as any image block is just called logo instead. So again, if you want to, if you want to add your logo, you click on Replace. And you can click on, for example, the Salt logo. Because the top, and just like any other, you can re-size it. Next, fix it. We can type in 600 pixels wide and you can see it's automatically changes the high as well. And click Save. And save again. I mean, this image is very big on this occasion. I know I said he prayed out or to use it too often. You could actually use constraint image dimensions by 50 per cent on your settings part of the image. So click Settings. And it's still then high-definition. But 50% 7. Call to Action Buttons: The most important part to your templates by far of a call to action buttons that you add to your campaign. So without these, just provides a pretty picture or a blog for people to read. We've added some links with hyperlinks to some of the images that we've talked about and some of the text. But what really makes it stand out is the buttons. So we drag in button on the blocks and the right hand side. And we can add it where we want within our template. And it makes it quite simple, but it lets you know what text you want to add. So we can have, by now that sounds good. We can link it to a web address, which would be your landing page or a page with a blog that you've written. So we can add our website. Something else which can be useful, could be a download button. So if someone subscribed to a sign up form and you've said Sign up or subscribe to receive your ten tips on becoming an expert email marketer. Then you're going to have to link them to a page or a PDF. If there is a PDF, we can change the text to download now. And instead of linking to a web address, we can add it to a file. So if we uploaded a file, example ten things your clients do. And then just like you upload an image, then appears in your content studio. And what it does, it actually creates, creates an own unique URL for that document. So now you will see links to file, file URL. Now that is in your Mailchimp account and it's hosted here. So you can also send that as a link to your customers. For example, if I create a new tag, a new tab, and I paste this, you will see that the document comes up and they can scroll through and read it. This great way of sharing your PDFs of your clients. Because in a really pro, way, of course, you may actually want to add a contact button. And most of the time I'd recommend going to a contact form. If you want them to email you directly. You can do also. So we say Click to email. And we can do link to email address. We can say Stewart Brand remote. And we can add the subjects that you want it to automatically have. We could add Mail Chimp template, or even a message body. Hi, I saw your offer. And I am interested. Then you can leave space and this is what they were typing below. You can add an advanced options, but that's for another day. So you can save and close. That way we go to Preview again. So it goes to the top right, that ends the preview mode. See on desktop or mobile. You can, you can see it on Inbox mode if you want to upgrade your account, which it doesn't really matter because desktop modal, but mobile is all you need. And if we scroll down to our button, if we click on Click to email, now, it opens up that email. Within Outlook or Chrome or wherever you have it sets up. It opens up the email. And it already has this TextView here. And always, if you want to get out of preview mode, just click on the right hand side of an click on the cross. And of course you may not want it to be this color. Again, we can change the colors by adding your own hex codes or by dragging it or dragging the color selector around. Make it as personalized as you like. We can change how rounded we have the corners. So you can have it as square by having on less. Or you can drag it around and have really kind of really circular shape. And just like our images, we can add borders. And as you guessed it, you've got the pixels. You can change the colors as a kind of creepy looking button. But it'll do for now. You can change if you want it bold or not. Change what color that you want the text. And you can change what size. And the padding means how much space there is between the text and the the actual button. So if you increase it, for example, 30, you'll see that space has increased massively. Okay, and save and close. If you did have another button, save, you already start creating templates and you want a button down there as well. And you're like, hang on. This design is pretty, pretty beautiful. I want this enormous buttons. We can go to style and click on the text at the bottom, apply to existing button blocks. So we tick that save. Now your other button is the same style. With your buttons, you can also aligned center or left or right. You can have it full width of it to text. And this is in the Settings area of your butter. So every block you do have has contents, style and settings. And you never quite sure where each bit is because sometimes even I forget, if you just click through them, you'll find it. Click and scroll. A lot of it is just trial and error and just have some fun with it. You see this template isn't looking the best. But you kind of get the picture of how to build it and you will do much better job than this. I guarantee. 8. Video Blocks: Now your company may have a YouTube account and you may want to show up a particular video that you've done in a topic or a newsletter. And you might want to have this in your email. Mailchimp does have a video block for this. As you can see, it began blocks. We have video. So we can drag in video. Let's try getting above the pictures. You can't upload the actual file, a video itself. As I mentioned with the images, we don't want these emails to be too heavy. If they're really heavy, nugget blocks and spans, and your ranking and score gets becomes worse. So Mailchimp don't let you do that. But what they do let you do is adding a video URL. So we get a video of new shoe. You paste it in. We can do a Vimeo link also. And it comes up like this. So it looks quite cool. It has the YouTube icon over it. And you have your caption block again, just like we did in our image and text, in our image and caption blocks. So we can have video description here. And just like image caption boxes, we can change the style of the background. Colors. Reds, for example. We can change the the colors of the text. You'll start to come and expert in this, you can make it bold. We can link that to our link also. So we highlight this and we click on Link, web address control V. And then again, just like our image caption blocks, we can choose if we want to have the caption position bottom, top, left, which looks awful. Right? You can choose again. If you want the caption to be 3.5th, three-quarters, et cetera, et cetera. So you can see what kind of options you do have. A mean with a video, I'd always recommend at least having a 50 per cent said, Do you want some text inside of it? Look cool. But in my opinion, it looks best for the caption to the bottom in the image as such. So then when people click on your e-mail, that will go straight through to your YouTube video. 9. Social Media Icons: You can see at the bottom of any of the templates that you start within MailChimp, it will automatically have a social follow box. And this is what you'd expect. It adds the icons of various social media platforms and it allows you to type in your own URL for Twitter or Facebook or websites. But there's a lot more there than just the three that they add. So if you click on Add Another service and you click on drop-down, you will see that there's LinkedIn, YouTube, Pinterest, Instagram, Vimeo, vine is that still exists. Rss for your blogs, you got a huge choice of what you want to add. You can go crazy with this, but if you add more than five or six, it might look a bit messy. So if we choose, Instagram will replace website with Snapchat. See the icons that really cool here on the left. And we just need to make sure we add in our personal company domains these obviously if you leave them as they are now, It's just going to go to a generic Instagram page, which is no good for your company. And we can change the style of bees just like we can with anything. So you can add texts underneath and if you want which are written, I wouldn't add. You can add backgrounds, the actual container, the same way as you always can. You can add a border. We can change the size of the social media icons. We can have them really big, which I quite like that. Or you can even have them downwards, which I don't like, but it's all preference. And we can choose if we want them. Icon only, text-only. Both icon and text fell and just icons, much cleaner line essentially left to right. As such. Then we can even choose if you'd like them, black and white, if you like them. White and black, gray and black. And it all depends on your branding and what do you think that's clean on this occasion? So once you're happy with version, click, Save and Close, It's really that easy for people to follow you. Another kind of social media block that we have within MailChimp is the share block. So the difference is this is to share your campaign that you're going to send. Every time you send the campaign, it actually creates its own domain. And this domain can then be read on any kind of browser. It's not just within your email. If you do want that to happen. It automatically picks Facebook, twitter, and forward to a friend via e-mail. And again, you can choose the platform that allows you to share this on. So it's not quite as many. You can add another service that Google, Pinterest, LinkedIn. And you can even change the texts that you want to add under it. Check this out, for example. And you can share it, as I said to the campaign URL, or you can add a custom URL. If you want to share. For example, you might have a link within your call to action you want people to go to. You can say, I want to share this link. So you can say I want to go able to go to brand remote credit UK. And you can add description. Again. Once you're happy, you click Save and Close. 10. Editing Hyperlink Appearance: Now I've done us all a favor and I'll change the section colors back to why just so it doesn't hurt your eyes too much when we look at this next part. Now, I'd like to look at the color of text with an email links here on the templates. And remember we added this link for Mailchimp and automatically adds in a color blue for the link. I know we might not want this blue color for the link. Sometimes might want a brand color. We might just want it to match with the rest. And we can change the color of it within the actual texts to get the actual text block just like we did before. So we just make it a dark blue for now. It's still say it is underlined. And a lot of time when we actually send this campaign, it would default to the previous color it was before. And you might think, how the **** do I change this? Q highlighting it and clicking underlined, stop underlying nothing helps. The reason why this is, is because this is actually achieved through style. So we go back to our style section. We can click on the section where this is, which is, I think I believe it was body. So when you scroll to the bottom, you will see it has body link. And it will show that the blue color that was before, and it shows that it's underlined. So if you want this to be the dark blue that we've got to choose whatever color it was. And we unclick the underlying Save. And we see that hasn't worked. And that means that we're probably in the wrong section. Because I remember I dragged everything around. So if you go to header, we can see this also has the header link for the last blue we had and the underlying. So let's try on ticking the underlying now and we can see we're in the right place. So yeah, great. Mailchimp no longer has the underlying here. And we click Save. So now when we actually send the e-mail, the link would be the exact color that you want instead of just doing the automatic light blue. Because that can be something that's really hard to find. And once you know how to do it, It's really easy. 11. Editing A Pre-made Template: Just like you see, it's exactly the same as the preview that you had. Everything is editable, everything is Dragon. Drop a ball. If that's a word, you can just drag to the left and move it wherever you want. Everything is applicable. So we can hover over section and we can click on the duplicate block. And then again that module, you can drag it around. Within a text. You can simply get rid any of this text and you can add your own. If you make any mistake, you can just click on the Undo button, which you see here. If you are copying, pasting any text over, I would recommend copying pasting into notepad first. Then copy and paste or Notepad into your melanin template. Because this will mean that it clears all the styles that it's taken from the website or PDF that you took yours from. For example, if I copy some text with Mailchimp and I paste it in here, you can see the styling and size is going a bit funny. So if we go back, we now copy this into Notepad instead. Now it's, now we can select it and copy. And if we go back on a merchant, the way now hover over this and paste. It will, it will remove all stylings and it will keep it how we have it in our template. Just like that. And with the buttons. Normally Mailchimp, if you've used it before, you will have buttons just like this one here. Drag it in, and you can add in the button text by now and type in your web address and the URL. These ones are slightly different. And you can edit them by simply highlighting them. Changing the texts, changing the links with the link button, and do exactly the same. The only difference is if you want to change the color, then you want to go to click on Source, which is the two arrows together. And we can change the background color if you scroll right to the bottom to number 26, row 26 in this case. And then on 29 you will see the background color. And you can type in your own hex code here. And if you decide you don't want, if you don't want this. So if you change it, the color changes here. And if you decide you want to use the standard buttons and no problem. If you scroll up and go to number 2026, you can click delete, and that's gone. The reason I've added buttons like this and the code block is so we can have the call-to-action buttons within our text. Caption blocks. Image caption blocks. The motion doesn't normally let us add buttons underneath caption blocks. For some reason they don't make that an option which I think is crazy. But with the source code, we can just add that into the textblock of the caption blocks. So again, if you want to change the color of the button, you can scroll down to where it says BG color. If you're unsure whether is, you can always do control F on your keyboard and type in bg color with American spelling now. And it will show you where the hex code is. If you're unsure what color is your brand does use, I recommend is really cool tool that I've been using calories and it is free. And you can take a screenshot of your website. For example, if I go to brand remote and I really want this blue color and I can't remember what it is. I can do print screen, go to a tool like pain, whichever tool you like to use. And then you can save this. It's just like a test image. Under Downloads brand color, test. What we can do, we can go to Color Picker, Click on usual image, browser drop image, choose our color, we have. And then it's picked up all the colors that we've used on that, on that image. So if I highlight over the pink, I've now got my hex code for that pink salmon, my blues and purples, which is, I think it's just brilliant. If you've got Photoshop and you know how to use Photoshop. He paid for it, then obviously use that. But if you don't, this is a great, cheap option. You can copy your hex code by clicking the Copy button here. We can go back into our template. We can check hover over the beacon, select the hex code. You can select the hex code and paste it in. Now you can see we've got a nice new color. Again. Let's change the links. Just highlight over the text, click on Link and type in the address you'd like it to go to. With images. We simply can click Replace. We can upload our own, or we can insert ones that we've inserted before. When you are changing, just make sure that you're in the right column. It tells your column one and column two. The same with the text. When you are inserting your pictures into these kind of blocks, make sure that they are even in size, because otherwise it'll look a bit, a little bit tacky. And if you want to change any section colors, we want to go to style. And we have four predefined sections with a male chimp. We have pre header, header, body, and footer. So I've added a different color for each independent section with a male chimp. Just to make it really easy for you to pick and choose which styles and colors you'd like for each area. So if we want to change the color of the first section with our Mailchimp, we click on pre header under Styles, click on Color. And we can again typing or hex code. Or we can drag and choose any colors that we like. Some horrible ones going on. But just to show you what I mean. And apart from that, we've got our box texts which changed the exact same way. Highlight, paste, change the, if you want it bold, if you want to change the font, size, line-height, within the style. We can change the background color that we have. Again, we can use our own branding colors. And then obviously we have the logo at the top. We'd replace and we will choose our own logo that would like to share to upload. Then the only thing left is to make sure you have the right social media icons in the bottom. So at the moment these are all blank. But if you want to add your own type in your own addresses in the URLs. And you can even add your own. If you click on Add another service. You can choose SoundCloud. You can choose Pinterest, YouTube, anything. And then just like any other mountains template, you can drag and add other images. Social media shares, code blocks, videos, wherever you like. This is super easy to use. And once you are happy with it, you got to do. You can rename it to whatever you like. Then click, save and exit in the bottom right. 12. Understanding Template Sections: Now, every time you've gone two blocks, you probably notice the style icon to the right hand side of that. And I haven't mentioned it yet for a reason because there's so many blocks we've looked at and we've looked at the stylings for each of the individual blocks. But the whole actual e-mail itself has its own style. So not being secret squared about it, we can actually check this out now. If we click on style above or next to the blocks, so make sure you can see a textbox divider, et cetera. Then you're in the right place. And here it breaks down the different sections we have. So first of all, page so page talks about the actual the actual color of the page around the email. So, you know, originally we looked at everyone at the email to be full width or we wanted it normal and we chose normal that has this coloring around. So we click on Page. We can actually change the background to whatever you like. So you could change it to black, for example. Or we change it to a dark gray, which looks quite cool. We've got the black on this occasion. Again, this is all completely down to preference and downs of your branding. Again, you want to try and match your colors of your brands, your emails where you can. And we can add a border to the top. It's using all the same kind of borders and colors we had previously. And we've got a choice for border at the top of the e-mail. So we can click Solid. And again, we've got a choice of all the same styles. We have. The borders of images, buttons, text. It's all, it all keeps saying kind of design and layout. So once you start to get used to it, it becomes much more natural when you go to email, becomes much more natural when you go into editing or emails. So we click red border and we choose the pixels again, we make it 20. For example, add a border to the top of the e-mail. We can have a border around the whole e-mail itself, which is cool. So we wanted this summer do dashed will make it that red again, keep consistent. And we can see it slightly narrower on the side, but we've only got it for one pixel. And as you remember, an email is 600 pixels. So we can change that to ten. Shows. It looks horrible. So we probably make it to the whole email. It looks a bit crazy, I must admit. And you can change the styles of fonts of different headers, heading one and into. Then automatically it will go to those styles. So if you choose, for example, Georgia had a one. When we go back into different blocks. If you highlight parts, but I didn't actually mentioned earlier, if you've gone styles, you can choose. And you want a heading, one, heading to heading for all this kind of thing. You change the heading one it changes, that's Georgia style that we had before. But we're going to clear that up for now. So easy mistake to make is click on settings. But when you're actually on the block. But you will know quite quickly if you are because it will just have no options. So we click, Save and Close. Let me click back on style. And that's page. So that is all you need to know if the page part and the most interesting part is the sections that Mailchimp has. So when you're scrolling through our e-mail here, it looks like there's no I mean, no unique sections apart from the blocks that we have and the elements we built into the e-mail. But once we start to change the colors of different sections, you can see where they begin, where they end. So a lot of time, I quite like to have one section, white and the next section background with the color of the branding I have. So if we make the pre header color white, and we can change header to read. Now already, you can see where them two sections are separated. So the pre header is white and that ends here currently. And header is the red, and that's here. And it stops off before body. And we can see body here and change color. And we can make this one, just make it a horrible color just so you can see the difference. Again. Don't make it look like this. It looks awful. I really want to make it white is black. Let's make it white. But you can see what the difference is. And then footer, we're going to change this background to red again. So you can see here where the first section is. Those sections are defined, but the elements itself can move from one section to another. So for example, if you are like, well, I have templates block here, but I really want that, the black with the red background here. No problem, just drag it up. And if you move it into that section, it will then I have that red background. Again, if you want the logo, you want it with the white in the pre header or whatever color you hadn't pre header. You can move it there and it changes. You can actually add as much as you'd like within the body of any of the sections. So if you want to keep dragging and adding things with the red background, for example, keep moving them in there. And, you know, we looked at the dividers to create space between sections. You can also do that directly within the styling to this. And now we know header has the red background, so we can define where this section ends. And we have a padding top, which is nine, and the 0 padding bottom. If we change the padding bottom to 18, we can see there's a big gap now between or you make it bigger. Just to really show it, you see how much that change there. And with the sections, we can have borders again. So we can have a border, solid border. We can make it white. We can add the pixels to ten. So we got up. I mean, having a white is probably not the best idea because we've got white above it already. If we change that to black, there we go. Now you can see where the border comes from, where it starts. 13. Share and Duplicate Your Template: So once you're happy with your template, now, it's great, it's time to save it. So now you can use it for all your future campaigns if you wish. It'd be super easy to just change the texts and change images. Now you got all your styling and your branding within it. So all you gotta do is click on save and exit. In the bottom right-hand corner. We can call it. For example, if you create a template based on newsletters, you want to send out a newsletter campaign. Simply save and automatically it take you to your template section and where you previously had nothing before. You have your template. If you want to edit, that is simply click on edit. And it takes you right back to where you were before. So all these blocks editable and applicable. Again, once you're happy, click, Save and Exit. And he may want to copy this and bass and other template on the back of it to say if you create a newsletter can plan template. And you think I want to send out some sales e-mails as well, but I want it to keep a lot of the same elements and the same colors. So if you were to do that, you would click on the drop down arrow on the right-hand side. And you can click on replicate. Now you can see newsletter campaign template copy 01. So we could change this to sales campaign template. Then we could change everything we wants to within here, change the headers to sales, for example, and then save and exit. If you want to share this template some with another Mailchimp account, you're super proud of it. So let's do that. It's really, really simple. All you have to do is click on the down arrow again and then share. You can either send via e-mail, you can type in their email address. Blah, and it will go and then click on Share template. And then all they gotta do, they receive an e-mail and they click on it on the link, and then that template will arrive in their account as well. Or you can share by URL. And then if you send that someone else, they logged glycine example, I log out and log in with my other account that go to the bar at the top. And I paste this in my browser automatically, should we go, has this template right at the top, and then the other person can edit it just like you did. I've actually made for templates, which you can find in the resources section of the template is area. And it has four links just like that. If you click on them, those designs will go into your account. With the next module, I'll show you again just how to do that and how to edit these ready-made templates to your colors. If you completed the templates module, it probably will make a lot more sense. And you'll hopefully find it quite easy. Because we'll be looking at changing colors and fonts more than anything else. 14. Classic vs BETA Design?: Now this is just a quick video. But if I knew this about a month ago, it would have saved me hours of looking through and one room war is happening. Basically Mailchimp of crazy, a new template builder. And they released this maybe a couple of months ago. And to try make things easier and quicker. So far the feedback I've had from people I work with is not great. So it looks like this. So as you say, it's different to the videos that we have looked at so far. Regarding templates is actually more like the website builder. If you've seen the videos on that, is very, very similar layout. So you get a lot less flexibility. But anyway, I'll show you how to build e-mails within this editor shortly. But if you do create a campaign and your email does it like this and you don't want it to, then you don't have to worry. This is just something that Mailchimp automatically sets up, but we can change that. So all you need to do, I mean, you might like this design, this crater. I mean, there must be some people who do. They wouldn't have added it in. But if you'd like the classic builder like me, and you want all your campaigns, the future to be built like that. We would simply click on Exit. So click on the monkey and the top-left corner. And all we need to do, and again, it's not obvious, so it could take ages to work out. We click in your username and the bottom left-hand side. Click on that. We go to profile account rather than getting confused already. We go to Settings. We go to details. And it's not obvious at all. I mean, it's not even at the top. So if you scroll scroll through, it has all your information that we've looked at earlier about time zones, date format, etc, currency. Keep on scrolling. And this is what we're looking for. So it says default, email builder. Choose which builder to use by default when creating a new campaign. At the moment it has the Beta-1. So if you have a new account, you probably have yours is this as well? So it says seek updated user interface to add and edit content inside of the email itself. So all we have to do, click on Classic Builder and just make sure you see that second pair on the right-hand corner of it. And we go down and click Save. And now when we go to create a campaign, instead of going to that new builder, for example, you see that in the drafts new builder that we just had, because to create campaign, e-mail. You guys regular and call it testing. Just for now, we go begin and we go to Design Email. And fingers crossed that we've got, great. So it's gone back to us, our standard lovely familiar emails that we like. Again, it's down to preference. If you haven't tried both of them, try the new builder as well to see what you prefer. But flexibility wise, you get so much more with the classics. So I will do a video based on the new one anyway, just to make sure. And you can cite yourself. But if you are stuck, That's how you do it.