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.
Stuart Waters, MailChimp Pro Partner, Kajabi Partner
