Create an Email Signature with Canva with multiple Clickable Links & Social Media Icons

want to learn how to create a professional looking email signature with clickable link in this video i'm going to be showing you how to create a professional looking email signature with clickable links we're going to be using canva in canva only to create your email signature for gmail and everybody can follow along even if you have a free account so let's go what is going on everyone ronnie here your go to canva guru welcome back to the channel i'm super happy this week to have another tutorial with you guys today we're going to create something quite important because this is something you're going to be using most likely every single day i'm talking about email signatures and more particularly email signature for your gmail account gmail is by far the most used email solution out there so i thought let's go ahead and create a nice looking email signature with clickable link to your social media icons but also to your website and i'm gonna show you step by step how to create that now in this tutorial i'm also going to talk about the different ways i explored in order to get to this final result because i want you to not only recreate what i'm gonna show you but also understand my creative process and see how i work with canva so that you can be inspired by that and of course create your own design so the first step to creating your email signature is to search for a template because canva does have email signature template so in order to find them just simply type into the search bar right here email signature and type enter and canva is going to bring you to this result page in the template category in the template part of the website where you will have a multitude of email signatures some will be free those without any little crown right there and those with the crown are pro only email signatures so me i'm looking for something relatively minimalistic for my personal brand okay for the ronnie hermosa personal brand not for team randy which is more colorful i'm going to be using my personal brand which has this yellow color as a dominant color and a very kind of minimalistic style so i'm not looking for anything too crowded like this one or this one i'm looking for something simple with my photo and a couple of links on the side so let's see what we have here if we can find something that could be useful for me let's go for this one okay so just click on the template it's gonna open the first thing i want to check is the dimensions of this email signature so i'm gonna click on the file button right here it's 400 pixels by 200 so 400 large by 200 high okay so i guess i'm just going to start populating this image signature with my own details right so let's go ahead and do that so here would be my name ronnie hermosa i need to stretch that box slightly content creator yep i'm a content creator i'm fine with this phone number uh probably not email probably not as well as i mean this is my email so if you want my email just hit the reply button i don't need to give you my email again you probably already have it directions no website yes definitely so let's just change the website here and you know what i'm going to get rid of the www i'm just going to go straight to the website ronniehermosa.com okay so that's the website and so here well let's swap the photo as well for my own photos so i do have a folder right here with some cool photos of me without a background so i'm going to be using this one right here let me bring it to the right place on my design resizing this slightly i'm gonna make this quite big like so okay uh this is coming to life i'm not really a big fan of all these little thingies here let's try to change this pink color for my dominant yellow color and see how that goes i'm going to use a change all button okay so not everything has been changed let's change this one as well use a change or okay and for this one okay so this one we cannot customize the color you could if you use a duotone effect so edit image click on any of the duotone and what you will do is to just use the settings of the duotone and use your color okay so i'm going to use this color and this one which is slightly different from my first yellow and there you go so now i have these bubbles right here in a different color i could do the same right here okay so again duotone using the settings and i'm going to go for my custom colors right here and apply once i have them i can bring my photo back in front of them okay so this is where i am at this stage so let's continue uh tweaking this i'm gonna apply my brand fonts because i do have brand fonts which is prompt okay so the main name the h1 if we talk about text hierarchy will be prompt bold okay so this one right here 16 can make that slightly bigger okay and then the h2 so this text box right here will be prompt thin okay this looks good and then these all of these should be a different font as well probably prompt medium let me see prompt prompt medium yep i'm going to change all for prompt medium okay so this is what i have now let me quickly add my links here i'm going to swap these for some other icons but before i do that i want you to understand that this is going to be uploaded into the gmail signature option so if we go to my gmail account and i click on the little cog icon right here see all settings so if i scroll down if i scroll down all the way here to a section called signature you see i can create a new signature from gmail so if i click here i can give it a name so let's say ronnie v1 okay i'm going to create that signature and now what i can do i can add some images and i can add some text and everything but i would love to create this entire design in canva and then import it and then maybe add my links the problem is that if i import the entire design so what i'm designing here in canva if i export that it's going to be a flat image probably a png or jpeg but it's going to be one image and so if i want to add links i can only add one link to this image right so we have to consider that when creating our email signature so the way i try to solve that problem from here because what i did is that i went ahead and really created all my different icons here with my linkedin my udemy courses my facebook community and my youtube channel and then also my website and then i figured oh i can only add one link to this image so this didn't quite work out so i'm being transparent here showing you the design process i'm not gonna repeat every single step but i'm telling you what i went through so after that what i did i went to youtube and i searched for how to create an email signature with clickable link and i found this tutorial from one of my good friends sandy sevilla from sandy solutions and she by far has the best tutorial about how to create a clickable email signature with canva so go ahead and check her channel out i will have a link in the description you can say hi to sandy coming from team randy if you decide to subscribe to her channel but sandy here has a very comprehensive tutorial that really inspired me to create this one and you know how i like to work i like to see what's out there and then kind of see how can i use that and maybe elevate that to use for my own brand of to use for my own content so what sandy suggested here is to create let me move forward so this is kind of like the final result that she came up with and she has her signature with her email her website and then below that she has added a couple of social media options social media buttons so i thought this was a very smart way to send the viewer not only to one link but to add as many links as you want really by creating your social media icons and positioning them right below your main image so we are going to do this we are going to kind of learn from what sandy has created and uh just add the social media buttons at the bottom i'm going to change a few things from what sandy actually designed and this is i'm going to get rid of the email and i'm going to actually change the size of this entire canvas because now that i don't need all of this let me show you now that i don't need all of this information this looks pretty empty and also i'm not so much of a big fan of these remember i told you i wanted to create something more minimalistic so if i do get rid of these i don't have much stuff going on on my email signature anymore okay so this is pretty much the information that will remain and i need to build from there all right so let's continue building the first thing i want to do is to give emphasize to my website okay so this is my website right here it's looking a little bit sad right now because i don't have a strong focus on this line of text so what i'm going to do is to add an effect and add a background to it okay so and i'm going to choose the yellow color okay so that's my yellow color and this makes the the entire button or the entire sentence url right here much more visible at this stage okay so this is good so that will be the one link that will be basically attached to this visual right here that i'm going to upload on my gmail so i want people to understand that they can click on this image and go to my website so i need to kind of have a visual prompt to get people to actually click on this because if they see it they might not understand they can click through directly to my website so for that i'm going to go and search for in my elements i'm going to go and search for tap yeah just tap and click on graphics all right so this is good i'm going to use this one right here make it smaller a little bit smaller even and make something like this okay i'm gonna position this forward until it's right here and then i'm using my keyboard arrow to finish like the positioning of this next i'm going to group these two things and make that bigger okay almost as big as my main title right here my main name my h1 line but it's not exactly as big because this is also going to be skilled some more you see i'm going to go all the way to the safe zone and this one right here i'm going to bring a ruler okay so if you don't see your rulers right here go to show rulers and guides right here for me it's already activated so i'm going to bring a ruler and put this right here right before my capital r letter right here and i'm going to move this so it sticks it's aligned to this piece of text right here okay next i'm gonna select everything and make that center okay so this looks pretty good my photo right here could be a little bit better what do i mean by that well it could be a bit more on brand my brand is black and yellow okay and by the way i can see that this is not black but this is kind of like dark gray yes so i'm gonna change the dark gray for my blacks and change all i want the maximum contrast between that bright yellow and that pure black so that's what i did right here i want to make this photo black and white okay so let's start by cropping it correctly i think i have enough distance right here between my text and my photo we will have to test by uploading this to gmail and see how it looks but yeah let's work on that photo so by clicking on it edit image and i'm just going to use the adjust sliders right here i'm going to go to my saturation and bring it all the way to zero boost the brightness a little bit boost the contrast so i pop a little bit more maybe some vibrance and i'm gonna move the blur slightly in the negative so i'm a little bit sharper okay so now this looks much better okay so i have this low-key black and yellow uh email signature so ronnie hermosa content creator my website we understand we can click on that visual to go through the website so this is pretty cool so what i can do from here is just add a touch of color to my image so the way i'm going to do this let me crop this i'm going to duplicate this photo so with the photo selected command c command v you see i have a duplicate exactly the same size right here and i'm going to use the same effect as before edit image do a tone i select any of the duotones and i'm going to change these colors so both of these colors to my brand color so it's going to be looking something like that which is fine i'm gonna apply this okay let the duotone effect do its thing and you see i position it exactly on top of the other image and i'm going to push it backwards and now without clicking out of this photo i'm just going to be using my keyboard arrows to move this and to give a little bit of a delay to this yellow image of me so i can see on this side at least a little bit of the shadow and what i could do also here is edit image and add a little bit of blur to this to kind of make this interesting not too much maybe yeah maybe three okay so i'm gonna stick with that now this is where i am this is what i have so ronnie hermosa content creator this looks pretty cool and let's export this let's start experimenting with the gmail upload and see how it looks there okay so i'm going to export this okay so download in png this is fine i don't even need a transparent background just going to send that straight to gmail okay keep the dimensions so let's see how this looks once uploaded in my gmail okay so now i'm right here i'm going to click on insert image and i'm going to upload this bad boy right here and you will see a bunch of already uploaded images there because i've been working on this all morning okay so this is how it looks like okay so let's just save this for now i'm gonna save this so this is going to be for my main email so ronnie v1 save changes okay just going to duplicate this and compose a new email so it should be showing up here okay so this looks great and i'm going to be pasting my social media buttons right underneath this image now the only thing that i cannot do is you see how i am positioned right here i cannot paste my links here because here is also the photo you see the photo is that big so i cannot have anything here that would be ideal to have my social media links right here but i cannot do that because this is the photo so the links will have to come underneath right here so this kind of shows me there's probably something wrong with this format i need something that is less high than 200 pixels because i have this white space right here that is not appropriate this is not the right way to position my icon so let me come back to canva to my design right here what i'm going to do is to resize this document i'm going to use the resize button right here which is a pro only feature if you don't have that you can very easily create a new document and copy all of your assets right here and paste in the new document but since i'm using my pro account i'm just going to resize this so it's going to be 400 by 125. okay i'm gonna copy and resize this very same document okay so this is now what i have i'm gonna take these two things here and group them and move that on that side okay so let me find the save zone here it's right here i can move my shoulder pretty much closer to that and i'm gonna stretch it even bigger and now take everything here and probably position it here and make that also bigger okay so now this is what i have can probably center that and make that even bigger okay there we go so now this is what we have we can stretch that even more because why not i mean we have all this space right here that is going to be great for pretty much the visibility at the bottom of my email okay so maybe these two can come down a little bit i'm gonna bring back my guide right here this one also okay i think i'm pretty happy with this one i think this one is the winner i'm gonna export this one more time okay download all right let's go back to gmail and yes let's close this and let's go back to my option settings scroll back to my signature i'm just going to select it delete it and upload a new one so just going to go to my uploads bring the new one just export it you see it's a kind of a trial and error don't expect to get this one right the first time okay so this looks good uh okay it's about right save the changes don't forget to save the changes and now let's look at how it looks one more time so this is not the right one i probably need to refresh this this time yes this is the right one okay so this doesn't look too bad but my photo right here could be more on the left side okay so i'm going to adjust that maybe i can reduce the size of the hand right here the clicking icon right here so that the focus is more on the title as well okay so let's go ahead and fix that and then we will create our social media buttons okay so from here so yes the first thing we wanted to do is to bump this one to this side which will allow us to make things bigger right here so i'm going to create and move the guides closer to my photo move this right here as well and i'm going to go all the way i'm going to use the entire space right here and now this button right here ungroup i'm going to reduce the size of this clicking thingy right here regroup and make that um [Music] about the size of the second word right here and paste it all the way to the bottom okay now this is what i have let me use the space to the best use right here maybe i can reduce the the size of this finger a little bit more so it will give me more space you see all that space that i'm losing here at the bottom that's because of this icon so let's ungroup this and reduce its size a little bit more okay now i think this will work better i can push this down and have more space for my two main like h1 and h2 right here so it's really important when you create your email signature that you think about your text hierarchy okay you really have to think what is the most important piece of information probably your name second is your title and then third i would encourage you to think about your main call to action your main cta right here is my website i want people to visit my website because this is where i have my offers this is where i'm talking about my courses my affiliate link all the stuff so this is where i want people to go then the social icons that we are going to create in a second they come next you know that's the cherry on top if you want to connect if you want to see my work you can check these out but this is the button i want you to click basically so i think we are up to something very good here i will download this one last time i'm not gonna try it now i'm gonna design the social icons first but let's go ahead and download this what i'm gonna do is to go back to canva and this time go back to the home page and create a custom document so uh i went back to sandy's tutorial right here to see what size she actually used to create her social media icons right here because she did a really good job with this tutorial so let's go ahead and listen to what she says here there we go so 50 by 50 pixels so that's the size of the square icons that she is going to be designing next for the social media buttons so let's go ahead and do this once again thank you sandy you got absolutely all the credit for that but again like i'm not here to reinvent the wheel i'm here to help you guys find the quickest and most optimal way to create your visuals with canva so because there are a ton of good creators out there i want to give them credit i want to feature them on this channel so they they can get the love that they deserve so go ahead and subscribe to send this channel so back to my design right here back to my home page actually let's create a custom document by 50 by 50 pixel okay create and now what i want to do let me zoom in to fit that okay so that's pretty small um i cannot do more cannot make this bigger all right no problem what i'm gonna do is to create a circle like so and i'm gonna make that circle [Music] all the way to my save zone and give this my yellow color okay i'm gonna create that four times i'll duplicate that four times the first one is my linkedin so going to my elements i'm going to search for linkedin linkedin icon okay i'm going to be using this one right here okay this is the right size i'm happy with this the second one right here is going to be a youtube button so finding youtube icon and i'm going to be using this one right here next is going to be my facebook icon for my facebook page facebook icon this one right here and this time it's white so i'm gonna need to change that uh and also i'm gonna bring it next to my linkedin icon right here it's actually the same size it seems smaller to me i can make it slightly bigger because it seems smaller okay and finally i'm gonna be using a udemy icon because i would like people to check out my courses as well so udemy icon my graphics do i have a udemy nice looking udemy icon this yep i can change the color so that's perfect okay so let's have a look these are my four icons they look pretty good so i'm just going to download them as well no link at this stage the links are going to be added in gmail directly so not in canva just remember that okay so download all of these uh all pages yes transparent background not necessary here so let's just go ahead and download these so i'm gonna have a zip file because i have four different visuals under one single folder okay i think i'm ready to upload everything into my gmail so let's go back to gmail okay um close this go back to my settings one last time i hope and start tweaking this okay so i'm gonna change this one as well because you know i redesigned it a third time so it's the one right here i'm gonna create i'm just adding a new image okay upload and that's gonna be this image right here okay perfect and next i'm using my keyboard arrow to go on the other side of this photo you see my cursor is in front of it and now it's at the other side of it so make sure you are at the other side and hit enter okay so just here now i can add my social media icons but before that i need to unzip them so let's do that okay they are unzipped now okay and i can start adding them in the order that i want okay so i have them here so i'm gonna start with my linkedin one so select okay this looks good changing the cursor like making sure i'm clicking at the right place and i'm gonna be adding the second one which is youtube select perfect and let's just continue adding all of them and next will be facebook i want udemy to be last um yeah because kind of like the easiest to click on this is where i'm selling so this probably um important to have it last okay so this is how it looks the last thing i need to do is to add all my links to these buttons so i'm gonna skip that phase for you i'm just gonna show you with the website and then the social media icons i think you get the you will get the point so first let's do it with the main image right here so select it you need to select it and then click on this link button once it's selected and just paste or type your website so ronniehermosa.com by the way this is the website i created with canva so click ok now i'm just going to speed up the video and add all the links here in my socials alright guys i have added all the links into these buttons right here so all together there are five different links to my linkedin profile to our youtube channel to my facebook page and to my udemy teacher profile okay so i think everything here is good the last thing you need to make sure of is these little uh options right here so signature default so i'm gonna default to my at ronniehermosa.com email for new email use this one on reply use this one as well and insert the signature before quoted text in replies i tick this box as well i'm not exactly sure what it does but i thought would be a good idea to tick it make sure to save your changes this is very important okay so now i'm gonna refresh this page and i'm gonna compose a new email and hopefully everything looks good here yeah it does look pretty good uh so what i'm gonna do is to send an email to myself and see how it goes so this is going to be testing ronnie uh v1 okay testing running b1 make sure you use some sort of like naming conventions because this morning i really played around and i had about five or six different versions of this email signature so you will have to test definitely uh if you create from scratch so make sure you use a naming convention so testing running v1 and send and now is a good time for a commercial break right just like the good old tv no just kidding there's nothing to buy here there's nothing to sell either if you like the video if you find it useful you can give me a like that would be highly appreciated if you want to learn more about canva you can also subscribe to our channel diana and i create two new tutorials for you guys every single week so yeah this is the best place for you to learn about canva and how to use canva to grow your business now back to this my email should probably has arrived by now so let me quickly switch back to my other account and see if the email is here whoo testing running v1 is right here so let's go ahead and check this out okay so this looks great the image is there i see immediately that this is clickable so i'm going to open a new link so yep this is my website this works perfectly testing these as well open in a new link in a new tab sorry so i have these four first is my linkedin yep works fine our youtube and i added a direct subscribe link here so uh people who are not yet subscribed will have this pop-up instead of just landing on the channel they will see the channel in the background but they have the subscribe link here next is my facebook page and finally my udemy teacher profile so basically everything works super well one last thing i would love to show you here this is really like a pro tip if you want to save time every time you write an email you see there's not much space here on top of this image meaning if you write some text i should have written some text so you could see you kind of need to add a couple of enters and like jumps so that there is enough space between your last line of text and your email signature so you can fix that directly into gmail so that you don't have to do that every single time let me show you how let me go back to this email signature design right here okay it is here so what i need to do basically is to come at the very beginning you see my cursor is here and add two spaces here and now if i move back up you see i have one two lines and then my design so this is the only little trick that will save you time every time you write an email because you will have these two enter keys every time so i think this was a nice little way to polish i would say this tutorial okay saving these changes and now we are good to go so i guess this is it the only thing i want to do before leaving you is to test this from my mobile phone so i'm going to send myself one last email this time with text i'm going to do it from here after i refresh obviously and i'm gonna compose an email again sending this to my other email subject testing v1 on mobile okay and i'm going to add some text this time hola this is my beautiful email signature that i just designed with canva okay what do you think okay and you see these two lines are right there so i'm gonna send that all right so i'm gonna grab my phone go to my gmail and ronnie testing v1 on mobile is right there let's see how it looks yeah it looks pretty good like the responsiveness of the design is perfect i have this design very well centered on my page i have my social links here at the bottom everything is really legible in my opinion everything is big enough my name is obviously popping out but we can still read content creator ronniehermosa.com we can even see the little hand right here if i click here i'm going straight to my website so yeah this is pretty good in my opinion i'm just gonna click on one of the random links right here to udemy and yeah it's it works perfectly so this is it guys you have your beautiful on-brand email signature created with a canva free account no need to pay for this and it has clickable links as many as you want with this little trick once again thank you sandy solution and sandy for being our guide with this tutorial so thank you for watching until the end namaste to our indian friends somebody in the comments let me know oh you did a namaste at the end of your video love that so yes thank you for your attention i'm going to leave a link this time to sandy's video if you want to click on this and see how she did it like watch the entire tutorial that would be very lovely for her so thank you all for watching and i will see you in the next video

Channel: Design with Canva

Views: 53,786

Keywords: canva tips, canva easy tutorial, canva tutorial 2022, canva tips 2022, clickable email signature, clickable email signature canva, clickable email signature design, email signature, email signature gmail, email signature gmail 2022, email signature with links, email signature with links canva, how to add social media icons in email signature, social media icons in email signature, canva for business, professional email signature, professional email signature gmail

Id: RWJ47aemC1U

Length: 34min 28sec (2068 seconds)

Published: Thu Apr 07 2022