Webflow Tutorial For Beginners 2021 [FULL STEP-BY-STEP TUTORIAL]

what's up my name is simon and in this video i'm going to show you a step-by-step how to use webflow to create design and publish your website i structured this website tutorial to make it as easy as possible for you to learn all the most important features of webflow and at the same time i'm going to walk you through the entire process of creating a new website from scratch to the point of actually publishing your new website the goal is that at the end of watching this tutorial and following along with it you'll be able to create design and publish your new beautiful looking website using webflow i'll leave all the topics i'm going to cover in this video down below in the timestamps so you can always jump around or come back to certain parts later on also if you find this tutorial helpful make sure to click that thumbs up button so that more people can find this information with that being said let's get into the tutorial alright so welcome here on my computer as you can see i'm already on the webflow website where we're going to go ahead and create a new webflow account now if you want to support me and my channel you can use the link down below in the video description to create your free webflow account this is my personal referral link which means that if at some point you do decide to go for a paid plan then i will get a small commission for from whatever you pay to webflow at no additional cost to you this is basically how i can make all those free videos for you guys on youtube so if you want to use my link that would be highly appreciated but if not that's okay as well so the first step that we're going to do is we're going to click on get started it's free right here and then you can either sign in with your google account or continue with an email in my case i'm just going to use a new email address so let's use medicstutorialsgmail.com click continue here then i'm going to create a password like this continue all right so how should we greet you let's say medics media continue we've got a couple of quick questions let's go okay what's the best describes your role so let's say we are an entrepreneur let's continue who will you be building websites for let's say i'm going to do it for myself continue do you have an experience building websites let's say i have some experience continue and then i want to build a website let's say we're going to do a business website today click finish and that should take us inside of our new webflow account now the first thing that you see when you create a new account is this pop-up where they kind of want to help you getting started with webflow by taking a short interactive tutorial which is in my opinion actually pretty good so if you want to you can just pause this video take this short tutorial right here and then come back to this video because what i'm going to show you is a lot more in depth but i'm going to skip this right here so let me just try to reload the page and then we go to our dashboard so we can actually start a new project so all i did now is i went to webflow.com and it already only i'm already logged in right now so and i'm going to click this away this tutorial so right now we have a initial project right here but what i'm going to do is i'm going to start a new project so i'm going to go to the top right here click on new project and now we have the possibility to either choose a template from webflow they have a couple of free templates and they also have a couple of paid templates that you can purchase but what we're going to do in this tutorial to really learn the basics of webflow is we're going to start with a planned blank site so we're going to choose blank site here click select and we're going to name this um we're going to name this tutorial website and we're going to click create project all right so that takes us inside of the webflow designer where we can start building and designing our new website but before i do that i'm going to give you a quick overview over this uh interface that you see right here and we're going to start on the top left so here you can see this little webflow icon and this is where you can go to your dashboard and the dashboard is basically just where you see an overview of all of your projects we have right now we have two projects in there the one that we have just created and the one that is created by default when you create a new webflow account a project is basically just a new website that you have created and then we can also go to the project settings right here which is um something that we're going to go into later on in the tutorial where we're going to look at the most important settings and you can also access your editor right here which is like a very easy way to change a content on an already published website later on and then right here is where you can change between different pages on your website right now as you can see we only have the home page set up and we can also create a new page by clicking right here and we're gonna also do that later on in the tutorial this little eye icon that you see right here is where you can click on and then it will preview your website and you will see exactly how it will look like for a visitor on your website it's also a feature that we're going to use a lot in this tutorial then here you can see a different so-called breakpoints this is just basically different screen sizes and different devices so this is very useful because we're going to create everything on this breakpoint right here which is just a desktop screen and then everything will kind of trickle down into these other devices and later on once we have finished our site what we're going to do is we're going to go through each of these break points so we're going to go to tablet we're going to go to mobile landscape and also mobile and the mobile portrait mode and we're going to make sure all the content looks good on these devices as well because as you probably know a lot of the traffic nowadays or most of it actually comes from mobile devices and we can also kind of drag this make change the screen sizes right here to actually make sure uh at on every screen our content looks very good um and then right here you have the do a redo and under button which is very useful as well we can see that it automatically saves your changes a lot so you don't need to worry about saving anything and here you could export your code if you wanted to and this is uh to share your project and then at the end of the tutorial we're also going to publish our website by using this button right here and then on the right side here is where you can make all the changes to your elements so if i drag in an element so let's say i'm going to drag in let's say just a heading right here and then i can make all the changes by using this um this section here so we have um layout we have spacing we have um size we have position typography we have background we have borders and effects i'm not going to go too much in this editor section right here because um while following along with this tutorial you'll get familiar with this editor editor pretty quickly because we're going to use it all the time let me just delete this again and then here on the left side is where you can with this plus here you can drag in different elements so we have different sections lists buttons so all kinds of different elements and we're going to use a lot of them in this tutorial then you have symbols which is something i'm going to explain later in the tutorial you have the navigator which is a very nice way to kind of see the structure of your website um i'm also going to go into this later on in the tutorial we have pages which is basically the same button as this right here where you can see an overview of your pages you can create new pages and so on and you have um the cms which um you can use if you have cms items on your website and this is for e-commerce websites right here which we're not going to use in this tutorial and this one is for your assets so all your pictures your images your files that you're going to be using on your website you can upload everything right here and and then you also have settings here and here on the bottom you can have some links to some tutorials or a search function like this um so yeah that's basically the overview of the entire interface of the webflow designer alright so let's start building out our new website so the first thing that i like to do is drag in all the assets that i'm going to use for the new website that i'm about to build which means i'm going to drag in all the different images and files that i'm going to use on the website to do that we're going to go to the assets on the left side here and we're just going to click on the little upload button here and i'm just going to drag in all the different images that i will probably use in this tutorial so i'm going to click on open and then we'll just upload all the different files in this assets library so i don't need to upload it later on in the tutorial and then we're going to start by creating our hero section which is like the first thing that people see when they visit your website so let's just close out of the assets right here and then we're going to click on on the little plus sign on the top left and what we're going to do is we're going to drag in a new section like this and then inside of our section we're going to drag in a container which will just help us keeping up a good structure of our website and then let's say i want to have some text on the left side and an image on the right side so it would make sense to add two columns so what i'm going to do is i'm going to again go to the little plus sign and i'm going to drag in columns inside of my container and what you can do here is you can maybe add three columns or four columns and you can also decide on how wide the columns are by just dragging um this to the left and to the right but i'm going to just leave it at the same width like this i'm gonna close out of this menu now let's just go to the navigator real quick and which is this button right here and here you can see the structure of your website so we have the body which is like the entire site then inside of our body we have a section inside of this section there's a container and inside of the container there is a column and then later on when we drag in different elements you will see the elements will show up under the different columns right here so this is a very nice way to just kind of when you kind of get lost on which element is in what column or which box then you just go to the navigator and you can see a very nice overview of where all your elements are inside of so let's start by adding a heading so we're going to go to the plus sign we're going to go down to typography and we're going to just drag in a heading inside of our first column then i'm also going to drag in a let's say a paragraph below my heading and then i'm also going to drag in a button so let's drag in the button just below here and again we can go to the navigator and we can see now in the first column we have a heading a paragraph and a button now in the second column i said i want to have an image so let's just go to the plus sign drag in our image like this and we can already choose an image by clicking here and now it opens up our asset library where we have already uploaded all of our content so let's say i'm going to choose this image right here and just close out of this and just like this we have filled up both of these columns now you can just when you want to change an element to a different column or different container or section you can just click on it and drag it around so if i want to have like let's say the button here below my my image what i can do is just i can drag my button below right here or or on the top and then i have the button inside of my column number two and then i can just put it back like this just drag it up here and then it will go back to the first column so what i want to do now is i want to center all the elements that i've just dragged into my columns here in the middle horizontally inside of my columns because i think that will look a lot better so what i'm going to do is i'm going to go inside of the layout options of my columns so first i have to make sure my columns are selected so i can either just go to the navigator click on columns or i just click on the element right here in my canvas and make sure it says columns here on the top you can always change the element just by just clicking here and then choosing whatever you want to change but now i'm just going to go to columns and then i'm going to go to the right side menu here and i'm going to look at the layout what i'm going to do is i'm going to change to flex layout and then i'm going to go to align and i'm going to go to this which is means align in the center so i'm going to click here and as you can see it will automatically align in the center of my columns what i can also do is give my elements a bit of space between each other so for example let's say i want to have some space between my heading and my paragraph and between the paragraph and my button so all i have to do is click on the paragraph right here and then i can use the spacing feature on the right side so all i have to do is increase the margin on the bottom and on the top so all you got to do is click here and then just drag it and just increase the space however you think it looks good you can also if you hold down the option key it will change it on the top and on the bottom simultaneously if you hold down the shift key it will add spacing on all four sides but this doesn't make too much sense um right now so what i'm gonna do is i'm gonna gonna just add like 30 pixels on the top and on the bottom right here i can also maybe give my section a bit space a bit more spacing so i can just make sure my section is selected right here and then i can do the same thing i can just hold on option and just increase maybe give me 30 pixels on the top and on the bottom so let's now start changing some of the content so let's say i'm building a website for a social media marketing agency so let's say the heading could be um we scale your business on social media and then i have prepared a small text for the subheading i'm just going to paste it in here and then we're also going to change the button text to um contact contact us and now what we can do is you can also change the font so what i could do is just i could go to the heading and change the font right here on the right side on typography but what i want to do is i want to set a default font for the entire site so rather than changing it for each individual element what i'm going to do is i'm going to change it for the entire body because like we've seen here on the navigator everything sits inside our body so when we when we change something inside of the body it will change for all the different elements inside of our body so i'm going to make sure the body is selected i'm going to go to the right side to typography and i'm going to change from ariel to let's say montserrat and just like that we have also changed the typography of our heading and of our paragraph and also of our button so now what we can do is maybe go to the heading and make some more changes maybe we want to have the scale to size to 35 pixels um sorry 35 and the height is fine um but we want to have it um caps on the first letters like this and then for the paragraph we're going to change it to let's say 18 and we're going to change the height to 24 and i think that's good now for contact us we're also going to change it to gonna make the first letter capital like this so next we're gonna go ahead and change the design of our button right here but before we do that i want to quickly talk about classes because classes are a very clever way of web flow to organize all the different designs of all of your elements which makes it very easy to design something once and then you can copy the design that you have made for example today button to all the other buttons in your project as well i'm going to show you exactly what i mean in a second here so as soon as you change something about an element and there will be automatically be a new style class created for that specific element for example this button right here we have capitalized these words that you see contact us and after we have done that it automatically created a new class called button that you see right here now if we would delete this class um like this then you can see the words aren't capitalized anymore so there aren't any design changes to the button yet we can also um add these classes manually and also combine different classes which i'm going to show you in a moment so let's manually add a class to this button so what i'm going to name this let's say we want to make an orange button so i'm going to name this orange button class as our orange button so now everything that we change now based on the design here will be saved under this specific orange button class so let's go ahead and start changing something so let's change the color let's make this um in dark orange kind of like like this and let's also make it round so we're going to go to borders we're going to increase the radius to let's say 100 pixels and let's also make this a bit larger let's make this 20 pixels also and also increase the padding like this and also like this and then let's also make this all caps like this and maybe it's even a bit too large so i'm gonna make this 18 pixels okay cool so let's say i'm finished with the design right now so this is my orange button now what i want to do is let's say i want to add more buttons to my website so i could drag in a new button like this and now instead of making the same design changes to this button all i would have to do is go to the top here to the top right and look for my my orange button class so i'm going to type in orange and there we go we have the orange button class and now i have assigned this class to this new button and then the button style will be exactly the same as this one that we have just created now when i want to change something about this specific button um right here let's say i make this um smaller then i can add a new class which is then a combo class so i'm going to add a smaller button and now what i can do is i can just change the size of the type of the font to let's say 15. and now um this button doesn't change because we have added a new class right here so now this is a combo class and this way you can kind of create an entire structure of designs for your website which is very helpful when you have a big project okay so let's delete this button again and another thing i want to show you is how to change the state of this button when you actually hover over it with your mouse that's something you see you see a lot of on different websites when you hover over an element then it actually changes so especially for buttons this is very useful so all you have to do is you have to go to the top right here to the selector actually select the button first and then you have to change by clicking on the arrow to hover and this is basically just another class so now we can make changes to this button and everything we change here will be only visible when people hover over this element let's make this a bit brighter so let's change the color here to let's say to make it a bit more maybe a bit more yellow kind of like this then we can click out of it and now when we hover over this element it will actually change colors we can also look at it from the preview mode and we can see this changes so now i'm already pretty happy with my hero section right here maybe something else i could do is i could add a background to this hero section so let's say i want to add a a gradient and so let's click on the section and by the way we can also change the name here to a hero section just so we have a bit more organization and structure and let's go down to background and we can either add an image as a background or we could just add maybe a solid color or a gradient so let's click on this plus sign here and in this example let's add a gradient and here we can change the color of the upper part so let's say we make this a light a light blue kind of like this and we're going to leave the bottom part at white so i think this looks pretty good maybe i want to want to have this section a bit larger so what i can do is i can go to size go to height and let's make this let's say 80 vh which is 80 viewport height which means it fills about 80 percent of the screen of your visitor but what i'm noticing just now is that my elements my columns right here aren't in the middle of my section so what i have to do is i have to go to the layout options of my section and make sure everything is centered in the middle so i'm gonna again uh make sure i select the hero section go to the layout options uh go to flex layout and horizontal is already checked and then i have to align it in the middle right here and just like that it is sitting in the middle of my section okay so let's move on and add a nav bar to the top of our website so again we're going to go to a little plus sign here we're going to scroll all the way down and look for navbar and then we're going to drag the nav bar to the top of our website and then i noticed that we have a little gap here between our hero section and our nav bar and actually i want to get rid of this gap so i have to go back to the hero section and i'm going to remove the padding right here that we have added before to this section and then the first thing i'm going to do is i'm going to change the color of the nav bar and i want to make the same color as i have here on my gradient on the top so what i'm going to do is i'm going to go to the hero section and i'm going to go to the to the background gradient that i've added and i i'm going to check out what kind of color i have added here on the top i'm just going to copy this color and then i'm going to go to the uh to the nav bar again i'm going to go to background color and i'm just going to paste this color right in here and let's see and now we have the same blue on the top which i think it looks pretty good and now the first thing i want to do is add an image here in the brand section of the navbar which is going to be my logo of the website so i'm going to go to the plus sign go down to image i'm going to drag the image inside of the brand i'm going to choose an image that i have already in my library and let's say i'm just going to use this logo right here and obviously it's a it's way too big so i can just drag this down until it's the right size let's say like this and now it's not really centered nicely here in my nav bar so what i'm going to do is i'm going to go to the to the brand container here and let's uh increase the the height of the brand container i think the navbar is 60 pixels so i'm going to also make the height here 60 pixels of the brand icon here and then i'm going to go to the layout i'm going to go to flex layout um and going to go to vertical and i'm going to center everything like this and now my my logo is very centered here in the nav bar which looks a lot better and now we're going to go ahead and look at some of these nav links here on the top so obviously you can change all these links right here so if you want to remove the home button just hit delete or just right click click on delete um maybe i also want to add a new uh nav button called let's say our clients so i'm just going to click on duplicate and then i'm going to change this to i'm going to change the name to my our clients and we can also change the styles like we've seen before as soon as we change the style here it's going to add a new class and like we've also seen before we could just add the same class as we have added to this button so if you would do that um let's look for our class orange button then it would change this button with the same style as this button right here but it doesn't really look nice so what i'm going to do is i'm going to create a new a new class so i'm going to undo and i'm just going to make this also all caps so let's go to typography and make this um all caps like this and now it has created a new class called nav link so what i can do is just go to the other nav links and then just um also add the nav link the navlink class and it will just take over the style of the navlink class so now i want to add a new section just below my hero section kind of featuring the clients that this social media marketing agency business has already worked with and to do that we're going to add we're going to use the grid layout so first we're going to add a new section just go to the plus sign drag in a new section then we're going to also drag in a new container for our structure and then we're going to drag in a new grid just like this inside of our container now you can now on the right side change how many columns and how many rows your grid should have in my case i want to have four columns and only one row so i'm going to delete one row here and add two more columns just like this and then i'm going to also add a heading so i'm going to drag in a heading and let's try to drag it into the container now as you can see it's not inside of the container so instead of kind of trying to drag it in here what i like to do is go to the navigator right here and it's actually as you can see here the heading is inside of the hero section so i'm going to drag my heading inside of my container and just like that we have it inside of the container now i want to have the same style as this heading right here so what i'm going to do is i'm going to check what style what kind of class this has this is heading two so i'm going to click on this heading and also add the heading to class heading 2 and just like that we have changed we have also took the same design as we have here and it's also centered now now we're going to double click the grid and we're going to start dragging in an image just like this image we're going to choose an image and i've prepared a couple of logos here so i'm going to just choose a logo and maybe this logo is a bit too large so what i can do is i can go to the width and maybe do change this to 90 percent and make sure you select percent 90. and then i have already created a class for this image called image2 so i can rename this to maybe logo and then i can use the same classes on my other logos right here and i also want to center this so let's go to the grid make sure the grid is selected and then make sure it's aligned in the center and then i could either just drag in the other images right here or i could just copy and copy and paste them in here and just click on the gear icon go to replace image and then just select all the other all the other logos and they will automatically and take the same class as we have just created for the first logo so let's just choose this and just like that let's also change the heading to [Music] who we we work with and just like that we have a new section with our featured companies here now what we could also do is kind of make all of these logos great to not have too many colors on our website so what i would do here is just select the grid and then go all the way to the bottom to um to filters and i'm gonna add a this is blur i'm gonna add a saturation filter and i'm gonna remove the saturate i'm gonna lower the saturation to zero percent and just like that we have uh gray logos and as you can see here you can just start building out your website by just adding more sections and so on now uh what i also want to show you is kind of pre-built layouts which you is you can also add so let's say we want to add a new section on the bottom here we're going to go to little plus sign go to instead of adding an element we're going to go to layouts which are like pre-built elements so there are already sections in there already containers elements and so on so all you need to do is replace these elements with your own content so let's say we want to add a gallery on the bottom here so we just drag it in actually i'm gonna add on the bottom let's just drag it in here on the top and then we can also re reconfigure here we can drag the gallery on the bottom right on the bottom or maybe drag this section up here okay just like this so now we have a gallery here and again i'm going to change this class to heading 2 which is our heading class and this i'm going to change to the paragraph class paragraph 2 so i'm going to change this to paragraph 2 and here um let's say our portfolio and here we could just this is a so-called lightbox element which means that you can feature different uh work of yours you can add a thumbnail and then you can feature when people click on that thumbnail it will open up like in a larger image or a video or something like that so um what i'm gonna do real quick is add a couple of images here so you can see exactly what i mean so now i have added a couple of thumbnails for these lightbox elements and uh when we go to preview we can click on these elements and then it will show a larger picture again which is nice if you have like a portfolio website and you want to show off your art or your photography or your videos but we have we don't have anything in there yet so what we have to do is we have to go back here we have to click let's say we're going to start with this one i'm going to click on the element and now we want to go to the little gear icon here and we're going to go to lightbox settings and we're going to replace let's say i want to put in a video so i'm going to replace it by a video and here you can just put in a url of a youtube video or of a vimeo url so whatever you want to or you could also upload an image like the larger image of this that you have as a thumbnail so as an example i'm going to i'm just going to put in a url of one of my youtube videos click save here and then when we go to little um preview icon when we now click here it will show up my youtube video will show up and people can watch it here on my website and you can do the same thing with all of the other thumbnails here on this um portfolio gallery now another thing i want to show you is you can animate each element here in in webflow um basically however you want to so one thing i want to show you is maybe if we hover over this element that it kind of zooms in a little to have a little interaction effect so i'm going to click on the element and then i'm going to change from this the regular state to the hover state because i want to have the effect start when i hover over this element with my mouse so i'm going to go to the top right here and i'm going to change this to i'm going to add the hover class and now i'm going to scroll all the way down and go to um 2 and 3d transforms go to the little plus sign and now i'm going to go to scale and i'm going to just add and let's say this to 1.2 so as you can see here it just changes and now let's see and now when i hover over it it changes the size and we can also look at a preview but i want it to be like smooth so i don't want it to have it instantly so i'm going to go back here and now again i want to make sure to select the element and now we don't have to go to the hover state we just have to select the element and now we're going to scroll all the way down and go to transitions and we're going to go to the plus sign and change the transition speed of scale so let's see if we can find scale somewhere i think it's uh let's go to all properties so this is uh like all different effects uh and now we're going to change the duration from 200 milliseconds to milliseconds like this and now when we go to preview we can see that it's kind of smoothly zooming in and it's not kind of as a propped as before and as all of these gallery elements have the same the same class gallery thunder class all of these will kind of behave the same way so i could now go ahead and kind of keep building out this website but i i think you kind of understand now how to kind of structure a website using sections containers and columns grids and so on and how to change all the elements using this editor bar here on the right side so i kind of i'm going to move on i'm just going to drag in a couple of more things like i'm going to use the pre-built layouts i'm going to also add a contact form section here on the bottom and then also a footer and then i'm going to move on and show you some more important things about webflow so let's say now we are finished with our home page here so what we want to do is we want to create a new page let's say we want to create a an about us page so now we go to the um to the page icon here go to create new page and then we're going to name this page about us and you also have all the the metadata section here on the bottom you can have a meta description and so on i'm just going to skip this part because it's self-explanatory just go through it on your own and then click on create and that way we have created a new page when we have a new blank canvas now one thing i want to quickly mention is that on if you haven't assigned a plan to your website yet you only get two different pages to work with because the free plan is really only to test out webflow and when you launch your page with with multiple static pages you need to add a plan to your page which we're going to do later on but now we're going to start building out our our about us page and one thing that you don't want to do every time is uh redesign the header and the footer so what we can do is we can navigate back to our home page by clicking on page here going to home page and now what we want to do is we're going to make our header and our footer a so-called symbol and then we can just drag in the symbol on each of the other static pages so we're going to click on the nav bar here we're going to go to this icon this little cube icon and we're going to click on create new symbol and we're going to name this nav bar nav bar click create symbol and now we have created a new symbol here and we're going to do the same thing with our footer because that's going to be the same thing for every page as well right click click on create symbol and then we're going to name this footer create symbol and now when we go back to our about us page what we can do is we can just click on the little cube icon and just drag in our symbols our header and our footer oh sorry this was actually the navbar um our our footer right here and now we can start building out the website by just dragging in a new section like this dragging a container just the same way as we have done it before with the home page now one thing you might notice here is that we are back on the aerial font because this is a new body because this is a new static site so this is a completely new body and we have to again change our default typography or default font for this body also to our montserrat font so i'm going to select the body go to typography and also change this to montserrat and then this changes all the the fonts here of all the elements inside of this new page and once you have created all your pages you want to obviously link your pages to your nav bar and nav links so we're going to double click our nav bar here and we're going to assign these links here to all of our pages so now we have our about page here so what we can do is click on this uh this link go to the settings icon here and now we're gonna link this to a page and we're gonna named we're gonna link it to the about page that we are just on right now and now you notice that this about nav link has turned to blue which means this is the current state because we are currently on the about page so when we want to change the design of how it looks like when somebody is just visiting the about page we're going to click on this nav link here and then it will automatically assign or it will show you the current class which means the design that we make the design changes we make here um will be visible when you are currently on this page so right now the color is blue so what we could do is maybe change the color back to to black or kind of a gray and then make maybe change the weight of the font to semi-bold or something like that and now when somebody is visiting this page it will just be bold so we can also check this out here and this is how you can change the design for the current state of your nav links now the next thing i want to show you how to do is how to use animations on webflow this is a very cool feature that allows you to pretty much animate any element of your website and it's pretty customizable as well so you can pretty much do anything you want and that's also a reason why many people love webflow so i'm going to show you how how this works i'm going to go back to my home page and for example we're going to animate this picture right here so what i want to do is when this page loads i want to have this element kind of fade in from the right side so um first we're going to go to the to the interactions panel so we're going to go to the top right here click on this icon and now i'm gonna set a trigger for the animation that i'm about to set up so um i wanna have this animation run when somebody loads this website so i'm gonna go to page trigger click on the plus sign and we're gonna go to page load and now i can either have this animation start when when the page starts loading or when it's finished loading i'm gonna do it when it starts loading so i'm gonna click on start an animation here i'm gonna click on the plus sign and now we can kind of create our animation so first let's give our animation a name i'm going to name it hero or fade in fade in right and now let's select our element that we want to animate then we're going to click on the little plus sign here and first we're going to animate the uh the moving of the element so i'm going to go to move and on the bottom here you can change the the position of your element so i'm going to change the x axis and i'm going to put the element to the right so i'm just going to make it like 460 pixels to the right and i'm also want to decrease the opacity for the initial state and by the way for the initial state make sure you go to set as initial state because this is the initial state of the element before the animation starts then i also want to decrease the opacity so again i'm going to go to the plus sign here go to opacity and i'm going to decrease the opacity on the bottom all the way to 0 and also make sure to set it as an initial state and now we have set up our initial state of the animation and now i'm going to set up the the state after the animation so i'm going to go to the plus sign go to move and now i want to make sure that the element is back to the middle so i want to set it to 0 pixels so we can see it would be back here and now it's also set as an initial state so i'm going to uncheck the initial state because that's not the initial state that's the end state and then i'm going to again go to the plus sign and increase the opacity again go to opacity and it's already increased to 100 percent here so i'm going to leave it as it is and we can just kind of merge these two together and the is already kind of finished so now we can see how this looks like we can click on play and this is how it will look like it's kind of a little bit too fast so what i can do is go to each of these end states here and change the duration from here 0.7 0.5 seconds to 1.5 seconds and do the same thing for this opacity 1.5 seconds and also i'm gonna change uh the easing so i'm gonna change from linear to let's say out quint and the same thing with this from from linear to out quint and now let's play this again so now it looks a lot smoother we can make this even let's say 2.5 seconds to make it even a bit longer 2.5 and maybe let's see how this looks like and now it's kind of even slower we can also go to the preview here so this is how it looks like so this is how you can animate your elements which is a very very cool thing to do another cool thing you can do is maybe um kind of fade in different elements when you scroll down on the website so i'm going to quickly do that as well so let's um just kind of fade in the logos here when we start scrolling on our website so we're going to go back to the trigger here now we're going to use the element trigger so i'm going to click on the plus sign here go to while scrolling in view and now i'm going to select the element so this would be the grid and now i'm gonna select an action play scroll animation and um i'm gonna go to plus here and now again go to the plus sign go to let's say opacity so i'm going to decrease the opacity at zero and then here i'm going to increase the opacity again and now when you scroll it will change the opacity will kind of change so as you can see here on the preview right on the top it's kind of almost zero and now when we scroll down it will increase the opacity so maybe this is a bit too much so what i'm going to do is go back in here and maybe drag this up so to let's say fifty percent so now when you are scrolled at fifty percent it's already at full opacity so click save here go to the eye icon and as you can see here now in the middle it will already be full opacity but you can also like flip it in or kind of you can basically do whatever you want with webflow i just want to show you how you can kind of animate all your elements right here so another very important thing you have to do before you start publishing your website and you want to make sure all the content looks good on desktop but also on all different kinds of screen sizes and all different kinds of devices and to help you do that webflow has these so called breakpoints so we have every we create everything normally on the desktop breakpoint and it will automatically kind of trickle down into smaller devices and if you want to you can also add like larger screens like this you can add the 1440 and also the 1920 pixel and then you can look on how this looks like on larger screens as well but this is mostly not a problem on larger screens the problem starts when you go down to smaller devices so for example the phone portrait mode like you see this doesn't look nice at all so what we have to do is we have to change everything to make it look very nice on mobile as well and eventually we have to be able to squeeze it up and down and it should kind of scale perfectly so the content on doesn't matter what kind of screen size it looks perfect so um what you have to know here is that every change that you make here will be um automatically changed here here and here and also here here and here so it it goes to the right side here and to the left side here every change that you make on the tablet breakpoint will also change on the phone landscape breakpoint and the phone portrait breakpoint but it won't change on this break point right here or any of these so and then any changes you make here will also change on the this break point but not on these break points here so it's kind of a cascade down so what the best way you can optimize your content is to start with desktop and then go to tablet and start making everything look nice there so in this example i think this looks pretty good on tablet maybe we can change the size here um to maybe uh let's change this to auto again or maybe change this to uh 60 60 viewpoint view uh port height and then we can move on to the landscape mode and right now already we have some problems so what we could do here is maybe go to the columns and the columns and then go to change from horizontal to vertical and then we also have to maybe decrease the image size so let's say with let's say 500 or 300 pixels and also we're going to go to the hero section and change it from 60 viewport height to auto and maybe also go to the first column and make this a vertical layout in the middle like this and maybe also change the text to the middle like this also here and the same thing here so as you can see you just want to play around and kind of center everything for the smaller devices because that looks a lot better eventually what you can also do is kind of hide images completely on smaller devices so if i don't want to have this image what i could do is just go to this little eye icon and then it will just be gone and i won't have any problem on smaller devices and then obviously you want to go to the even smaller device right here and make sure everything looks good there as well and just you can also open your website on your phone and make sure it actually looks good on your phone but normally this is pretty accurate you could so you could change change the sizes here and make sure everything looks perfect on all sides and as you can see we have removed this image on this this breakpoint here but the image is still there on the tablet breakpoint so as you can see it only trickles down to the right side and here to the left side so now let's say we are finished building our website and we're ready to publish so to publish our website we have to go to the top right here and click on the publish button so you could either publish your website on a webflow.io domain which is not something that i would recommend obviously because it's a very unprofessional and if you want to use your own custom domain for example matixmedia.com you have to add a site plan to your project so to your website now let's click on click here to add a custom domain and that will open up my the project settings of this uh this website you could also get there by just going to the little um webflow icon going to project settings and then here going to hosting and that's basically the same the same place that we have just gotten to before and um the pricing plans are a bit confusing with webflow what you have to understand is that there are two different pricing plans there is the pricing plan for your webflow account and then there's the pricing plan for each website that you're building inside of webflow let's first talk about the account plan so when i go to account here go to upgrade plan then i can see the different account plans and by default you are on the free plan which for most people was is probably enough because you have two projects that you can build without paying anything with maximum of two pages but you can start building out your website and once you have added a site plan this this right here to your website then a new slot will open up and the only reason you would want to upgrade to the light plan is if you would want to export your code or if you want to have enhanced staging client billing or actually client building is also available for a free plan or you want to have more unhosted projects so for for you i would just stay on the free plan for now and just worry about the side plans um so let's talk about the side plans so obviously if you have an e-commerce website you would have to choose the e-commerce site plans um but we're going to stay with the website site plans for now and again obviously if you pay annually so if you pay up front it will be a bit cheaper so i'm going to choose monthly here and um the pretty much for most of you the only plans that would be interesting to you is the basic plan or the cms plan um with the basic plan you get 100 static pages um 25 000 monthly visits 500 form submissions and so on the main difference is that if you have cms items on your website you want to go with the cms plan and another big difference is also that you can have multiple content editors so maybe if you're a freelancer and you want to have your clients as editors so that you can design the website and then they can add content then you also would want to go to the cms plan because then you can add content editors but for the sake of this tutorial i'm just going to go for the basic plan so i can show you exactly how to add a domain so i'm going to go to add basic so now that i have added this basic plan right here i can scroll down and start publishing my website on my own custom domain but first i have to add my custom domain to webflow so here we have to just scroll down and click on or actually if you're somewhere else just go to hosting on your project settings and then scroll down go to add custom domain right here and then just type in your domain now for example i'm just going to add medics tutorials dot com which is the main that i own go to ads domain click ok here and then they'll show you the exact instructions on how to assign your domain to a web flow so just do what it says here or follow along with this video i'm just gonna show you how to do it um with my registrar which is bluehost so now i'm logged into my bluehost account and i'm gonna go to domains right here gonna choose the medicstutorials.com domain gonna go to dns settings and here is where i have to add two a name records and as you can see there's already a a host record with the add symbol so first i have to delete this specific record i want to make sure this is the right the right url medics tutorials that's fine i'm going to delete this a name record right here and then i'm going to start adding the a name records that they want me to add here so i'm going to click on add record the host record would be just the add symbol points2 this is what they give me here it's copy just click on this value and then it copies it to your clipboard then i'm going to paste it in here i'm going to click save and i'm going to do the same thing again with this value right here so again add record add symbol for host record points to paste the address again i'm going to click save now i have to do i have to go ahead and add a cname record so i'm going to go back here and i'm going to look for cname and i'm going to add a record here as well i'm going to go to type is the cname the name is www so this would be www right here and then the value is proxy hyphen ssl.webflow.com i'm just going to paste this in here and then i'm going to click save so there was actually an error because i already have a www cname record so i'm going to just delete this remove and then i'm gonna try and add it again so let's click save again okay so now it's saved and that's basically all you have to do to assign um your your domain to webflow now probably it's not working yet because it takes some time to propagate through the entire web so um you can come back later and then what you want to do also is click on check status and then it will automatically connect your website to your domain and now that we are already inside of the project settings right here let's just go through each of these tabs and look at some of the settings so here on the general settings you can change the name of your website you can change the sub domain um your folders you can also add a favicon a favicon is just the icon that you see in the top here on the browser so you you want to upload this little icon of your logo of your brand or or whatever makes sense for your website then you can change your time zones you can add a website password and obviously we want to remove the branding of um of webflow so we can save the changes here and here you can also see an overview of um your website's um statistics so you can see the size of your website and also like site activity how many people have visited your website how many form submissions how many pages you have and so on and then hosting we have already checked out before this is where you can choose your plans where you can manage your domains and so on then editors is something is like other people that you can add that can edit your site so this you can add them here and then billing this is how they will charge you your credit card what you could also do is set up client billing so if you are a freelancer you can have your clients pay for the hosting of the webflow websites so you can have their websites in your replo account but they will pay for the site plans which is something that is also very useful here in webflow here you have your seo settings then here you have your forms um where the submissions will go to and so on it's pretty much very self-explanatory so i'm not going to go too much in detail here your fonts you can also add fonts you can upload custom fonts to your website you can also choose different google fonts here are your backups so if at any point you want to restore different stages of your website you can go into your backups then integrations you can add like google analytics and stuff like that and custom code you can add some custom code to your website all right so that's pretty much everything i wanted to show you in this tutorial i hope this video helped you getting started with webflow and obviously there's a lot more to webflow it's an awesome website designer website builder you can do pretty much anything you want using webflow and there's a lot more features that i haven't covered yet in this tutorial but i try to focus on the mo on the main features that will enable you to start building your first website using webflow now if this tutorial was helpful to you i'd really appreciate if you'd take a second and just click that thumbs up button below this video because it really helps out getting the video out to more people on youtube that can also benefit from this information also leave me a comment down below if you have any questions or if any comments about this video i normally just always go back to the comments and reply to every single one so if you want to see more tutorials just like this one you can also subscribe to my channel and that's pretty much it with that being said thank you very much for watching and i look forward to seeing you in the next video

Channel: Metics Media

Views: 20,678

Keywords: webflow tutorial, webflow website, webflow design, learn webflow, learn webflow course, webflow tutorial for beginners, web design, get started with webflow, flux academy, webflow tutorial website, webflow university, how to use webflow, webflow for beginners, web flow, webflow, webflow guide, webflow tutorial 2021, webflow tutorial animation, webflow design tutorial, webflow tutorial from scratch, website design tutorial, webflow review, webflow responsive design

Id: cZlnnbHNKrE

Length: 59min 48sec (3588 seconds)

Published: Mon Mar 08 2021