Webflow Tutorial for Beginners (2021 Full Tutorial) - Create A Custom Professional Website

so if you're looking to make a beautiful professional website with very little effort and absolutely no coding at all but you want a little bit more than you can get from the website builders like wix and squarespace so let's say maybe you want more animations maybe you want more integrations on there or maybe you just want a larger library of videos and blog posts but you're not willing to make the jump to the behemoth that is wordpress with all the different hosting plans and plugins and complications need to learn about that then the happy medium for you honestly might be webflow so webflow is one of the fastest growing ways to build a website this year from my experience i've seen so many people requesting this video and so i figured i'd make a full tutorial on how to make a beautiful professional website with webflow which honestly is very very similar to wix and squarespace but just a lot more customizable so there like i said there's no coding it's very easy to use and it's definitely more advanced than the first two meaning that you can do you can change pretty much anything you want to on the entire page so lots and lots of options but again we don't have all the different hosting plans and all the stuff you have to worry about with work with wordpress so in this video i'm going to dive into a step-by-step tutorial absolutely everything you need to know when you're building your first website with webflow so starting from an absolute beginner creating an account creating a website from scratch or creating one from a template which obviously saves you a ton of time and i'll show you some example sites as well just to give you an idea of what you can actually do with webflow so with that being said guys let's hop over to my desktop and get started on this tutorial there's definitely a lot that we have to talk about so be sure to stick around for the entire video alright so here we are on my desktop and the first thing you want to do is actually open up any browser you like so it doesn't matter if you have a windows a mac a chromebook it doesn't matter for any of that as long as you can access the internet because the good thing about webflow is that you can actually do this from anywhere in the world on any machine that you want so if i start this on my laptop i can go on my desktop and edit as long as i'm signed into the same account so it's just a really nice way of building a website so if we go to centralmedia.comwebflow this is going to be a link that we will keep updated to make sure that you're always ending up at the right page right here so to make sure we start off at the same place you can type that in or you can click the link on the top of the description below and it'll bring us to this page right here so we are going to click get started and we are going to continue with email if you want to create your account with email you can also sign in with gmail that's usually what i do but let's create one right now central tutorials gmail.com and then we're going to create a password save our password and then we're going to give it a name so we're going to say mike o'brien there we go say continue and it's going to ask you a couple quick questions so we're going to go through and answer those right now so we're going to say the first thing what is our role so webflow is going to be a great thing if you are like a web designer if you do a lot of consulting because they have some really cool tools in there that like you can build websites for clients uh very easily you can share with people let's just say maybe we're an entrepreneur we're just making this for our own for just for our own business right now but like i said you can do this for so many different things webflow is extremely powerful and it's great for building websites for building cms sites for e-commerce uh and so we're gonna get into probably some questions asking about that in a second we're gonna say we're just building this for our business and maybe just for myself as well actually let's just go with this one for now so we're going to say continue and let's just say we've never built a website before and then here like i was saying so you can build cms websites you can build just a regular website builder experience right like you have a lot of different options here you can make online stores so we're just gonna say a business site right now uh something really straightforward and simple cms would be better for like a blog and you'll see that later on in the video and then oh don't forget this little hidden checkbox there i always uncheck that i'm not really big on the emails that they send me so i always make sure that you know look out for that one right there guys all right now that's going to bring us uh into our builder pretty much going to go to our dashboard i believe so then webflow is probably going to make you click through a whole bunch of things i recommend going through like as quickly as possible because i'm going to cover a lot more than that in this video but like they tell you how to add like a picture and some headers and stuff like that so when you end up here after all that's done what i recommend doing is actually going up to the top left and clicking on the dashboard button right there so we want to start off here to kind of make our own website so other than the one that was their initial project they did we have some other things around here that we can actually do so we are going to from dashboard we are going to go and create a new project right here but just to touch on some other things we also have like their showcase if you guys want to see like some other websites for what people have made with webflow you can go and see like this one right here something that somebody made with webflow and you can actually go and clone this if you like it and you're like you know what that's a really cool website i want to clone it and then make it my own by changing a couple things so like you can go and open it up you'll see right here that tons of stuff is going on they took some probably some footage from from apple and it honestly looks really really cool there so let's go back and we can go to right here let's go back to the dashboard webflow dashboard and let's create a new project so hopefully have an idea of what your website should look like or what you want it to look like maybe some images or colors but you could start off blank which i'm going to do first just to show you guys the basic fundamentals of what we're dealing with it's easier to understand that way and then i'm going to come back here and make another website later on in the video and we'll touch on some of the other ones now notice that not all of these are free so they have some really nice looking ones that are are like eighty dollars which maybe that's in your budget maybe it's not if it's not they also have some free ones down here and i do recommend if you're trying to start a website and you want to do this as quickly and efficiently as possible a lot of times it looks better if you take one of these templates that's typically what i do and like i said there are quite a few free ones you can choose from but overall we're just going to go and start off with a blank one just to show you guys what this actually looks like so they give you every single time some kind of different name right now we got a adapter project going on so we're going to create project it's going to create our site and that will bring us to the editor here and now within the editor you'll see that it is completely white like i wasn't kidding when i said this is a very blank site so we see on the left side we have some fundamental tools i'm going to go through each of these because this is where you get the stuff you want for your page and then once you have the stuff you want on your page you can edit that on the right side so these are ways to edit what's on your page this is how you add things to your page and then the top is how you view your page so just keep that in mind when we're doing all this now let's start off on the left side and see everything down here starting off with the very first thing the little add elements option this is where we add some different things to the page so we can go and add things like a grid some columns a container and these are just going to be like a box because this is you know essentially writing code in the background so if you know anything about html or css like you guys will kind of have an idea of what's going on here but let's go and first add you can add a section so if we want to add a section that's going to be i mean obviously just like a big rectangle going across your whole page and we can add things within that but essentially the benefit of that is going to be that you can have a big background with a bunch of little things on top of there so now that we have our first section let's go over to the right so let's get rid of that little thing and this is where you can actually edit everything so the first thing i want to do is actually go down and change the background so if you click on the background right there you can add any color you want that really doesn't look very good at all though so you could also add an image or gradient so if we click on the little plus on image or gradient that'll give us this we can go to choose image right there and choosing image brings us over to the left side on the bottom where we go to assets now i didn't want to get into assets just yet but it is something that we will need right here so i might as well cover that while we're here so assets is going to be any like image files or logos or video files or whatever you have that's going to go on your website you'll be uploading them and they'll be saved over here which is very convenient honestly so i'm going to go and upload so you can go to upload right here a little cloud with an up arrow and i have a couple pictures i wanted to use let's just go with these for now uh and actually did i have some others down here i think yeah let's let's hold command and upload those as well so we have a whole bunch of pictures that we'll be using throughout this website and it automatically chose the first one so we're going to go back to choose image and it's getting a little mad right now because it's still uploading the images as you can see here but once we have the images there we go okay so let's just say the one that we want for our background when you hover it does give you a a display right there kind of a preview so let's say we want this one is our first one and you'll see that obviously that's not what i had in mind at all being such a narrow little strip and it's also like tiled you can see like a tiled view there so the next thing we want to do is actually go to let's make it bigger so we can see what we're dealing with so we can go to padding here and you can slide this up or down you can also hold alt so if we hold down the alt key and we slide it or if you're on if you're on a mac then it's going to be the option key you can slide it and that'll give you more padding on the top and bottom so padding for right now it's just going to be essentially showing you what we're dealing with here we also have margin i'll talk about the difference in that later on in the video but that is essentially what our background's going to be on the top now we can change the position of this and we can change uh essentially see how that's like tiled it's kind of hard to see there because it's not super obvious but this right here is the same thing as the left side so it's showing the picture like 1.1 times so instead we just want one picture stretched across the entirety here so if we go down here and we go to our picture so image and gradient we have some options with that image there so we can go to uh let's see where was that imaging gradient if we click plus there it's gonna make us choose that again i don't know why that's like a weird little bug when you click that sometimes it makes you do that again so let's just go back and this is the picture we wanted and then here we can go from custom to cover uh or you can go to contain contain is going to obviously show it twice so an even number of them and we're going to just go to cover so covering is what we want and then as far as the position of it we can move it up and down right here uh and we can change it to like fixed if we want a fixed position or a not fixed position so i'm just going to go right here and let's move it like 15 so that's moving down let's go to negative and let's make it negative like 150 maybe um so that's looking okay like you get the idea of what we're trying to do up here what's going on there and so that's going to be how you can set up the first like this is this is the first section right here so we can put text and buttons on there and actually let's do that right now so you get the idea now i'm going to touch on more settings later on but continuing down on the left side we have some other items that we can put in so we can put in containers uh which may be a container so you see how wide a section is right now if you want to put within a section you want to put a container that'll give you a much narrower field to work with you also again see how the section has the background and then this right here is padding on the top and bottom of the contents of the section so that'll give you a nice little window of where you actually want to put other stuff so within the container we can then add images and text and whatever we want and i mean so otherwise let me just show you guys if we got rid of this right here so if we just click on that click delete if we wanted to just add text in here so if we went to like a heading you'll see it's going to be all the way on the left side which is why i mean we don't want to do that that's why i was saying the next thing after a section is to add a container which is putting it right in the middle there so within the container now we can actually go and start adding the other things so maybe we want to add two columns within our container we can go and add sorry two columns within us within our container there we go and so then maybe on the left side we want a header so we can go and find a heading and below the heading maybe we want so just to show you guys what i'm doing here i'm clicking on the left side and dragging into where i want so we want heading maybe we want a little paragraph there so click on paragraph drag it over and you want to hover until it highlights the part you want sometimes you'll see the blue line so right above or below the heading we're going to go below and it'll show up right there and again this is looking really bad but keep in mind we're going to change the color of the font in the background and everything we need to so now the next thing we want to do is maybe a button so we're just doing a quick layout here just to see like where things should go and then we can customize this in a second now one more thing on the plus let's add maybe an image on the right side and so i think you guys are getting the idea here of how you can add different things the general layout of where things go so section is the big thing and then you can add like a container and then you can add columns within the container or you can add columns without the container if you want it full width there and so like you see columns sections grid a grid is another cool thing that uh you can add just like a whole panel if you want to have like your blog posts or recent videos a grid's very useful but i'm not going to dive into that too much right now so then down here uh let's say like i said we want an image but you could also add a video or a youtube video for that matter so let's go an image and we'll click and drag this one into this column here so we'll have an image and we can choose an image which again that's why we uploaded our other images in the assets and so you can hover and choose which one we want so let's just i mean it doesn't really matter it's not going to look especially great for this website but i'm just showing you guys how you would actually build different things so let's go and add maybe this one right here and so with this image the other thing is i'll go through the settings on each of these but starting with this image right here we can actually go into the settings which is obviously over here and we can change some things about that so going down what we're dealing with margin is going to be essentially like what's on the so margin and padding are not really going to be different for some things like for example an image it's not going to be especially different whereas a button on the other hand it is actually going to be different so margin is going to be on like the outside there and then padding is going to be on the inside giving you more blue space so looking at the image right here that's what you have you can change the margin and padding on this so i think it looks fine as it is right now we can also change the size of this image if we want it to be a little larger or smaller and so i'm going to leave it as auto i think it looks pretty good in this setting right here going down we can also change like the x position if we want it to be static if we want it to be relative to something else because keep in mind a really cool thing about this is that this is a dynamic website meaning that if you go into a tablet or a phone in landscape mode a phone in portrait mode the website's going to move around and it's going to look pretty good as long as you set up these things properly so for now keeping it static is fine but just to see the other options you could set this image relative to other objects on on your on your display here so that's something that's a little bit more advanced we're going to keep it static for the beginning of this video now we also have typography which is not a setting that's relevant to this picture here and going down we'll see like backgrounds again not relevant and maybe borders this is the only one that i would maybe change with images so if we want like a radius on our border here you can see the rounded edges on the corners you can really change that with this slider so let's go up to like maybe 8 17 pixels it kind of gives it a cooler look right there and then we can also add some other things down here once you have a border maybe you want to add like a shadow behind it so you can add some shadowy stuff you'll see shadows there you can change like the blur of the shadow to make it blend in a little better and it kind of makes your images just like pop out a little more so if we click over here you'll see this kind of pops a little bit more but of course you want to like tweak this maybe change it to not so much of a black maybe more of like a transparent uh maybe like a grayish color would maybe look okay right so something like that maybe is what you're looking for now those are the settings for an image you'll see they're going to be similar for other stuff we can change like settings for this column if we wanted to or we can go to this heading and something you might have noticed right there is if you click on the name of what you're using right now it actually gives you all the parents of that so this is a heading in a column or in a column which is also in a container here i don't know why i also called it columns and this column is in a section so it has a whole bunch of layers there and you can actually see them really easily when you click on that but when you start to deal with more things it is also useful to have better names for this so instead of calling this one columns you can go up to the top and oh i didn't mean to click that so instead of calling this parent right here let's go let's go back up to that calling this one columns we can go up and start creating a class or tag so we can name this one to whatever we want so this could be this could be container one container one and that there you go so then you'll have this thing as a name there and so when you click on this now you have proper names and it's really cool because you can actually rename all you can use that name on other things and it's going to duplicate that so the example that webflow gives is if you make this button uh and you name it something and that's going to be your class or your tag and then later if you change that so let's actually just do that so if we make this button right here so we're going to make this button a little bit bigger so we can go and add some more padding like i said padding is going to add blue on the inside so let's hold down alt or option depending on what you're using and we're going to add more padding there add a little bit more padding on the top and bottom as well and then the margin is going to be on the outside so we want more margin on the left side to center this a little better maybe right there and then we can go down here and add a border radius so it's a nice round button there and then we can change the color to whatever we want so let's make this like a white button maybe with black text so we can go and typography here is going to allow us to change the color of the text so we can go and change the color of the text to black and of course you can change the font you can change everything about this you know let's just go down to uh montserrat that's that's a decent one right there and let's change the size of that to 20. so there you go we have a button right there and you can change it to say whatever you want but that's going to be let's name this instead of button and rename this class to primary button there we go so that's the name of that one now if we add another button down here you'll see what i'm talking about uh so if we go and add another button we can add it anywhere let's just make it somewhere else in this section you'll see that again the containers here so that we don't have everything like left justified all the way but just to give you guys an example here so if we have this button and we want to select a class or tag we can go down here and call it primary button and boom it's using exactly the same format as this one right here so we're going to just click on that and delete it but that's just to show you guys how you can do things very easily with that now going up here the heading we can go and change the color of this one to maybe white actually that was changing the background of the heading we didn't want to do that click undo on the top so the undo and redo is super super useful i mean i use that all the time as you can see right here but i wanted to go to typography there we go the color of the typography we want this to be white and we want it to be bold maybe we want again same font there but maybe the boldest we can get almost boldest and let's change this to uh maybe like 55 slightly larger heading and again maybe we want this one to be center center justified so if we make this in the center then you'll see the button down here it's not it's not right so maybe we want to add more padding on this side so let's click on that and move this slider until it looks centered there we go and then right here we're going to center this and change the font color for this as well to make it white so you can see what's actually going on here and if you're looking at this and you're saying you know what that's great but i really wish this was spaced out different vertically i think you guys can probably guess by now the way we'll do that is again by adding more margin or padding so here we're just going to add some padding on the top to bring this down a little bit to right there and then we're going to add a little padding below this as well so padding on the bottom is 10 right now i'm going to add a little bit more and a little bit more above that as well just to give you a nice spacing okay so there we go so that's just an idea of how you can start modifying things like that but continuing down the left side i know we kind of jumped right into this i hope that wasn't too fast for you guys so let's go over to the left side and see other things so the first one like i said adding elements you have the different layers of the elements you can add and as we scroll down there are so many different things you can add in here um it's not the easiest to find what you're looking for always sometimes you have to scroll around and and like they all kind of look the same but regardless you know you can have like drop down menus some navigation bars so if you want like a nav bar on the top you can go to the top of your body and add that there cool right and with each of these they'll all have different settings so here in the nav bar you'll see there's some settings down here that are slightly different from if we had a picture for example so that's that's how you do all that now we also have layouts here and layouts is really cool because it's going to make things so much easier when you're trying to like if you look at what i just made right here you can very easily do that with like this right here a feature section if you look at that it does pretty much exactly what i just did except you don't have to put it all there yourself so that's a really convenient feature i actually use these the most when i'm doing things so uh or instead of having this navigation bar on the top so if we go up here click on nav bar click on delete that'll get rid of that instead let's go and add let's go and add a layout so you can see right here a sticky nav let's click and drag that up to the very top let go and it goes right up to the top so that's everything you can do with adding them and again we'll touch on this a little bit more later on in the video but let's continue down and see what else we have in this in this screen right here so the next thing you'll have is symbols i'm not really going to get into symbols too much in this video but symbols are definitely something that it's cool very powerful for sure but i'm not really going to touch on those too much so we can go down to the navigation which again is why i said it's important that you name all of your little things so not all of them but as many as you can once you start having a more complicated design so name your buttons your text boxes so then when you're looking at this when you're trying to find out like if it's if you have a lot of things going on it can be tough to click on exactly what you want and so if you're trying to click on like this column like see how it could be kind of tricky to click on exactly the column it's nice you can just go right here and say i want to work on the column right now and you can go into that and change the settings on the right side so that's why navigation's so useful for me at least and then going down here we have pages obviously with the website you're very likely to have more than just one page so as you can see with this one we have it suggests like a features or a pricing page or something right we can make more pages if we want but you do have to upgrade your site which is why i mean there's other things you have to do you have to upgrade your site for as well so for example having your custom domain stuff like that so i think we should probably talk about that right now before continuing down now looking on the right side if we go to publish if we go to publish it'll say you have to upgrade your site plan in order to get a custom domain so we're going to click on that you'll see they make it pretty easy to find like right there upgrade your site upgrade your site upgrade your site so like yeah you can use you can use webflow for free but i mean if they do want you to upgrade your site which does unlock a lot of potential and so i usually recommend it they're usually not that expensive so if we go to upgrade um let's go to upgrade site plan and we'll see the options here so you can see they have a bunch of different ones so 12 per month for a basic one for a lot of people that's probably all you need but if you're trying to make more of a blog type thing or a news site uh you'll see like all the cms driven ones it makes sense at 16 a month is going to be really helping you out you'll have a lot more form submissions you can have far more monthly visits i don't really like that they they kind of cap you based on monthly visits so i mean they pretty much force you as you get a bigger website to pay more but hopefully once you have a million monthly visits the extra twenty dollars a month i mean that really shouldn't be a big deal so looking at those that is the the basic website ones but if you're making an online store which again is really powerful uh you can go over to ecommerce site and these are also i mean obviously very very stratified so depending on how many sales you're making it might be worth it to go to the zero percent transaction fee uh and that's a and you also have unbranded email receipts which is nice and to kind of again keep an eye on your sales volume which is interesting but regardless it's something that i like that you can use webflow to make websites like this like ecommerce websites because a lot of times i find that shopify uh and like square online and bigcommerce they're a lot harder to really customize your website at least to the degree that you can with webflow so with that being said you can choose any of these and we're going to just like add maybe the basic one for example and then we'll go and check out so let's head back to our project here and going down on the left side we have cms collections again more advanced i'm not going to touch on that in this video and then i i didn't i probably shouldn't have clicked on that actually so right here if you want to make an ecommerce site i'm not going to do that in this video that's an entirely separate video if you guys want to see that go on down and click the subscribe button leave a comment and by the time you do that i'll probably already have made that video then we can go down to assets which again i already explained that to you guys that's going to be essentially just like the pictures and videos you want throughout your website and the good thing is they're easy to just kind of click and drag anywhere so if you just want this like a picture uh right below this one it'll just plop a picture in right there again it is left aligned if you don't put it within uh like a little container so we're just gonna delete that but i was just showing you guys for a second how easy it is to add those so let's go and click delete and then the last thing on the left side is going to be our settings which is for search settings right there if you want to have that also backups it is nice that you do have backups automatically once you have an upgraded plan so if you accidentally just mess up your site one day or you change something that you don't like you can go back and find some of your older sites and just automatically you know throw them back in and revert to those so that's everything on the top left but if we go down to the bottom we have some other view related things here so if you hover over them they should tell you this is like hide element edges so i mean just like the blue boxes go away i don't really think that's a big deal we can also hide empty elements if you have those uh you can go and see some like grids so kind of hard to see with this picture but you'll see there's like some grids on the on the top and the bottom there just to help you align things within your website make sure everything's centered and then we can go down to like x-ray mode which is going to be gonna everything's just like black and white uh making things pretty simple to see you can see it looks a little different um and so we're not gonna we're not gonna do that right now then below that we have uh just a search bar and a little like tutorial thing if you want that hopefully you don't hopefully my video covers your questions but then the next thing i want to talk about is actually across the top so looking across the top we have the different views here and this is what gets interesting with webflow so like i said it's a dynamic website it's responsive which means if you make this for a tablet or if you make this on your you know desktop view right here you can go into the tablet view and things will automatically change but if you don't like the way they are here you can also change them for this specific website so really what i'm saying is you don't have to make a separate mobile website but you can make your primary one and then change it on tablet and everything for tablet applies to everything below that and then everything for sideways mobile applies to this and whatever's below that so just to show you guys exactly what i mean here so let's just change the section right on right here so the section has way too much padding when you're in this view so we're going to shrink that down actually let's undo that and shrink both down simultaneously so hold down option or alt depending what you're using and we're going to go down to here let's go down to that size right there and we're going to change it so the background is is doing what it's doing right there there we go um so then actually maybe that doesn't even look good maybe we just want to change it to just a straight up color so we can go and change that right now so let's go color so here's a nice solid black background uh which is not working instead we want to oh sorry that's because it's changing for the entire body let's go to this section so we'll go to section section and then we'll go and delete that delete that and we have a black background here but if we go back to this one you'll see that it we have the original photo and then as you go down because we changed it for tablet it's also going to be changed for mobile so black background black background and you'll see that it changes things like that now and then another example is maybe on sideways mobile we want this to be relocated or we can just change it maybe instead we want like a different color or maybe the font we want it to be extra bold so let's just go make it like extra bold and you'll see this will apply to the phone view the mobile upright view but it won't apply to the the tablet or the desktop view so that's really cool but do keep in mind that i mean you should be making your first website on desktop so that everything trickles down but if you are editing something on say mobile here you don't want to just go and hit delete because if you just delete this like if i go and hit the delete button you'll see that it is actually affecting all of them so our button is now gone let's undo that and our button will come back so that's a really cool thing across the top i highly recommend you obviously start with desktop and work your way down through the other devices and it does i think it's one of the better editors out there when you're trying to make a responsive site now on the right side i already showed you guys the the very handy and really essential forward or the redo and undo buttons i mean you definitely need to know those i'm using those all the time then here we have the changes are saved it auto saves everything so like i said if you just close out of your browser go to another computer on the other half of the world sign in your website is ready to go and you can keep editing from anywhere so really cool thing right there we have our code if we want to export that so i i mean i mentioned before that this you don't need to know any coding to work on this it's all very visual like i showed you but let's just say you have like a web developer uh that maybe you're working with or maybe you are a web developer um then you should definitely be going in here and you can export your code the css the html javascript right there your assets again right there and so it's really useful that you can export i mean you have to upgrade your plan which i didn't for this tutorial but you definitely should so you can export that and they can do all kinds of different things make your website load faster and more efficient it's something that when you're optimizing it it's a good thing to do so then after that we'll see that we have right here um not something really that exciting we can share the project we can publish it which i was showing you before and if you upgrade you can go to your custom domain or you can stick with the kind of like a temp domain they're going to give you so this is useful when you're just making your website at first and you maybe you don't want your whole audience to see that or if you're transferring from maybe like you were on wix before and you're moving to webflow then you know this would be a good way to build your website before you go and publish that so if we go and publish that it'll say that you have to verify your email address so i'm just going to head over and do that real quick all right now i just verified my email but sometimes it takes a few minutes we're going to come back to this later on in the video uh and so then the other things on the right so i know i showed you guys the the settings right here like the basic settings but there are i mean there's a lot more to that so you'll see the other three tabs maybe you already noticed them before but let's just say that you know you want to set up some animation some interactions is what they're calling them so if we go to like this iphone one as you go down you'll see some animations like see how that kind of fades in and out as you as you go down things move like that right there there's a lot of stuff going on that's animations the way these things pop up and it's a little clunky when you scroll like with a with a wheel on your mouse but on a touch screen this looks really really cool as well so maybe that's something you want to set up so if we go back to our michael brian's dapper project here we can set up these animations so if you click on the item you want so let's just say this image we want to set up the first thing is a trigger and you can trigger this based on either the element itself so interactions with that for example if somebody clicks on it if somebody hovers over it uh if somebody's if you scroll so that's in in view all of a sudden that's i think what a lot of the a lot of the iphone stuff right there i think was from scroll into view but you can also go down here and see some other page triggers which is like uh when the mouse like moves around somewhere or when the pit while the page is scrolling um so while that when the page loads for example i'm going to do element triggers for this one so an element trigger would maybe when that mouse hovers for example just an easy one to imagine an easy one to demonstrate as well so this will work on all of the different all of them actually let's just do this only on desktop just to show you guys that and the action when we're hovering on to it we can say that we you know maybe we want it to there's some weird ones for how it appears and disappears i'd rather do an emphasis one this is probably more useful on a button but i'm just showing you guys on a picture just to illustrate what we're doing here so you could choose any one of these maybe we want like jello i'm actually not sure what jello is going to look like but maybe that's what we want right there and then we also hover out so you can again do all the same things or you could start an animation and i'm going to show that in a second so let's just say maybe for the heading right here we want to start an animation so this one could be like an element trigger again uh maybe whenever the mouse hovers over it we can start an animation and the animation is really a lot more custom than the other ones so you can change some really specific settings so let's just click on it's going to be time to animation so we're going to click on the plus and we can add all kinds of actions here so the first one maybe is we want like the scale of it to change we want the scale to on way down on the very bottom you'll see the scale x y and z so we can change the scale at different times so you can start off and say that the initial state is having scale way smaller so we'll say it's like actually we don't really need that one we just need these right here we can set it like that and then we can add another point right here so we go and click plus and this is also going to be scale then right here half a second later you can go and add this and this could be like normal full scale so this could be like one there we go so and then you can also change this if you don't want it to be half a second you could change that duration to instead like maybe a quarter second or a full second let's just say one second which is painfully long but that should when you hover over it like start small and then gradually expand into that i'm not really sure when you'd use this exact situation but again i'm just showing you guys how you can do some different things but you could also add like right here if we want some other things going on maybe we want like uh some rotation or something maybe i don't know um and so we can have all kinds of things going on but i'm actually just going to get rid of rotation um but i was just showing you guys you can actually set up all kinds of multiple things going on at the same time lots of animations i mean obviously be careful with that because i mean the more you add the more that can break with your website you don't want things to load in a weird way and give people like a really weird experience but it nonetheless it could give you a great experience if it's done correctly and then of course the other tabs on the top so if we click on heading here you'll see that the this one the settings you can actually change it so maybe if it's not an h1 header which is like your biggest most important one you can make it like h2 instead or h3 h6 doesn't matter so let's go and just leave it as h1 because it should be h1 right here but you can go and add some attributes here some more technical stuff going on but for the most part uh what i use when i'm making a website like the majority of the time it's it's either this this tab right here the actual style editor or the actual uh interaction so cool thing is when you're on the side if you just click s you have those little shortcuts so you can see right there it tells you when you hover over it or sometimes it does there we go style is s so this is d if you want to go to settings and then you can go through like g g for that one and h for for that one so cool that you can just kind of get through those if you click on settings and you're like oh man i just need to like switch between them so fast really great way to be more productive and save time so that's everything in this interface right here for the most part we can go up to pages right there like i showed you that's going to just kind of be the same thing as this button here and you can go to preview so you can toggle preview and it's going to show you like just the painful animation we just made just like bounces back and forth oh man that's so bad oh man that's terrible anyway then if you hover on oh man yeah so so there's our there's our there's our website right now you guys you get the idea though you know what i'm showing you guys so that's how you would set up a lot of different things on your website now let's actually go back and i talked about how you probably don't want to start your first website from scratch maybe you do if it's just a simple like really simple landing page but let's go back to uh where we were so we're going to exit this click on not that button click on the eyeball there we go and let's just say so it automatically save let's go back to our webflow dashboard here um actually one other thing now that i bring this up it's important to note the project settings is something else that we should definitely touch on i should have mentioned this earlier actually so project settings is where you can rename it so if it's um michael bryant's sword adapter project and then we have a sub domain here sure whatever we can add it to folders so you can have if you have a whole bunch of projects going on maybe if you have some clients you're working with or maybe you have multiple businesses it's nice to organize things with folders you also have your icons down here so this one right here is going to be essentially on the top you see the little logo right there and right there so we can upload one of our own uh so maybe like a cheesesteak one that i had before let's add that one uh unfortunately that's not the right size has to be 32 by 32. you get the idea of how we're doing that one and then like a web clip image as well if you want that time zone is going to be important for anything you put on your website like your hours stuff like that right website password showcase there's a lot of things down here that you should read through but going through the top we have other things like seo is extremely important so seo is going to be again a little bit more technical but if you want to do things like google site verification if you want to go to i believe this is going to connect it to google search analytics or google search console probably so you put these little api keys in there you're just gonna paste them that's a separate video but it's really easy to do with this so it's good to know where these things are so when you are setting up google google analytics or google search console it's going to ask you it's going to give you a code and say go and paste this like somewhere in your website settings and then you just come here paste it say save changes and it's really easy to do oh yeah it is search console i was right it says it right there so going through the other ones hosting is something that you're going to choose a different plan right here but you can also export the code and do whatever you want with that i think for the most part you're just going to be doing like one of these super easy the editor if you have any other people that are allowed to edit this and the branding as well and they keep showing you these things because admittedly i did not upgrade my plan because i don't plan on using this website my dapper project here is purely for educational purposes so i don't feel like paying for this right now but if you do you go to billing and this is going to show you like your site plan your invoices if you have clients that you're billing stuff like that if you go to forms i didn't add any forms in here but if you do this is essentially going to change a lot of like where your forms go you can set up a little recaptcha here to make sure that uh the people that are emailing you are not bots really clean up your inbox quite a bit because i mean trust me i've gone down that rabbit hole of not setting this up it's important to set that up and then we can go into fonts it's really cool you can actually integrate fonts here from three different sources so google fonts just so easy you can just find like any google font you want so for the most part like look how many there are there's so many then we can go down here in adobe fonts as well i don't really use adobe fonts that much but you need an api token if you have adobe fonts uh like in an account with them whatever and then you can also upload custom fonts as well if you have them saved as one of these formats we can go to backups like i showed you guys before the backups it saves them automatically and you can just go and restore them if if you liked what you had before and then integrations is kind of like what i showed you over here with seo see how we have like google site verification in integrations you can have probably like mailchimp stuff like that um i don't see mailchimp but like facebook pixel is going to be one google maps things like that so pixel is going to be like if you're advertising on facebook or if you have a facebook ads account then you can set up pixels on this website here which means that when people are visiting you you can track when certain things happen like anytime somebody goes to your shopping cart uh then you can like sign them up for a little a little category of targeting ads uh it gets like it gets really really intense really quickly and i'm not gonna obviously touch on that in this video but the last thing is some custom code if you're interested in that so those are your settings right there but like i said let's go back to the dashboard now and actually go and add a new project a new project here and we can go down and find really any one of these let's do a free one right now because i'm being a little bit cheap today i guess i didn't upgrade my plan let's go and view all of the free ones and look at that we got lots of free options here let's go and say this one right here is what we want i like the color there i like what they're doing let's go and use this one for free you can also preview it if you want but i'm going to oh so i can only have two unhosted sites okay so let's go back and get rid of my first one so let's go back there and say my initial project we're going to delete that and we're going to confirm by typing it okay man they really make you work for that okay we're gonna delete that forever minus one there we go so now we can go back to what i wanted to do let's go down to the free templates view all of them go down choose the one we want we're going to use it for free and then boom it takes us over to create the project on our personal account as opposed to somebody else's account and we can go and create the project and this is a wondrous project no i this one's best my best work ever absolute best project create it creating the site and that'll bring us into again the same editor that i was just showing you guys but now when you're starting with the template you'll see that i mean i want to show you guys this because it is a little bit there's they're usually a little bit noisier a lot more going on because you're not building it from scratch it's not nearly as simple but i mean the point of this is to see how to actually edit everything so the first thing i like to do is actually go down to x-ray mode i said before that i don't use it much but you can see right here like what they were doing and how things got to where they are so if you're like what's going on why is this this text right here you'll see that it's actually a heading uh in the middle so it's not really like in a container as much but they have it all the way across and then like a buffer on the left side and a smaller one on the right side or rather probably padding as we go down you'll see that they'll show you different things like margin and padding are going to be i believe different colors so like blue and and green and so you can go down and see how everything is looking so once we have an idea of how this site is laid out let's turn off x-ray mode is that what's called x-ray mode yeah x-ray mode and we can actually start editing what we what we're doing here so the first thing is you can click on any one of these and change the font or the text that we actually have written there so let's just say this is going to be um like photography and this is going to be like a personal portfolio or something and so the cool thing is you can actually go into any one of these and if you highlight that you can actually make this into a link if you want so you can insert a link it underlines it makes it look weird so you can go and like change the settings for that but i mean if you wanted to do that you can that's why i generally kind of avoid links on like big text like that and so instead we would want to set up like this button and so like i showed you guys before if we look at this button we can go over here and start customizing this button so we're going to put a lot more padding on the left side to bring this over towards not padding see that's what i was saying you want padding on the inside you want margin on the outside let's go and put margin on the left side put that maybe like right there and if we want some padding you can make the button wider but i'm going to leave it as that and you can actually customize what the link is where the link is going so right here if you click on the little settings button it gives you a convenient little window below there to change where this button is actually linking to so you can set it linking to like a url it could be a page within your site it could be uh like all these other things like an email form it could just be like a phone number so if it's on a phone on mobile at least that would be what i would recommend for some time you know sometimes so that people could just call you directly on a desktop site that doesn't really make as much sense or you can go to a page section as well if you have like anchors throughout your page that you want to go to so it's going to just leave it as a link and set it up for https centralmedia.com there we go so that's going to be our button there and if we go to preview it we should be able to click on that button and it opens up centralmedia.com there we go exactly what we were looking for and then click on the eyeball again to get out of preview and that's like the first thing you'd want to do but we can also go to like this section here this entire body i believe is the background no this section is the background section see how right there it's kind of like really hard to click on if you want like a bunch of different things that's where it becomes easy to go to the navigation on the left side and just kind of go through and change so the background of this is not the body it is not the hero it is the section there we go so that's what the background is and it looks like they have some kind of fade going on in the bottom corner there so we're it's a linear gradient there we go you can see that right there if we click on that you can see if we want to change like the gradient to be a little bit higher or we can change the color let's actually bring it down a little bit a little bit brighter on the left side there we go so you can change stuff like that so that's how you're going to be going through a lot of these different templates obviously whatever your website is whatever you're trying to do whatever template you used it's all going to be so different but the idea is that you want to be going through in this process here or at least this is how i do it when i make websites here it just makes things a lot easier to first identify what they did and then figure out how to make it yours rather than just like deleting stuff and replacing it right away because a lot of times the way they built it it makes a lot of sense i do usually like the way they're doing things so right here we have a little little see the little lightning bolt right there that probably means we have some animations going on so it says when it scrolls into view um it looks like we have one there we go scrolling into view uh we have what is our action there we have an animation there we go okay so that's how you'll see that the little lightning bolt on the side you can get rid of that if you want just by clicking on the little trash can so if we go back here you'll see scroll into view we have one we can go and hit the little trash can that'll get rid of that if we want there's also a page load one as well you can go and get rid of that one as well and so you know that's how you see how things are actually happening on this site so guys that's probably everything i wanted to show you in this video so that's how you're gonna make a pretty good looking website honestly in i mean how long has it been about 40 minutes right now 50 minutes not really that long of a video and again i was like almost making like two different little landing pages so very easy to do uh you just have to take some time to actually get used to stuff but webflow is definitely really really powerful and it's something that while it is a little bit more technical it can be very rewarding and it gives you websites that don't always look just like a cookie cutter website so as much as i love wix and squarespace and i recommend them to a lot of people out there it's still great to be able to make a little bit more custom of a website at least for some situations like if you are an artist and you just really want your website to be a little bit better than what you can make you want those animations in there and you want to make it exactly like you have the idea in your head webflow is a great way to do that so if you guys enjoy enjoy this video consider liking and subscribing leave any comments down below if you have questions about webflow uh or just let me know if you guys did anything really cool on your website that maybe i didn't mention in this video i mean i'm always interested to see like examples of what you guys did or hear what kind of cool stuff you have set up so definitely let me know or dm me on instagram uh send me your websites as always guys if you enjoyed this video like i said like and subscribe thanks for watching good luck with your website i'll see you next time

Channel: Santrel Media

Views: 50,659

Keywords: nate o'brien, mike o'brien, santrel media

Id: Omz_ae1J4C8

Length: 48min 37sec (2917 seconds)

Published: Thu Nov 12 2020