Add Web Hosting Agreement Template Email Signature with airSlate SignNow

Add Web Hosting Agreement Template email signature

[Music] what's going on YouTube welcome to another tutorial today we're going to be going through some email stuff and I've had quite a lot of questions about sort of where to and how to host images for email because in my previous examples I've been doing it with web flow just because I have a web flow account I'm a web designer that's really simple for me to do it's easy for you to do as well you just need to create a free web flow account let's no problem but if you don't want to do it that way I'm going to show you a few other ways to do it so there's essentially two two sort of ways to handle images and emails so option one is if you're designing your email and you don't really know how you want it to look or how you want it to react and and you want to try out a bunch of different things you can actually host your images locally so that just means sort of referencing where they are in your Documents folder on your desktop or in your hard drive or whatever so wherever the images are you can do it like that just for like a local preview but if you were to then send out your email using that method those images wouldn't appear because they're on your desktop so if you want the images to appear they need to be hosted online so you can you can either do local preview or host online right so local preview goes like this so for example I've got my email starter template here I've put in a couple of rows and so I've got a logo here which is just looking at class of logos align left' blah blah blah blah and here we go so that my image tag here so this all talks about where the images so image so this is where we're going to put where we get our image source from and this is the styling for the image so this is just saying it's going to be 50 pixels by 50 pixels basically and I've got some alt text always make sure you do alt text so if I go to let's move me out the way if I go to my folders so here we go on my desktop I've got a folder here so this is where my tutorial file is so that's where this is okay and then what you need to do is inside the folder that this is have a folder called images and then you put your images in here okay so I've got to him just this is my logo and then we're also gonna do sort of my hero banner - okay so my logo here we go so to get this to appear in the local preview style all I'm gonna do in here is I'm just gonna write in inside the quotation marks I'm gonna write images forward slash and then the name so saying look in the images folder for this name so I literally just copy this and I need to take the file extension as well so dot PNG so I've copied that and I paste it after that there press save come here so at the moment this is how it's gonna look when you've got no images in so this is just showing the alt text if i refresh it there you go and we can see that here I've got a link so here's the start of the link and then here's the end of the link so I've got a link saying it's going to go to this website which is Tom pagoda code at UK full / amazing target blank which means it's going to open in new window and then inside the link I've got image so we're basically wrapping a link around the image so if we now click on that link tada okay so it works and the image is visible so let's do the same thing for the next one here so all we can do we've already set this up so we can just copy this if we want to I mean I don't really know why you could just write in images forward slash again but I tend to just copy and paste everything when I'm doing emails so here we go image source in here and we need to replace this file name with the other file name so we just come in here grab this one and paste it in here after the slash save refresh there we go and we can just double check everything's working its responsive the image is visible so this is how you basically design your email so if you're still working with the team or something like that they could go what does it look like with the green version and you can literally just pop a green version in this folder change the name and then refresh and it will change your image so that's how you do it when you're designing and you're planning but if you want to send this out obviously it's not going to work so how I did it before was with web flow so just go over this tactic again so here's my web flow account so I just have a website you don't even need to have any content in this website you can just sort of create a website come over here to the assets upload upload your images to here so here's all of the images that are in my website and I'm just using it to store like as free storage because I already pay for web play just to store my email images so he go so there's that header image and I think it was probably quite a while ago that I did the logo here's the logo so you would just go to the settings click this little icon here which will open in a new window and here's my link so rather than it being looking for the link in the images folder sitting just slash is going to look for the link in the URL so we just copy that come in here and where's my logo where is it you can all probably see it here we go I'm just going to replace that which was searching for a folder location with a link press save whilst I'm here I may as well let's close that one and get the other link which is here it's the same thing hit the cog hit the little pop-out button copy the link paste it in my hero image section is the source there we go save that and close this come back here let's refresh this and there we go so nothing has changed the images still there because the image is hosted online and now I would be able to send this email out and these images would be displayed in people's inboxes because they're hosted on the internet they're not hosted on my computer okay so there's your two basic ideas now other places to get these to host these images I mean you could just go to google and type in free image hosting or image hosting do some research find one that you'd like I used to use Dropbox before I had web flow Dropbox is quite annoying you have to fiddle with a link a little bit but I'll show you how to do it so here's Dropbox everyone's probably got Dropbox account if you don't you can just make one it's free so just make a folder you don't need to make a folder just put your images in your Dropbox somewhere and if we go to share I think it's share here share with Dropbox I think let's have a look so people can view it there's no link created yet so we know we're trying to create a link so oh look create link what does this do okay anyone with this link can view the file that sounds good all right let's copy that so there's the link it's copied which one did I do though did I do the header awkward let's hope I did this here image so we're going to come in here replace our old link oops replace this old link paste yeah so I can see here TP email had a red yep so that is the one okay so let's save this and see what happens just using it as default refresh can't see the image this is why Dropbox is annoying okay so let's have a look so at the moment at the end of this URL so we've got Dropbox comm for session and this is basically the ID of the image where it's putting it PNG but it's got DL equals zero right which means that if the file can't be downloaded great let's see what happens when you delete that so we're just finishing with PNG save refresh nothing happens again so what you need to do with Dropbox images is you need to write after the file extension you need to write question mark equals no we do question mark raw equals one so our aw equals one let's save that let's refresh there it is and it works so we can do the same thing for the logo here so let's do share with Dropbox create link link created let's copy the link come back into my sublime text logo to do image source here we go paste it in here let's remove DL equals one and we'll do raw equals one save come back here refresh there we go so it's found it through Dropbox that's how you do it through Dropbox so it's question mark raw equals one alright so how else might you do it have a look at this nasty looking website okay free image dot host let's test it out they really have annoyingly put an ad right across where you need to press the button so silly isn't it start uploading okay let's upload these two let's see what happens okay right yeah okay uh play it some air injuries have recurred brilliant let's reset okay let's try and do one at a time drag and drop can I drag and drop let's do this one okay let's upload this some errors have occurred okay mmm interesting free image dos tres in start uploading let's do this one okay I think it might be because I uploaded this before so let's grab another one let's have a look have a look sorry this is embarrassing isn't it let's find another one header images let's grab the green one let's paste that and now that let's reset let's drag the green one in see what happens nothing happens let's do it this way this is why it's good choose webflow guys upload Hey there it is okay it's gonna look horrible and already male but that's okay let's get rid of this okay how do we get the link so you might think maybe is this the link let's see what happens hero image let's paste it in here let's save this probably isn't gonna work so let's refresh nope so it hasn't worked at all but this one is still there because that still got the drop box path okay so that's not the link so where's the link embed codes hidden down here image link so that's the one that we used see it's got this dot jod xp9 which sounds a bit funky so what's this one let dot PNG that sounds good let's copy that the image URL let's come in here let's paste and save refresh there we go it works my breadmakers just starting going I hope that doesn't ruin the video anyway that's how you do it you just got to make sure the images are hosted somewhere it doesn't matter where I'd probably host it somewhere reputable rather than I mean what is this no one knows who knows when this site is going to be just like deleted or taken down or they might delete your files or something like that that's why I prefer to use web flow or I mean Dropbox isn't going anywhere anytime soon so maybe the Dropbox way is the way forward for you if you don't mind adding in question mark raw equals one after every image but yeah that's it I hope you got something out of this I hope it made sense if you've got any questions please leave them in the comments below I've got tons of email stuff planned for you guys the only problem is I've had so much client work going on at the moment which yeah is great but also really frustrating I'm super busy and I can't record as many videos as I want to but I am trying my hardest so hopefully this gets some of you through until the next video and I will see you then bye [Music] you