Webflow Crash Course 2024 | Webflow Beginner Tutorial

hey do you want to learn how to build a website without writing a single line of code if yes then you are at the right place in this video I'm going to show you how you can use webflow a no code website builder tool to create interactive and advanced websites without writing a single line of code my name is ashoke and you are watching the wfl crash course 2024 so let's di in hey so first thing we are going to learn the layouts how you can create layouts in webflow using Flex boox CSS grid columns or images buttons headings and paragraphs to create a nice looking website so as you can see on my screen here I have a webflow project open but before that let's discuss this pixel website uh I want to discuss about the layout here so as you you can see it's a layout of uh one column right one column layout or just a one row layout right inside that you have heading you have a paragraph and you have a button here right after that you have image or let's say you can create a video or anything that you want right you have it's a one column layout right but here you see it's a two column layout right so layout is the most important thing when you are building a website if your designer is providing something to you uh in in a figma file or this pixel file we are using this pixel a lot these days to create designs you can uh give it a try it's not a sponsored video but you can give it a try it's an amazing tool right here all these Ticky interactions right or to create uh interactive layout see the way they are creating this layout layouts uh here again one column but here you have let's say a gried layout four five items in that grid here again you have a two column layout a two column layout but you are using uh let's say 2x one uh GDs here right two rows and one column and here you only have one column so uh websites are always built using these layouts these grids and columns and rows uh that you can use to create uh any kind of website whether uh it's an animation uh website or whether it's a just a simple website a simple landing page you must have knowledge about the layouts if you see any design let's say if if I if I just see this design right I I I must have this idea in my mind that okay I will use something like Grid or let's say flax boox to create a layout like this that is must right if you want to learn the basics of flax boox or the CSS grid I already have videos on my channel you can go through them and you can learn the basics of them so that uh you can create these Advanced layouts okay so that's it for now on this page let's go to wlow uh a website is always using images headings buttons paragraphs and colors right to create uh a nice looking website so on webflow here I have panel like a top bar where you can see you have desktop breckpoint tablet prago you have a landscape mobile break point and you also have a vertical mobile or let's say portrait uh break point if you want to add extra let's say 1280 pixel 1440 or 1920 you can do it from here by by just clicking this 1920 it will add a 1920 uh with of breakpoint for your website um here you have designing where you can edit the website you can design the website right now you are designing the website if so let's say any owner of the website just give you the editor access right then you'll be able to edit to the website only nothing else you can do that here you can see the status uh if the site is Auto saved or not uh here you can export the code you click that on this uh this code like icon you can export the code right now we don't have anything right that's why nothing is there uh JS file and all this HTML files I don't want anything right now here you can leave comments you can leave let's say you you have a website ready and now you send it to your client or to your team member so they can leave leave comment a designer who can leave comment just go there and just write their comments just like in figma or in pixo we do right you can leave comments uh you can by clicking this play icon you can uh preview your website here by clicking again you can just come out of it and if you want to share you can share a readon link readon link means if I just share this readon link with anyone they can uh view my designer mode this is a designer mode they can view my designer mode and and they just see okay this is how they build the site if you want to send it to any employers right any agencies then you're looking for a job then if you're I highly recommend you share the read only link so that they know the structure of creating a website how you are creating a website so I think it will add some chances of getting hired you and Publishing here you have a staging domain and here you have custom domain about this one we'll talk about this at theend end of the project okay so now uh here on this left hand side panel you see all the required elements are there let's say you want to add a section you just drag it and drop it anywhere here you want you want a container inside that you can drag and drop inside that one and uh stack means a flax boox thing I'll show you uh in in in a while here you have a du block list list item link block and buttons all these things are useful when you're creating a website in HTML if you have a basic knowledge of HTML and CSS that would be an advance or a plus point for you to learn wlow here you have a typography heading paragraph text links text block block Cod reach text reach text is something like uh is you mostly used for blogs because in that you have everything uh image headings paragraphs list items videos everything you can show inside that one here you can show collection list uh collection list is mostly used for the CMS I'll I'll talk about that also in a while in the CMS section media you can add a video you can image YouTube video loty animations was PL scen it's it's a new integration with wlow and spline you can add your spline uh items or 3D character here and you can play with it in in VL here you have your form blocks all the form block label input text area this is for premium one checkbox radio select and all these I highly recommend you go through all these to know how how to use them just play with them just drag and drop them here on on the page uh one thing you have to keep in mind without form block you can't add this thing on your page let's see if I try to add anything they won't let me add because I need a form block there right so make sure you have a form block there this form block and after that inside that you can add this input text and everything that you want light box uh locals list this is for uh this one uh this multi website if you want if you want to embed a third party code you can use this embed or na na bars pre pre-build na bar here let's say I want to add a na bar here see I have a na bar on my page just a drag and drop thing you can have a map Facebook Twitter all those things you can have a search site search so many things you can do with this uh in this element panel here you have your pages you can see state Pages utility Pages means password Pages 404 Pages error page you have your CMS collection Pages e-commerce pages and user Pages all these are Pages these are Dynamic pages when you create any user let's say if you want to create a membership website then you can access all your user pages from here if you are creating a e-commerce website then you can create uh access your product detail page categories page and other uh let's say checkout page and all those pages here and all the CMS pages will be shown here inside this one it's uh it's it's like a template page that you design for once and you can use it for many times you want using a predefined CMS fields and then you have the elements see this is the structure you have a section and a container inside that one and we have a na bar right if I just select the section and I do contrl c and control V I can just just copy paste like that and uh you have this components components is something let's say uh this header right you're going to use this header on all the pages of your website right then you need this component so I just select this section here uh on the right hand side panel on the style panel you see create component if I click that I just name it let's say header and I just create it so now it's green now it become green and you can use it anywhere you want I just uh click anywhere outside of this green one and I just hit control e or command e to uh get this find uh bar and I'll just write header you see this green if I just click I can see that and if I make any change here let's see if I make any change here from the settings I want to make it let's say homes see this is how component works if you make change at one place it will reflect to every other places where you use this component on your website right uh that's uh and you can see all your components here you can manage them and the next thing is variables so variables is something that you can use to store pre uh predefined things let's say colors or the fonts or any sizes you want see size let's say I want my size like H2 I want the size of my H2 in the pixel or you can have all this value let's a pixel I want my H uh one let's say H1 to be 702 right and uh I want my paragraph paragraph size to be uh 16 pixel so how can I access them now so I'll just uh click here to go out here I'll just delete this second one I'll add another section here and inside that I will add another container and here I will do control or command e to bring I you just have to type here let's say heading I just Ty heading this is my H1 and here I want to make it let's say 72 pixel the one the H1 we give in the style panel I come down here and in the size when you hover on this you see this purple like plus icon you click that and you can just set that see it's simple right you have to this is line height also right but that you have to Define them in that variable or you can create your own style guide in wlow so that's how you can use these variables and this is style selectors all the styles that you have I have this one right that's why I can see that you can have multiple here as as you start adding new Styles you start creating your classes this is my class name right and I can access it from here all the assets whether it's image or PDF or the loty animations will be shown here inside this one in your assets you can just drag and drop your files here this is your CMS in this one you can create your CMS I'll talk about this uh later in uh in the later videos uh here your flow logic all these are Advanced things right uh uh we don't mostly use this we don't use it we use zapier integr to create a flowless integration with third party apis or the applications you have your users you can create a users see it it it is telling you this is what it is login sign up all these Pages it will create for you okay so the next thing is e-commerce see it will create products and categories Pages once you click on this let's let's do this I'll just click let's do this and it will create the pages you can setup you can add everything that you want a business address and the currency and all the shipment uh see add a shipping method right you can use a shipping method here you can review tax settings all the things which is required for any eCommerce business products categories discounts you can create all those things from here and the last you have apps you can search for apps there are only few apps at the moment but uh you can try out this one if you want to integrate with third party apps uh that was your by editing to create a website right this panel is used to add let's say CMS Pages anything that you want here in the pages you see the pages you want to create a new page you click here create a new page create on the folder you create a new folder or let me delete these things I don't want them here right now so here on the right hand side I see the style panel where you can add a class right now we have this heading class you can add any class let's say H1 this is your heading class right you can create multiple classes like this let's say I just add again that one I mostly use this uh control e to just search for the item that I want and I'll add here H1 edit a class if I want to use this H1 anywhere I want let's say I add a new uh paragraph let's say paragraph I want to make my paragraph to look like H1 so what I'll do I'll just type H1 and I can just click and select that one so that will uh use that item right and uh after that you have a layout and by default it is a block you can use flax box you can use grid I'll show you right now uh you can use inline block you can have inline you can hide the element also if you want to let's say I want to create a two column layout right so I'll just hit contr e and I'll just write grid and I'll just hit enter so I have just added a grid here and uh I want to create this grid let's say I just want two columns and one row right to edit a grid you click on here hit a grid and it will open so here you have two columns it says two columns two rows right I want only one row so I'll just delete that Row from there so now now I have something like this and uh on the left hand side I want to use an image so before that I will add a d block here as you can see inside grid I have a du block and I'll just copy paste that du block again so that on one column I have D second column I also have a D in the first d block I want to add an image so I'll just do contr e image here I can choose image from here and here I can add heading I can add paragraph okay so I have a paragraph here okay by default on body I will just remove this ed1 so that uh that large heading is gone now and I want to have a button so I'll just hit so whatever you want let's say button list heading paragraph so you can you can just drag and drop here so I have this layout now and if you want to put some spacing here just click on this grid and for columns I want let's say 40 pixel or let's say 80 pixel right to make it look better so now I have 80 pixel of that and I want this in the center I don't want this Blank Space there so I'll select that particular D I want to make it in the Center the content whatever the content is there in that du block I want them to be in the center so I'll just here on this right hand side you have align justify order in the Align I'll just make it like that so now that thing is in the center the same thing you can achieve using flexbox right so let me just here quick stack and I'll just use this quick stack Tech here see I'll just copy this uh in that cell let's just copy this image let's copy that image and in that set let's copy this D in this cell see again you have the same layout now you want to add something let's say here we had 80 80 so right now by default it leaves some speding so let's remove them like this want to make it in the center can do that from here also the center see the same layout you can achieve using grid and flex box okay so that is what the use of layout you can use flex box and CSS grid you have pings margins you have size you have this ratio overflow fit all these things that you need a typography to change let's say I want to change its color to Red that's it right uh next you have backgrounds if you want to add a background image or background color let's say I want to change its background color to I just click here I just want to make it background color to this that matches with my red color and I want to leave some pedding because I don't like this is uh uh this it it is attached with the boundaries right I I I want to leave some ping from the boundary let me do that here I have 26 and I'll add 26 from bottom I already I have from top because of this adding as you can see 20 right so this is how you can add background colors text colors from typography you can have borders all borders or just IND individual borders you can have H sorry this was for radius and this is for Border top border bottom right and left you can have a dash let's say I want all borders I want a border but Dash border and I want to make it a red one and make it let's say two two pixel so it's it looks like a card right and uh I can have a radius let's say all sides I want a radius Corner radius 16 pixel just look at this we just made few changes and it's looking a little good not that good you have these blending options all these are for images and converting something 2D and 3D transforms for uh let's say scale rotate Q whatever you want to do you can do that from here you can reset your changes from just clicking on that blue one and you just hit reset and it will be reset your fi filters uh you can have all the filters that you get uh in Photoshop you can have those filters here you can have your cursor let's say I want a pointer cursor for these one let's say I play I see I have a pointer cursor only on that one whenever I'm there it shows me poter cursor I don't want that let's reset it and and yeah that's it uh you have the style panel you have your settings for these elements it's a d you can name it a uh ID du block you can hide these you can make it visible you can add a custom attribute this is useful when you are using third party libraries like fin Suite then you can use this custom attribute to link with your CMS items and all uh you have interactions means your animations all the animations are here let's say I want I want this to when scroll into view I want to slide this from bottom let's play this see easy and I want to slide this from right side left side okay left side okay oh no I don't want the whole one just image scroll into view a slide from left side just look at this animation see the way when something is scrolling into view it will work like this and you can have your animation for let's say desktop or tablet or let's say I don't want it on my phone only tablet and desktop it will work there only uh that's how you can create uh these animations okay yeah so that's uh basic of wlow how you can add elements how you can interact with them how you can add colors and typographies and everything in the next video we will build a simple landing page where we will use CMS we will use uh all the concept that we have learned CSS grid and flax boox and also we are going to use some animations to make a page interactive right so I hope you enjoy this video and stay tuned for the next one bye hey guys welcome back to our series of VL crash course in this one I'm going to show you how you can create a landing page using wlow without writing code and we are only going to use wow core features that I showed you in the last video as you can see here on my design let me just uh shrink this camera uh as you can see I have a design here uh done in pixel I'm using this pixel you can use this pixel also uh I think because it's a it's quite uh alternative to figma and it's also free you can use this you can give it a try and if you want this design file you can check out the link L given in the description and you can also play with uh the file and you can also convert the landing page you can follow the process so that you can learn by doing right so as you can see I have a design I have a naar the one that we have discussed in the last video right and I have a single column layout here uh with like let's say here we we could use a flex boox here I have hero image here I have these client logos here I have this feature sections right uh left and right of one uh here we have this uh latest news here I'm going to show you how you can use wlow CMS I have promised you this one in the last video here we have a CTS section and our photo section so only few sections are there I think the these sections are enough to learn wlow Basics to create any page because here we are going to create uh cover flx boox CSS grid uh we going to use web flows responsive uh panel to create responsive for mobile one for this page right and uh let's start with that before we start uh I want to let you know that I'm using a font called inter here so you have to add your font here in wlow to add a font in wlow uh either you click here or let's say if I click here it says add fonts right I click there it will take me to this website of section of w flows uh settings page here fonts uh we don't have enter there so let's uh select here just type enter and here let's just uh select some regular fonts 5 6 7 8 I'm just just selecting them it depends on your choices whatever the fonts you are using the font weight you can do that and from there I'll just go to designer again so that I I have a font right so this is my process when I'm building any website so this is how I build I add font first and then export all the images let's say here we have a logo as a image here we have logos of our clients here we have this image this image uh blog images I export all of the images and add them first here so that I have everything in place uh just to start building my website right once you have added your phones now here in the style panel click on this body and in the style selector click here so that uh it will show you all these uh classes you have and the pink one is the default class that wlow is providing you right for all the bodies in your website so for all the bodies in my website I want to use a font called inter let's find enter enter is here and uh this is the font size and 24 is the line height I'm using and here I want to use this color uh let let's grab the color from here 4950 and this one here you have the color there right so mean this color will apply to all of my uh phones on the website all my body colors um here we have images we have fonts now let's set up these buttons we have two types of buttons small and large small small and I think again large button so let's create button first uh let's create a small button I'll just zoom in here and here I will just uh add button okay simply add a button here before that let me show you uh how to add a container here you do control e to pull up this find bar and add a section and when section is selected hit CR e again and add a container container this is your container container means it's a it's a fixed value of your uh viewport right so that is the maximum value your content would be in within right it won't go outside of it until unless you create or you use positions absolutes and fixed and all it depends on that so my container here is has the width of let's me select this 1140 and inside that you have 12 12 paddings given from both sides you can see those uh blue lines so let's say uh here my container let's say I'll just write uh before I write cont let me delete this uh CSS from our previous uh demo let me just clean them up I don't want to use them okay gone okay now here at this container I want to make it container maximum right now maximum with 940 let's make it 1140 so now it's 1140 and uh inside that I'm going to add a button here's my button and let's get the button color from here what is the button color button color is this let's go there and just change the button color here my button color what is the radius of that button radius means the corners of that button is six pixel so I'm just going down here in this radius Border in this bord section in on inside radius I'll just try six so from all the sides it will be six and what is the phone size of that button is 16 pixel and and uh semi bold inter semi bold so I'll just do that uh 16 pixel let's go here 16 pixel 24 semi bold semi board enter right uh text is like a sign up this is sign up see it looks like that right and uh what else do we have here uh I think we don't have anything else there let's uh set up its line height to 18 or so and what is the pading 10 10 and 16 16 from both sides let's say from top and bottom 10 pading and 16 from the both side right so here our button let's make a large button how to make a large button so let's say you have one button created a class now uh again add another class here say large right large so it's a large button LGE large button we just have to change uh its pading and all a ping is 1616 from top bottom and from left and right we have 24 24 so let's say 16 16 16 16 24 and 24 you can use your let's say alt and uh just drag this it will work right but I I move prefer to you use keyboard not that drag one because sometimes it doesn't give you perfect one okay so now you have small and large button so large button we have text says TR scale for free let me use that okay so this is our small and large buttons here okay so we have our buttons ready these are the classes you can use this class anywhere let's say I am adding a button on a different page and I want to make this button like this small small one right the default one is the smaller one so I'll just go here and I'll just add this class button see simple this is uh the use of CSS in wlow the classes that you can easily call and uh give up the style that you have already predefined right so our buttons are ready so let's uh delete them it won't go anywhere just delting it from the viewport uh here let's use headings here we have to use headings also from for headings I will use uh heading heading one 2 3 4 five uh let's let's use the six one also so here uh H1 H2 in the setting panel I'm changing all these as you can see you can follow along you can speed it down if you want uh this is H5 I guess yeah H5 and H6 it is also telling you what is the heading uh of these item right the heading you're using H1 H2 H3 H4 so by default we are using for heading we are using 48 and the color is black right 48 for the uh sorry medium medium font weight we are using so let's set all the fonts of we have uh here let's go medium uh and let's make it black let's not use that black uh for Edge tools so uh medium and uh black for [Music] H3 black I'll make it medium for here also H4 black I'll make it medium for this one also H5 medium and black H6 it's six medium and black now let's go there and what is the font this is our H1 let's say this is our H1 it's 48 and 60 pixel of line height uh 48 let's set this as 48 and 60 for line height uh let's say this is our H2 40 and oo let's say 48 we can use 40 let's make it uh 40 40 and 48 uh here we can go and let's say this is our H I think this is our H2 again this is our H3 but let's say this is our H3 and uh okay this is also H2 uh this is our H3 H3 let's use this H3 28 for H3 let's go and use 28 and 36 are for H4 this is our H4 the block Title 20 H4 all our H4 will be 20 and uh 28 I'm just using 8 here there here it by default gives you these ones you can remove them if you want I just want to keep these for now right so now you have your headings your buttons are all set to go right you have your color uh here in the style guide you can see you have everything that you want right 72 that I think we have added this in the last one let me add a color so that I can use it if I need it any any time just go here and the color is this uh brand color all and uh color of this text is this uh text text color I'm just giving a name you can give a proper name meaningful name make sure you always name them properly so here we have a section inside container we have headings let me delete all the headings now and uh and let's start uh developing this page uh so I'll try to use the predefined sections given by wlow so I need a heading right I need a header as you can see in the design we have header so for adding a header what I'll do I'll just click here on this Plus in the layouts uh in this one I'll just uh find the header I want I think this matches with my requirements very well this one so I'll just go here and I'll just drag and drop I don't have to do anything else I'll just drag here and inside that they might have used the container or something container they already have container let's not use their container let's use our own container so here we have our own container and and uh let's not use the these things I think I don't want to use them Let's uh use our own container let's make it auto from margin Auto setting Auto means uh it will leave space from let's say if you set auto from both the side mean it will be in the center whatever the content size you have it will be in the center okay so for this one background I want my background to be white I don't want to use any predefined color here let's uh take it as an example here the image I'll just choose my logo here I have my logo what are the links I have home features blog and sign up right home features and block so here we're going to change a few things let me delete that did this delete that and for this one I'm not going to use the primary given I will just use my own button the smaller one I think we had right get started let's use sign up sign up sign up so this is my button from Top what is the Ping from Top it is 16 let's add a 16 from top 16 from Top ping uh I think that's it see our let's go go and see the size of this one 14 pixel regular and this is the color for the that one here enter normal we already have that for all the naings that will be our color let's say if you want to make it naing the medium let's make it medium right so this is how you can make it and what is the spacing spacing is like 24 let's add 12 12 from sides right now it is that much I don't want this uh margin there I just want 12 12 12 and 12 means by default it's like 12 12 here I want 24 again but how can I do that uh I'll just add uh a class here called M M for margin L for left and a high one let's say 12 because I already have 12 right so I'll just add these and I'll just add Mar 12C this is how our would look like as part our design that is our header see it's it's easy right it's super fast you can use vlow core library to create layouts so not every time you have to create these things from scratch because it takes time so you can use these you can clone some items if you if you want to if you want some inspiration you can go to our website and find more inspiration on how how we use components to create uh these layouts faster right so now we have our this ready now we have a see this is mobile responsive right we will change this later don't worry about that uh that that we had now we have a section inside the section uh we have container the one we did earlier so here I want in this section I want uh image I want this content with this button and uh let's let's see the the padding we have from Top from this menu we have 80 from top and from these uh logos we have 67 right I I think that's fine because logo uh that image has that opacity down there so let's say here I I'll just choose that section from Top I want to leave ad and from bottom also leave let's say 64 not 67 but 64 now your container will be in the center so here I want to add a d block or you can say let's say here you go uh in the elements V flx right means vertical flex and S Flex means horizontal Flex whatever you will put inside this V Flex it will give you structure like uh this right so let's add a v Flex here inside this container I'm adding a flex block block vertical by default it is vertical so what we had there we had a heading we had a paragraph and uh we had a button right so now it's not looking properly the way we want it right so here in the flax box you see all these properties aligned aligned right now it is aligned to the start wherever you have a box from the start it will align your content what if you align your content to Center if you do Center if you hit center button here your content will be in the center if you hit end then it will start from the right hand side let's do Center because that is what our requirement is and uh still the content is not in the center properly because this paragraph is going outside right it is starting from the left line so what what I'll do I'll just scroll down a bit in the style panel and I'll in in inside this typography I have this align again for the content text I want to make it Center see now it's the now it's in the center so let's go and grab our copy here let's make that uh here I'll show you a Max width how to use a Max width for this content in a while try scale for free here I have a button I have this button should be large right so let's use button and let's use large simple right once you have everything predefined pre-built a style guide then it becomes very easier for you to build any layout any pages in wlow whether in framewor or V Studio you have to create this style guide make sure you always have a style guide with you so that it's easier for see 24 24 we have so here I choose this flax box box and the row Gap I have is 24 between all of them right so from these one I just want to remove these uh margins given by default I don't want them because I'm adding manual manually row values the gaps we have for this paragraph also given by default is I don't like this okay so now as you can see here here if you click here on this uh paragraph it says that here in this width one it says 451 right so let's go here to make how you can make it just like we did container how we Auto align them right in the center we can do the same thing here let's say choose your paragraph Max withth insert Max with 451 and uh okay I think we don't have to do that because we are already using flx boox so that it is already setting up your content in the middle okay that was your max withth so now if you just uh review this here one click review this and this same right so this is how you create sections and content within my flow okay so I think uh we have some speeding here also so let me see 99 right okay 99 inside that you have nine and inside that you have nine okay now it looks perfect to me okay see okay great I think uh so far it's good right hope you're enjoying this if you have any doubts please leave a comment I would love to help you out with your queries uh now let's add this image I'll just go up here after this block I will add that image but before that I will let me add that uh V Flex again V Flex again here here again I'll hit control e and image I'll choose that image from my assets uh let me find that image let me find that image let me find I think this is the image okay this is the image I look was looking for and I will again make it in the center and I I would like to put some padding between the button content and the image 56 as you can see so let me put some ping from top or let's say margin 56 okay so now you have a nice looking header area hero area whatever you can Sol the fold area right that is built uh with f flow without writing any code right simple uh what else we want to do we want to add these uh logos we want to build these layout also okay now let's start with the logo section so what I'll do now I'll just uh copy paste uh let's not copy paste uh in this one let's let me create another s section this section inside that I have a container and container I will always give that container uh style that we have already created so that it stays in the center uh this one has 67 from top and uh one Zer from one bottom but I don't want to add that now because we already have that here I guess 67 64 right so let's create that section as it is by default let me add some ping here so that I have something to create okay I'm just adding I will remove it at the end so don't worry about that okay I have a title so for the title I will use a Tex block a simple taex block and what does that title says join the join the for scale and that one is like 16 pixel medium and 24 pixel line height and it is upper case 1624 what was the color color was this one okay let's change its color to this and uh here to make it uh uppercase here you have to click on this more type options and select this one forer case for this one for your capitalize and for this one for your lower case right this one and I want these in the center and I want to make it like a medium so that I looks like that 1624 see we are building it super fast and now let me use uh again a flax box but a horizontal one I will go down here I will again put it inside that one and I will use all of my logo the logos I have click that uh image let's say this logo I have here 2 three four five I think I have five logos yes second one is Harvest Ed cut let's select this Harvest Harvest ede card don't worry about the layout now let's just add the content we have Ed card and then we have past and Infinity uh pestel and uh infinity let's look for Infinity okay so I have this flax box what I'll do already created horizontal because we have logos in the horizontal way I want them to be in the center okay I don't want them vertically but I want them uh horizontally Center that's why I'm using justify here okay uh I also want the vertically because if you look at some logos there from Top This is large so some logos might be large in terms of height so that's why you have to use this in the center align the center so that all your logos will be there and here uh let's add a gap call 48 as you can see we had a column Gap this time we are going to use column because we are working horizontally 48 for Logos 48 of G there as you can see we have our logo section there and we have a ping from Top it says uh I don't know 32 let's use from top 32 okay so now we have our logo here so far we have mostly used flax box right see the power of flax box you just drag and drop things and adjust them as you want and you'll have something uh that is given in your designs by your designer uh here we could have used uh grid also but I don't want to use grid for these Simple Thing grid can be used for this one and for this one right for large things okay so now we are going to create this section these feature sections and we will link all these sections a home features blog later right but uh for now let's build this section we will build it for once and we will use it duplicate this for these two times I'll show you how you can also this uh swap them uh here I have the sections I'll I'll just use this SE I'll just create a new section again section inside that I will add a container always make sure that you have you follow this process uh this section let's give it a name page section the hero one is the different one that's why I'm not taking that one uh here I have the Ping for section is 104 from top and bottom let's use that top and bottom 104 one4 inside that I have a container inside that container let's give it a name I have to give it a name container stays there and uh here as you can see we can use is a grid a two column grid uh one for the image and one for the content let's add a grid here I'll hit control e type grid so I have grid I just hit enter so I have a grid now inside this I just want only one row and two columns columns I have two columns Row one here there are two rows I don't want them only one row two columns and what is the gap between them what is the gap between them uh let's is the gap between them 11 19 let's use 120 120 of of the gap of that uh four four four rows let's use let's say 40 I think that is good for the mobile one here I have uh I think I think let's not use 120 let's not use let's not use any gap for now well let's let's use them later so I will add a du block inside that grid I will copy paste that d block again means I have two D blocks for two columns so one for the first one second for the second column so here uh I have the image so I will just uh pull my image and just drag and drop your image you can do that too so this is my image so here I have this image and I can put that image inside my du block I have my image in the second d block for the second column I have heading that is H2 see H2 and you have paragraph and uh what else do we have we have a button a small button so that is fine a button here we can use a button class we already have here for the small button heading what is the heading title heading title is that uh what is the paragraph parag is that okay okay now we have this H2 let's again uh remove that zero zero I don't want them because I mostly use flax boox okay so now uh this content is like 15 and 24 so here from this bottom let's add 15 or let's say 16 and below this uh paragraph let's say 24 I always change these names I don't keep it like this it's not a good practice always make sure you give a proper name here is great right let's say uh it should be like feature features grade means if anyone is working on this project your partner or your team uh teammate right they know what is this grid used for like this heading H2 give a proper name right now I'm just just to show you how this works not that's why I'm taking all these uh examples learn more text is learn more so here the content is in the center of the image so how can you do that in CSS grid select your D Block on the right hand side panel you see this align to Center so it's in the center now as you can see here so it will be in the center and the Gap we have is like 120 that I think we did it also earlier 120 and that's it you have a cap of 120 so here what's happening is uh you have this 50% inside this 50% we are just leaving padding from here so I think it is uh creating our section not sure right now uh what can we do here I think it's fine let it be like this for now right and the next one we can do something else uh let let me copy paste this feature grid two times so that we have a layout that we want here in the second one what I'll do is I'll just add a class combo class this is called combo class reverse right reverse and I want to send this in the last one see this is this is how easy it is right so now uh you have your content here so this is how your content will be when whenever you are creating this uh using this grid system in flap flow uh you have your content I know this should be here like this but let let it be like this for now I don't want to add a spacing there uh let's see the the gap between two grides 80 pixel let's add for this grid from the bottom add 80 so means all the grids that is using these class features grid will have a margin of 80 pixel but the the last one I don't want so margin bottom zero see I use these uh class names like this so that I know okay I here I'm putting margin bottom or here I'm adding a margin top for Mt for margin top ml for margin left all those kind of uh namings right for for my understanding how how what what they will do and all so here we have a section ready of feature section and after the features we have this grid section where we have a section title so lets to that uh let's go up here here I will show you another thing the naming thing that I was discussing about here this one let's go here let's delete this great I don't want that here I don't want uh I I don't want to even use this so let it be uh let's dat that so here we already have 104 pixel of pedding here I don't want them from top of my this section so what I'll do from here padding top zero and I will just make it zero like that so now uh that will be like a in sync right the bottom still has 104 because I have uh this section I'm adding 104 here that's why so here what I have I have a section so I'll I'll just use again uh V Flex V Flex I'll just type V and I have a flex and uh here let's use a heading here let's add a paragraph for Section title let's use the heading because this is good because we already using H2 for that one and here you have this latest news here you have the latest news here you have good question the sub paragraph sub headline here I will make it in the center the content is also in the center after that one what is the value 15 okay again the same one so not an issue 15 from that one 16 that's is the 16 okay so we have a section title now after the section title we have a grid system again 56 so let's use after section let's add 56 of margin bottom for the section and inside container add click on the container and add another grid and make it three column only one row and what is the gap between them 24 right let's use 24 for mobile and bottom both uh for mobile and desktop both here I have that one I'll just create one and I will use it for for all of my uh blog blocks I'll just create one here the One D I added inside that I have image so let's use uh image I have my image okay let's let's uh okay let's create this and I'll show you how you can add CMS here and I have another heading and I have paragraph and I have a link block button link block means I can add image I can add icons inside this link block that's why okay so now uh let's say a text block is there and uh let's use an image here for this icon we have let me go here and Export this icon for you team icon export and uh I want these in the PNG format only I'll just use that PNG I'll just use that here again let's look if they have added not not added yet okay let's upload the icon icon is been uploading and now select that icon again here okay now we have the icon so let's make it flx boox here this link block click on the flax and I align item in the center and what what is the gap that we want to have here four pixel let's the column Gap should be four pixel here and uh this is our thumbnail this is our heading let's use uh H3 because we are already using H2 here and this is our paragraph or summary uh let's make it of this black color black and uh I don't want to use underline so that I'll use this cross icon here okay so this is my link uh what does it say learn more right so let's use learn more learn more so I have my card ready here that I can use it for my uh blogs so what I'll do I'll go to the CMS I'll click on the CMS now the fun F comes in create a new collection I'll create a new collection okay I want blog post by default WL gives you all these readymade pre-made collections that you can use for authors categories projects if you're creating a portfolio website then it's for projects team members if you are want to if you want to add a team member you can do that from here and uh just hit create collection let's not add let's not make it more complex now I'll just add fake dummy data given bylow add five items I want to add them here I have my five items here so now how to get those collections here so what I'll do I'll click on this container I'll hit come CR e and I'll just type collection list see collection if I just type call it shows me collection list I'll just click collection list okay so now you have your collection list uh then Source where the data comes from we have blogs right not from the e-commerce we have created this in the last video I showed you let's say blog post so it will show you how let's say you have five blocks right it will show you all the data that you have inside that blog post uh inside this list uh let's take a name of this grid and uh for this collection list let's make it let's give it a same name grid as you can see I have my grid here I have three columns and inside the grid we had created this du block let's copy that and put that inside this collection item I'm just adding that I'll just delete this because I have these items here see as you can see all the blocks that uh I have inside my collection list uh will be visible here eight items right it shows me eight items right now means three 6 and eight collection list here on my page you can see I'm showing only three blocks right so let's use only three let's not use many so on the settings of this collection list here you have fil sort order and pagate items or limit items I want to limit items by only three show only three items now how you can connect these items headings paragraphs and images click on the image come on the settings side here on the right hand side get image from the database it shows you the thumbnail right the thumbnail and what about the heading click on the heading the same thing follow the same thing here heading and here let's say summary post summary and for this link block click on this link block it will work like a link and this one is for our link page the detail page current blog post mean all the blog post if I click here so I can view this blog post page the detailed blog post page if I click this one the same thing and goes for other right so here I have content so I uh so here you can add blog like this in using the CMS we CMS easy and uh I think uh we right now we have to build these two sections so let's go again and create them let's say again adding a section inside that I can add a container inside that container okay let's let's set the color first section I'll go in the style I'll use the background color the one one we have saved earlier brand color and what is the gap I'm adding here 8080 from top and bottom for the Ping of the section 80 and 80 inside that I have this content container and let's give it a name again right uh G name uh you have content to column grid again let's use a grid make sure you always name your grades and your items here just for the demo purpose I'm not naming anything uh 120 let's use 120 again 120 okay here on the left hand side column First Column for the D second column for the D here I have heading after that I have a paragraph and after that I have a button okay and uh on the second column I have uh image let's use that image here I think this is the one that I'm using there okay let's make this D Block in the center you know this now that I use this align to make it in the center and uh here you have this content it says encourage first I'll I'll change the heading style so don't worry now sh call and below this I have a simple text block I can add that I can add that sorry for that can add that uh not required okay okay I'll just do this that okay so this is my I think we are using H2 here so let's use h H2 here let's make it white okay this one is my white color and this one is also white but little bit off white so I'll just uh use a random color from here and for this one I'm using button button large but I'm using a white button with a black color so button large just add another white here select white for its color go to color select black so now you have your button also like the design and no credit card required is also using this color so let me use this here let's use that here again okay so we have our heading paragraph and all let's use some ping thing 24 24 let's use 24 24 let's use I'm not using a flex box here right the moment let's using 24 right I think this can be 16 for better visibility and for this button for this one okay for this one I don't know why this is clicking two times okay from margin Bottom I want zero zero and from Top let's say 16 or8 okay eight I'm using eight from Top okay so I have my CTF block ready here and uh and what else I have I have this footer so for footer let's look at vlow and see if they already have any footer sections for us uh uh let's see layouts in the layouts I have this hero f f fter features testimonials and the Footers we already have but let me see if we can footer F dark foter light fo light okay let's use foter light okay I think we have something down here and let's not use the let's use our container let's use our container to match with our brand here we have uh we don't want to use this because we don't have that uh thing there uh here but we can use okay let me use something down here let's use logo let's not use any TXS there let's use logo like web flows right and you have links get in touch and app download this links you can change this I I'll just show you get in touch and download so few things we don't have we will remove them links for links uh what what is the font size 16 pixel and the medium with black color medium 16 24 let's make it 24 and uh 1624 and regular okay let it be like this let's not use that and let's use our color what was our color 6 C that color we had and here's that here okay so I think we have something down here uh [Music] now not going to add these links now let it be like whatever is webflow is providing and let's add this app download I we don't have that right we we will customize whatever they are providing we will customize them so here as you can see uh here we have this form block we don't want that form block the last one we don't want that form block what do we want we want want uh app download So as you can see it's not properly like what we have on our design so I I'll just change that in a while so here we have link BL to from Top it is 20 so let me use a link block and inside that let me add this one let's say we have Google we have App Store link Els okay I'm not pasting them inside okay from 20 we have 20 from Top we have let's say 20 uh two link block two if you just write and use the existing names you have here I will use I will use App Store icon okay I think uh we have something that is already there let's we don't have this let let's keep it like this I think it's looking good we don't have anything here but let's give it like this where they have this and footer from bottom they have this one I don't want that port line top is fine right let's change this to our okay so not looking like this right right uh these are on the side and this is on the left hand side let's make it like that so here there are using a flax box and I mostly don't use flax box when it come when it comes uh to let me first use put this here I don't use flex blocks when it comes to footer because Footers I always prefer to use grid CSS grid I want to have let's say uh let's say 1 2 3 4 four column grd right 2 4 and only one row there and here what I'll do now in the grid I'll just uh drag this first one the F I'll just drag this on this side so that let's say 5050 something like that three so now if you look at this and our design it looks little similar so here we have this create all let let me use a heading that we have here also let's not use the logo I don't want the logo because I want it to be like our design here I think we can use H2 or H3 and uh get H3 and uh here we have app after app we have new line so I'll just hit enter shift enter for that in inside that line okay here let's use this zero so that everything is align top I think uh this is how you create in wlow see the design we have I'm keeping this I don't want to remove that one okay let's let's remove that this one we had from there okay so I think this is it uh here our landing page is ready so now let's say let's call it this section let's link them up with this uh inline or on page linking right section linking let's call this section for section and call it hero and the section was this one is like features this one is like uh news this one is like CTA and this is our Foo I think we don't want the footer now so home home click on the home link on this uh right hand side in the section this one is the page section the third one it says pay section I want this to go to the hero I want this to link to my features I want this blog one to link to my news and I want this sign up uh to link to my uh CTA so as you is you just click here let's say home your home your block click block block if you click on sign up it will take you to sign up section so this is how you can link this uh in line one so this one also again I think we can use it for our hero for the home hero that's it I think uh this is how you create a landing page in wflow I hope you have learned something from this video uh it's we have mostly used flax boox and CSS grid and the style guide that I have created initially uh to create a layout whatever kind of layout that you have in front of you you can easily convert them uh with this system that I just showed you I use this system in all of my client's projects and my own projects hey guys welcome back to this video in the last video we have created a desktop version of our website landing page that uh we are converting from pigo a design tool to webflow website page in this video we are going to make the website page responsive mobile and tablet responsive and we will also add some animations so that it looks a little interactive right so let me shrink my video here okay so as you can see here uh the page is in desktop to make it responsive uh changes uh click on this tablet B version right uh on tablet to me it looks little good uh this is not naar requir some Let's see we add some uh pedding here for no let's say 16 from that and 16 from here on this side so it looks nice and for section for the zero section let's add some ping from 16 from there and 16 from here let's uh let's add padding to our container means uh because we are using the same container everywhere right so let's add padding to our container 16 and 16 from this na bar let's delete it so this is the benefit of using classes right I'm using this container class on every section right and if you are using that one and if you make one change it will affect on everywhere where you have that class and this looks nice to me okay here I think we are we are using but uh this is 100% but let's uh since this is a flax box let's make it uh like add a wrap wrap means uh if your content is uh overflowing from that flax box right if you add a wrap this wrap then whatever the Overflow content is there it will go to the next row uh here we have these 48 let's make it 40 and let's make these 40 as well let's not make it 40 and that's uh too big that's 24 and uh I think that that's fine let's let's do 32 and fit all of them in same Row for these one if if they're allowing h no it's not looking good so let's make it 40 and uh 24 row and what else do we have uh this section looks good let's just uh remove padding uh between these uh two columns right now it is 120 let's make it 24 24 is fine see everywhere it will be 24 uh what else I think this is fine for now this section is fine for tablet version uh this kind of designs are fine mostly at here I think we have a gap that we had added sure let's check okay 56 let's make it 40 and uh here we have some Gap let's remove that Gap 120 to 24 so that it looks nice and uh I think uh here the Gap we can reduce is this one let's make it let's say two to FR so that it fits very well see as you can see it it fits very well here uh this pedding I think uh on the D on the tablet version it looks nice let's go to the mobile landscape uh here it looks nice again this part uh this part let's try to reduce this piece and fit them well okay now I think fine 16 16 is too much 8 8 is fine I think this is looking fine to me okay now so for this one I think we need one column here because uh it's not looking good here so I'll just click here on this grid I'll come to these columns I'll just delete a column from here if I delete anything here it won't affect here or here on this desktop or tablet if I make any change on the mobile side it won't effect on your uh bigger versions bigger devices right it will only affect to the smaller versions if I make any change on the landscape the only changes will be affect to landscape and the mobile version if you look at here only that one not the bigger one keep that in mind here we have page section 80 I I I want 64 or something let's say 64 for top and bottom uh okay I think we did uh something like we had change this one right I think image we did so image here earlier it was set to let's set it first so let's say we have image then content image and content for features section and after the future grid we have 80 pixel off let's make it 40 or let's make it 60 a little bit less and uh and okay this one click on the grid we have click on the grid I want only one column Gade here with the gap of 32 because that that is perfect now I think right and here I want uh single column grid again and in yep and for this one I think it's it's fine 8080 let's make it uh 60 60 I think this is fine and for this one let's not go like this let's make it one column also one one one and this is like one column and all the footer will be like this all of your phoo will be like this now I think this is fine to me uh Gap what what is the gap we have here what do we G 80 let's not make it 80 let's make it 60 so uh we don't have lots of wi space there let's make it 48 and I think to me it looks good and do we have any space from Top yes let's delete that 16 I think this is fine perfect see in just five minutes I think right uh we are almost done with our responsive page uh this text is Big let's make it smaller let's make it 40 or something let's make it uh 40 and 48 I think this is fine but I I don't like these uh one so let's make it 36 36 is good 36 and 44 it's fine what what is the gap we have on about this one or gold button after the okay we had uh this one so let's say we make it 16 so I think it looks perfect now the image you have all these uh logos you can change the logos if you want you can use grid here here to show them only one or two columns here I think these are fine for now I think we don't want to change them don't want to change them here uh this heading I think it's not looking good it's it's too big let's make it uh 32 or something okay 32 and 40 off line height and I think to me it looks good uh What is8 let's make it 8 and this is fine 24 let's make it 16 so wherever we have these classes it will take that one and uh I think uh yes uh this is looking good so here our landing page Gap and uh what Gap do we have here let's we had 40 let's make it zero so that we have enough Gap and uh let's select the grid again and let's make it 32 so that uh they have enough space between those sections and we had this fin a link and let's make it like a 16 or so uh from 80 let's make it 60 and from bottom is fine to me for now okay so this is your responsive landing page Mobile tablet and it fits very well on your that one mobile size okay now let's add some animations quickly so whenever uh my page loads right when these sections comes into view I want to add animations like for this flx box click on these interactions here click on this element trigger I want to do scroll into view here here you can use page load animations and all those are Advanced things you can check check out my YouTube channel for more videos on that one I want to use slide I want content to come from the left hand side uh with let's say a delay of 100 or so and for the image I want my image to come from when it's go to view come from slide come from the right hand side and 100 again just just have a look see a smooth animations right uh it's not uh Advanced animations it's just the B basic animations that you see on most of the websites and I think these are these animations are good for page loads right uh it won't uh take too much of your time to load your pages when you are applying for Google uh speed uh score that one uh this one I want this to come from the uh let's say that one was um let say let's grow this when when it visits 115 uh offset is 15 means uh 15% when 15% is passed then it will work like this see animations like that and for this one let's use again that the same animation slide in from left I mostly use 10 100 here again the same animation but I will change the the flow from right side then and 100 and here the same thing we used for for the first one when this SCS into view I want it to come from the left hand side 10 and 100 let's preview the animations now just check out these animation see how easy it is to create animations in wlow again this one uh let's uh if you want to add you can add that scroll into view slide bottom let's not use bottom let's use let's let's use something else let's use fedin right 10 100 feding animation and uh for all these one let's use for this collection to make a scroll into view slide from bottom that and uh this is how I use animations in mylow so for this one Let's uh make it more interactive for the select a d block the column inside the column we have a d block select that one and scroll into view slide I want it to come from the right right side and for this one I want it to come from the left hand side okay now just have a look see uh both will like it will come from the opposite sides so I think it's good and uh again for this [Music] one let's not let's add this animation for the whole footer uh whole footer animation scroll into view I want it to come from the bottom 10 and 100 just check out the animations we just added in 5 minutes in 5 minutes we have added the cool animations or scroll animations when something comes into view and that that part interacts right that smoothly comes into your page so what else uh I think I think that's it and uh the second thing I want to talk about is the how animations for these buttons right now nothing happens right when you h on these one so let's do that let's select this our main button uh here we have large uh for temporary I will just let's look for the small button we have here we have a button click here in the style panel on this drop down and select hover when someone hovers on my website what do I want to do I want to change my buttons color to little lighter and click just outside and click the button again and add some transitions right so what are we doing we are changing the background color so select here background color and keep as it is 200 right and just look at this see the way it changes the color or that button when you h on that button all the button that has the button class will have that effect now so we already have it for these on if you look at here so not going to do that so this is how you add animations in w flow now these things are done what we did we did uh desktop version mobile version we added animations now what else is left the SEO right to add SEO click here on the page page leg icon click here on the settings here you can change your SEO title SEO meta description and SEO open graph title this you can keep same this as for this this is used for the social media if if you want to change you can change them this is open graph image means if you share it on your social media the image you want uh people to see right that that image will be shown that you can add here and your custom code you can add here this is how you add your SEO now let's publish your website how can you do that click here on the right hand side top here you have to add a custom domain to add a custom domain you have to buy hosting so how can you do that so you have your website here click here here and go to the side settings inside Set Side settings you can purchase your plan let's see uh here in my plans our website is static uh we don't uh have CMS right I I think we have CMS right for blog sorry so then we have to go with this plan CMS plan if we are not using CMS then go with this plan if you don't want to add a custom domain then go with this free plan just add click here select this VL crash course this staging domain publish to selected domain and you can share this uh link with anyone you want but if you want to add a custom domain your website.com right and get this plan static for business and e-commerce plan they have different different plans right you can choose anything that you want once you get a plan go to this publishing and here add a PL a custom domain right now it is asking you to add a plan that is what I just showed you before and you can do that thing from here uh and I think that's it for this one let me bring this up so uh I hope you have enjoyed this series uh we have created a Pixel Perfect website from my design file to wlow I showed you uh what things arew in wlow how you can add animations how you can add SEO how you can make your website live how to make your website responsive in wlow and uh that's it for this video and if you have any query any questions just leave a comment or you can reach out to me to my website I I like to help you guys to learn more about no code tool so that's why I'm coming coming off with frma week studio and we flow videos on my YouTube channel so don't forget to subscribe my channel and uh like my videos bye

Channel: TweakDesigns. - NoCode Agency

Views: 5,171

Keywords: webflow course, webflow tutorial, webflow for beginners, webflow tutorials, webflow style guide, web development course, web design course, no code course, no code website development, no code website tools, webflow course free, webflow animation, webflow cms, webflow seo, webflow pricing, webflow responsive, webflow 101 crash course, landing page in webflow, responsive landing page webflow, webflow full free course, webflow beginner tutorial, webflow training course

Id: EXRilLzweKI

Length: 99min 30sec (5970 seconds)

Published: Wed Feb 14 2024