Email Signature Divorce Agreement Made Easy

Email signed

hi my name is gordon from gimeo and today i'm going to show you how to create an amazing html email signature which is compatible with outlook gmail and apple mail and basically all of the major email clients that are out there today i make email signatures for a living i'm the co-founder of gimeo which is a famous email signature generator that a lot of people use and i see email signatures on a daily basis and i know exactly how difficult it is to create a completely custom email signature by coding it yourself so i would never recommend doing that because believe me i've done it many times and i just wouldn't recommend doing it especially if you don't know how to code html or css before we get started though i just want to run through a few mistakes that i see a lot of youtubers doing when they have you know when they create videos that show you how to create email signatures and one of the major ones is that they'll go and create an email signature in photoshop for example and they won't show you how to actually create it in html which is a problem because you don't necessarily want to use an image as your whole email signature because most email clients don't automatically download images in emails they'll show you a warning that says you know this email contains images click here if you want to download them so if your whole email signature is an image that means the recipient won't see any of your contact information at all and that's a really bad look and also the other reason you wouldn't do that is because disabled people that have you know vision impairments they rely on screen readers to be able to see you know to read their emails and a screen reader cannot read an image basically so that's why i always recommend create yourself a html email signature instead which is exactly what i'm going to be showing you how to do today the other issue that i see people doing is that they create their email signature in microsoft word and that's a really really bad idea because microsoft word uses the word rendering engine and when you copy and paste it into outlook the html that it generates is really not great and it won't be compatible with any other email client other than outlook so if you send it to someone that's using gmail for example the signature won't look exactly right so today i'm going to show you how to create the signature completely manually using a template which i'll show you where you can download it from in fact you can download all of our templates for free and i'll show you where you can do that in a minute but if you don't want to you know create your own email signature for based on the template and editing html the best thing you could do is just go over to gimeo go over to this link and then you can create your own email signature for free in here we've got over 45 templates available and you'll be able to completely customize them to your own liking and create your email signature using gimeo which is a lot and i mean a lot easier than doing it manually but the point of this video is to show you how to do it manually so i'll show you that now so before we get started i just want to let you know that if you are creating an email signature for gmail gmail does actually have a 10 000 character limit in html code what i mean by that is if your html code has more than 10 000 characters in it uh gmail will reject it and you won't be able to use that signature so some of the templates that i'll show you in a minute have over 10 000 characters from the from the get-go so you'll need to just check that before you get started but that's only if you're installing uh signatures in gmail all right so what we'll need first is we'll need a good text editor i use sublime text it's pretty good for editing html so that's the one that i'll be using in the tutorial today but if you have another one that's um you know a good text editor for coding feel free to use that one the other tool you'll need is photoshop now you won't need photoshop itself so if you don't have photoshop don't panic you can use any other sort of image editing tool the only reason we're going to be using it is just to edit the picture that you want to use for the signature itself and that's it so you can use any any other image editing tool that you've got okay so now what we'll need to do is we'll need to pick out a template that looks um you know similar to what we wanted our signature to look like so if you head over to this link here blog.gimeo slash email signature templates we've got a whole bunch of free email signature templates that you can download we've got yeah 45 of them i think over 45 now available that you can download and you can use them so today what we'll do is we'll use this one here the ninobrino one so simply fill in your email address and download the template since i've already got it downloaded here we'll just open it up and extract right click on it and click extract here so there's a few files that you've got here which are available to you the instructions which is basically um just gives you a bit of information about the template and the instructions on how to install it the other thing we've got is the html file here and also the minified html file which is minified just means that it's had all the spaces taken out of it to make it a bit smaller in size and the other thing we've also got is the photoshop file which i'll show you now it's just the photoshop file of the actual signature that we've got so you can move elements around and you know redesign it and all that sort of stuff but it's important to know that this isn't the actual html of the signature so since we're not going to be actually changing the design of the signature we'll close that off but like i said you can choose any one of those templates um in the list and you can download any design that you like and modify it to have all your details in it and i'll show you right now how to modify those templates to have your details in it so first you'll need an image of yourself so i've got an image here i'll need to open it up in photoshop and then circle crop myself out of it so i can use that as an image for my email signature so i'll just do that quickly as you can see i'm just circle cropping it and then i'm gonna put it into a new file like so so what i'll need to do now is i need to actually find out the size of the image that i'll need for that template so i'll go back in here and i'll just open this one up using my chrome browser and i'll right click on this image here and go inspect it also helps having google chrome because you'll have the same settings as i've got here but most browsers you can just right click on and click on inspect and you'll see the same information here so you can see here that the image height is 153 pixels and the width is 153 so what i'll do is i'll make my image in photoshop the same same size so i'll make look at image image size and i'll make it 153 and it makes it in proportion with the height as well click ok and what i might do as well is i'll just take the background off as well so it's a transparent background like so and then i'll click file and i'll save it as a png in that same folder and i'll just put my name now what you want to do is compress your image using tiny png and what i mean by that is if you hover over it you can see it's 62.1 kilobytes in size and you always want to aim to make your email signature as small as possible otherwise it takes up more disk space on your mail servers and that basically costs you money indirectly so what we'll do is we'll go into tiny png and it's just yeah tinypng.com and just drag and drop your image in there and you'll see it's going to convert it into yeah it's at a 77 drop in size so that's great and we'll just save it here okay now if we click on it you can see down the bottom here it says 14.3 kilobytes in size so it's gone down in sizes but quite a bit that's what we want all right so the next thing is we'll want to actually host this image somewhere on a web server for example uh if you don't have a web server where your website is hosted you could host it in you know dropbox or google drive that'll work as well but there is a bit of a trick that you'll need to follow if you are hosting it in google drive because when you share an image in google drive it doesn't give you the typical url for the image it gives you like a preview url and you can't actually use that with email signatures because it just simply won't work so we'll go into google drive i think i've already got it open here yes i do and we'll just uh yeah go into a folder in google drive any folder that you've got access to and then just drag and drop your image in there okay and then what you want to do is right click on the image and then click get shareable link and then set this to anyone with the link and now what you'll want to do is copy this part of the link here that's got you know this long part of the link so in between the you know the d and the view part like that and then yeah so copy that and then go into sublime and paste it into sublime and the other thing you'll need as well is this part here you'll need to put that in front of the link so it'll need the whole the whole link will need to be like this you need to grab that part which you've just copied from google drive and then pop it in there like that and then what this does is it creates a url that you can use in your email signature as an image url so if you go to this url in your web browser you'll see that image come up when it loads there we go and then you can use this image in the email signature if you were to use um you know if you were to use this link here for example you'll see that it's not exactly the same see it's got a preview it's a preview link you can see all the other stuff around it so you can't it's not an actual link to the image itself it's just more of a preview link so it's important that you do that you do this before you continue on okay so now that we've got the image loaded up in google drive we'll go back into our files here and we'll just open up the um nino barino html actually i think i've already got it here yes i do um and what you'll want to do is so just plan out what you want to change basically so we want to change the image we want to change the name the position the phone number mobile we basically want to change all the information um in the signature so to do that we go back into our files here and then right click on nino burino and then open with sublime text okay and you'll see that it's opened up you know all the html code that's in the signature basically so from here just expand your window and so it makes it a bit easier to read and so we'll need to first find where the image is so do a control so make sure you're focused in here and then click control f to find and then down the bottom just type in img that'll find any image that's in the html so you can see the current image is on this url here so if i go to this url you should be able to see that same image as you know that guy that's in the email signature which you can so you'll probably guess what we need to do next uh we need to simply go get our url from before that we created before and then copy it go back in here and paste it into where the old url was now to save it you just press ctrl s and then we'll go back into the chrome window here and then press refresh and you should see my there we go there's my image popped up now so we want to change the name from nino brino to your own name so all we need to do is search up that ninobrino name in the html so do control f again and then search up nino and you can see it here it's right there so we'll just change this nino bruno to be my name there we go and then again we'll press ctrl s to save and then refresh the page here by pressing ctrl r or you just press refresh you can see here that it's changed it so i'll just change the title as well so web design specialist okay we'll just change that to co founder let's save that and refresh it here there we go it's fine and this here by the way is a non-breaking space you can get rid of it it just basically means it's a space um so i've just gotten rid of it and you can see it's removed the space from um between here so you can do the same thing if you like or you can leave the space in there so editing the phone number again so you've got um you know you can just grab the 7182 for example so do control f 7182 there we go that's the phone number so i can just do you know plus one two three let's say that's my phone number we'll save it by hitting control s and you can see that it's changed it and we'll do the same for the mobile so we'll just search up seven one eight two which is right down here one one one and one two three four five six seven eight there we go and we'll do the same for the website we'll do a control f gim there we go www.mywebsite.com same as the email address you can already see the email address here so i won't bother searching for it and then you've got the address as well which i can already see down here it's actually a little bit easier to find you know if you're using sublime all the text all the text is basically in white so you can see the you know the a is the tag for the address up here and it's in white so it's kind of a lot easier to find yeah so the address will just leave it um and then yeah the social icons is easy as well so you just um if you keep scrolling down you can just search for facebook so face whoops facebook there we go so you'll use the same social icon i mean you can you can use your own social icons i think there's a few websites out there that allow you to use your own um social icons i think flat icon was one of them yeah it is so you can use flat icon to download some free icons for your social icons or you can just use the ones we've got provided there with the social links it's quite easy because right now these are not linked to anything you'd have to put in an a attribute in here so you just go open bracket a href equals and then it'll be you know https colon slash facebook dot com slash gmeo app or whatever your facebook profile is okay and then you'd want to end it here so there we go and all of that a symbol does is that creates a link for anything that's inside it so inside it is this image here that you can see so it's making it so this image here is going to go to this link here the give me an app on facebook so just save that and refresh it you can see now that it's linked and if i click on it it'll go over to facebook so the next thing you could do is just um you know add that a link to any other social icons that you've got such as twitter or linkedin if you wanted to remove one such as google plus you can do that quite easily just remove this td here backspace it then hit ctrl s to save it and then if you refresh it you can see that it's no longer there okay now what you want to do as well maybe is create a link for this website part as well and it's basically the same thing as what we've just done before so we'll just search up my website in the code here okay and you can see that it's a span um okay so what we want to do is just put an a in there href equals www.mywebsite.com and then uh close it off like so and then end it after the um span ends which is here um like so and that will make that uh a link so i'll just save it now and refresh it and you can see it's a link now so if i click on it oh it looks like i've might have forgotten to put the https in there so i'll just go in and correct that so where did i put it here it is https colon slash slash so it knows that it's um not internal an internal link so if i click on it now should be going to mywebsite.com which it is i'm not actually sure mywebsite.com is obviously it's um not a secure website but anyway so you can add a link to your website like that you can also add a link to your um you know telephone numbers to make them a click to call link so i'll show you how to do that it's a similar similar way of doing it um so you just i'll just go to the find the phone number which is here okay so it's the same thing so a um href equals like so but in this uh case instead of putting http s you'd be putting tell and then um you know plus uh one two three four whatever your number format is and then ending it and then putting the end of the a obviously just after this span here like like that and what that does is it will make this uh telephone number now linkable you can see down the bottom it says tell and then the phone number so if you were to send this email signature to someone that's using a mobile phone they'll be able to click on this phone number here and you'll be able to dial your phone number straight away from their phone it just makes it a bit more convenient for people to call you by just clicking on your phone number rather than copying and pasting and so forth you can do the same thing for your mobile obviously i won't go showing you how to do that now because it's exactly the same procedure as the main phone number and you can also hyperlink this email address i'll show you how to do that it's a similar thing so i'll just find it there it is so that's the first span okay so we just do the a href equals and we'll do male 2 this time and it'll be support game dot io like that and then just end it and then just put it ending a yeah so the way you do email addresses you do mail two and then what that does is that opens up when they click on it it opens up their email client and uh automatically starts composing an email message to this recipient here now you can also hyperlink the address as well you can make it uh hyperlink i'll show you how so you just go to maps.google.com put the address in there and then you go share and you just hit copy link here and then you just basically use that link in there so go back into here search up 15 river drive there it is so we'll find out where the span is it's there a href equals and then just put that paste that link in there so now don't forget to put these um inverted commas before and after the href so here and here so your your link has always got to be inside these inverted commas like so and yet we'll put the ending a in there and save it so now you'll see it's linked as well so if we click on that link now it will take us to this address which is the one we linked from okay so you could also actually hyperlink the image as well if you wanted it to go to your website you could do that as well i'll show you how to do that it's pretty much the same way as your website so you just search for img which is the image now this is the image for the facebook icons because you can see it's got facebook and twitter and linkedin so we'll just keep searching and here's the one that we've added in so yeah i'll just i'll link it to our website okay like that okay so that ends there so i don't believe it'll be there like that yep and you can see now if i click on my picture it will take us directly to our website and one other thing i want to show you before i go if you wanted to change the colors of these elements that's actually not that hard so you can just right click on the name and then go to inspect and then you can see here usually there's a color associated so you can just click on that and then you know change the color to whatever you want it to be so let's say purple and then all you need to do is copy this number here this hash number and then click uh press ctrl c to copy it go back into your sublime and then search up for your name that you've got in there and you should see the old number somewhere here which is right here and you just want to change that number um to the new one so paste the new number in and also change the one on the outside of it there as well press ctrl s to save whoops and then refresh the page and there we go i've got a purple name now same thing can be done with your position as well if you wanted to change the number of that i will show you how to do that now if you wanted to change it to red let's say i don't really know what goes well with purple but let's let's just pick a green uh we'll copy that hex code there and we'll look up go back into here and look up co founder which is right there and you can see that it was um black before but now we'll change it to this greeny color and then we'll go back and refresh the page and you can see that it's changed so you can change your colors with any of the text in there so yeah hopefully this tutorial has helped you create an email signature for yourself um you know we've got a whole bunch of templates that we've uploaded for free so basically have a look through our website um through this link here see which template you like see what you yeah basically just have a look at which signature you'd like to use and which signature you know best suits your business needs and whatever you want to whatever you want to use and then start from there and then download it and do exactly what i've just shown you how to do the next part's really really easy installing the email signature itself you just press ctrl a to select everything and then ctrl c to copy it and then now you just basically go into your email client and install it like you normally would if you're not sure how to install your email signature we do have a bunch of tutorials here um if you go to free resources if you go to blog.gimeo and then free resources email signatures installation these are all of our installation guides on how to install your email signature for your email client so yeah hopefully um you've now seen how you can create your own custom email signature and you know make it to you to your needs and how you'd like it to be i really hope this tutorial has been helpful i know there's a lot of people out there that are struggling to create their own email signatures and you know as i said before if if you don't want to be going in and editing your own html files because it can get tricky at times so do if you don't want to do that feel free to use our email signature generator it does everything you need for you so if you just click on it choose a template click on apply you can just click on the name and start changing the name click on the position and start changing all that sort of stuff and yeah like i said there are a few limitations on the free version but you can pretty much create exactly what we've just created using the um the free email signature here if you have any questions in regards to the design of the signature or how to change certain elements or anything at all feel free to drop a comment below and i'll try and respond to you as quickly as i can thanks very much for watching and see you next time