Need up to 30 seconds to load.
how do you put social media icons in
your email signature today's video is
inspired by a viewer request and i'm
going to show you just how to do it
before we get started my name is
michelle i release weekly videos on
marketing websites and all things design
so if you find any of this information
helpful please be sure to give this
video a like it really helps me out
all right there's a couple of things
that i want to go over before we get
into the tutorial first i do have a
couple of additional videos on how to
create an html signature how to create
an email signature in google docs and
how to install for apple mail so if you
are interested in any of those topics i
will have a link in the description
below that you can check those out
second because this tutorial will
require individual images for each
social media icon i thought i'd do you
guys a solid and i put together a free
template that you can utilize where you
can customize the colors for your own
brand and pick and choose which icons
make sense for you it's a free canva
template and if you want to get that
all you have to do is visit the link for
my blog below you can put your email in
and then i'll send it directly to your
inbox if you don't have canva and you
still want to get the template not a
problem you can sign up for canva for
free get the template and then download
any of the icons in whatever format file
that you prefer all right without
further ado let's get started okay to
put social media icons in our email
signature we first need social media
icons we need individual files of each
social media platform that we want to
include so it can be kind of annoying to
create individual assets you are welcome
to do it i decided to do a little bit of
the legwork for you and i put together
this canva template so that's what we're
looking at right now these are 40 pixels
by 40 pixels and then i just put a
variety of
styles and shapes in there for each
platform it's not all the platforms it's
most of them if you decide that you want
to customize it with your own brand
colors you can always click on one of
these icons and then you can select a
different color there if you want so
many options to make it your own i'll
turn it back to black and then once
you're ready to download these you could
do it all at once you just come up to
this download button and then you can
choose whichever file type that you
prefer png and jpeg are going to be the
ones that i recommend so if you have a
preference one or the other you can
definitely do that
select your file type and then you would
come down to the pages and then you can
either select all of them but if you
don't want to download them all at the
same time you can always just pick and
choose the couple that you want and then
you hit done and then download and then
you've already got all of your icons
ready for you so if you want this
template i'm giving it away for free you
can go to the description
of this video which has a link to my
blog and then if you go to the blog
you'll see this green box where you can
put in your name your email and then
it'll just send you the template
automatically so once you have all of
your individual files ready then you can
add them to your email signature let's
take a look at what adding these to a
google document email signature might
look like so i have this table structure
in here and this is from a previous
video so if you want to check that out
you can just go to the description and
then we've got icons so it works the
same exact way as we did with the logo
so if i were to remove some of these
and i want to add them back in i can see
that my cursor's there
and then i will just go to insert image
upload from computer and then i
downloaded each of the files so i get to
choose which ones that i want to put in
so maybe let's do facebook if i hold
down the command key i'm using a mac i
can select additional ones so i would
like to do instagram maybe we'll do
linkedin and youtube we'll just do four
for now so i'm gonna hit open and i can
see
that all of my icons have appeared in
there so the reason i made them 40
pixels is because we do want to display
them slightly smaller than what they are
built at just because that's going to
help with retina screens and making
things look crisp so how would we resize
and make sure that every single icon is
the same size so if i click on an icon
and i see that i've got some options
here i actually want to hit the three
dots and then go to all image options
this is going to allow me to set the
size that i want to use so right now
it's 0.42
so if i go down a little to 0.32
that is going to make sure that things
look good when they're sent through
emails so i'm going to do that with each
individual image
so that we have them all the same size
let's say that they're maybe a little
too close together if i place my cursor
by the last one i can just use my arrow
keys i can use my space bar and then i
can put a space
in between each of them and that spreads
it out just a little bit we don't we
might not want them too close since
we're linking these so
how would we link these we click on the
image we find this link and then you
type the url of your social media
account you click apply and then that
link's been added you repeat that
process with each individual link so
they go to the proper locations so once
you have your email styled so in order
to get this email signature into either
gmail
or
outlook we just need to copy and paste
it into our signature box so we could do
something like command a or b control a
on a pc where you could select all and
then you could do command c or control c
on a pc
and then you would copy it into
your signature box this will not work
for apple mail so if you do want to do
something with apple mail you will have
to create an html signature so if you
are curious on how to install an html
signature for apple mail i do have a
video on that again that link is in the
description so you can check that out so
let's take a look at what that code
looks like so
you'll just have your html table built
you'll have all of your styling and then
with with this example i've done a
separate row
for
all of my images which are just side by
side so i've got the link with the image
and that url will be different you do
have to host these images somewhere if
you want them to work because it needs
to pull that source from somewhere
so your url source code will be
different than mine and then you can add
any additional styling that you want so
i put some padding above it just 10
pixels and then i also did some padding
to the right
and did five pixels in between each
image so you can make all of those
styling adjustments and then you can do
it two ways so if you're using apple
mail there is a very specific way that
you would want to install this however
if you are using the microsoft outlook
platform you can easily have your html
ready
and then what you need to do is copy and
paste from a browser or a window like
this so i'm using codepen but i could
easily click over and then i could
select everything i could copy the
design and then i could paste it into
outlook this method doesn't really work
so great with gmail
so this is probably very specific to
outlook if you want to do the copy paste
method
there gmail just doesn't really work
great with html so really the best way
to style an email signature for gmail is
to go ahead and build it in a google doc
and then copy and paste it it's a very
quick overview for the entire process
let me know if you found this helpful
and as always if you have questions on
anything just leave those in the
comments i hope you found this tutorial
helpful if you did please be sure to
give it a like and subscribing doesn't
hurt either as always thank you so much
for watching and i'll see you in the
next video
