Framer Crash Course - From UI/UX to Frontend with No Code

what's up everybody Gary Simon here so today we've got a juicy one for you we are going to be designing a building this landing page right here from scratch within framer who's the sponsor of this video now if you've heard of framer before you may not be aware that they've recently updated in a big way which is what this video is all about [Music] framer is sent around a design and published workflow meaning you design a website like you normally would you include how the breakpoints look you add different pages and essentially draw the entire site and then you hit publish and voila you've skipped the entire front end and back-end development process and if you need to make updates then you make said updates in framer click publish and it's ready within seconds you can even include effects like scroll activated animations and even have a Content management system that you can integrate it takes your entire design and turns it into a performant website so as always make sure to subscribe and let's get started alright if you go to file or frame it rather new I or create a new document wherever you're at within framer this is what you're going to be presented with now before we actually start designing and working with this I'll do a quick overview of the user interface so on the left over here we have this sidebar and it's structured into three different tabs you have your pages which is outlined right here I'm going to give you a few to start with you have your layers as well and when you select this you'll see over here we have your different properties this is your property inspector very typical sort of UI pattern for design apps and then we also have assets over here this is where you change stuff like your Styles uh that you can reuse all right so um you have like H1 your subtitle section and we'll be working with this a little bit as well up here we have a menu where we can choose to insert uh different things so they have video tours up here in this section we also have a basic section over here where you can put in things that you just might commonly use like a carousel or a rose columns we'll get to that stuff as well YouTube over here we have layout there's a lot of different predefined layouts like hero sections up here things that I you know are pretty much responsive already for you we have navigation elements like Footers sidebars and top primary nav bars we have elements there's a lot of different elements in here like you know like maybe you need like a logo trust section or so um there's just a lot of them scrolling down here and then we also have CMS content we're not going to really get involved with the CMS here but just know that you can't actually have a Content management system back in in your project we also have audio e-commerce forms icons there's a social section for like linking Facebook Instagram post Twitter Etc et cetera et cetera we have utility and then video down here which will work with a YouTube embedded later on we have a layout section where you just quickly access those rows columns uh a wrap section and a grid we can create a new frame here text and then again content management system up there up here in this upper right corner we can click play to actually show what our site looks like in a responsive fashion as well and then publish over here and of course the settings I icon we'll be working with all that stuff here as we work so let's go ahead now and get focused on the actual nav that's the first thing that's here and by the way when we switch to layers we'll see that this one is outlined in purple uh it also has a stroke that's outlined in purple and that means it's a component all right so it's a reusable element and we when we want to make adjustments to something that's a component we double click and it takes us into this breadcrumb navigation where we were prior at home and into the edit portion of this component so components can also have variants here just sort of like how figma handles it and you can see it's a responsive I I basically designed for for a phone where you can see like what the the mobile nav looks like and then we have our tablet and then we have our desktop now one thing that's real important is when you want to make an adjustment uh and have it apply to everything like for instance the color which we're going to do uh you start you could start with desktop and it will Cascade down so your change is made over here will also be made over here but if you made one at like say tablet it won't affect the desktop it will affect mobile okay so let's change this I want instead of using a white background color for this design I'm going to use something that's uh kind of like an off-white that has some blue worked in so if we select this we'll see down here at the fill we want to change that here to a color code E2 e c e b all right so if you want to follow along that is the color code so we'll just go ahead and make that change kind of hard to tell that we actually did change it but it is you know just slightly off-white next up after that we're going to go ahead and change the logo now this is just a word Mark based logo I.E it's not like an SVG or a PNG file uh we could just double or we could just select it rather and then we could change under content right here the name so I'm going to change that to Mystic period mountains all right so we could see the change and notice it updates over here as well so with this I also do want to change uh the typography that's associated with this project so remember when I talked about our assets under the style section they're using man rope here for the fonts now I'm going to use a font pair and so I'm going to make these changes right now just so I don't have to keep on reverting back to the style section so I when I zoom up here and I choose i title we're going to change this we're going to be using a serif font that I like a lot called Playfair so Playfair display we're going to change that and if we hit back we also have access to other things so we have access to a breakpoint section like for large medium small and where we can change the font size and stuff like that uh for me we're going to be leaving uh we're going to change the color here just to all the way black and then I'm also going to change the size all right so our H1 element is going to go from 40 to 46. all right and that's pretty good and I'm not really going to be messing around with the break points of any of these and then I'm going to go back up here and we're going to change the subtitle and I'm going to change that to play fair display as well and for this one I'm going to give a size of actually I'm going to leave it now oh we're going to go I'm going to do 23 pixels right there and make sure this is black we'll go back and now I'm just going to go ahead and time lapse this part because I'm going to do the same exact thing just except change the sizes I'll show you the sizes afterwards now I also want to add two more so if I go over here click plus and choose text style uh this would be a tight paragraph we're going to call it a secondary paragraph create I'm going to now add another one underneath that and we'll just call this small paragraph and once again I'm going to go ahead and make changes to this I for these type so this type is can this time they're going to be Poppins and this first one for secondary paragraph will be a font size of 18 pixels all right just going to make it black for now I may have to come back and change that uh text size afterwards and this one right here small paragraph is going to be Poppins as well and then we will change that to a size of 16 down here okay great all right so now what we're going to do is I'm going to come out of here and I'm going to take our logo right here and we're going to change the style here so I as you can see under style we have at the top here we have logo link and we can see it has a color um which is black and that's what we want and when you I click edit on these you can change the default color you can change the hover color in the current color so for us we're just going to keep this uh black move back here and right now this particular logo I text is not associated with one of those styles that we just worked with which is fine I it's not something that's repeated in other areas anyway so we could just leave that without a style but we do want to change the font so the font down here will change to our Playfair right here and you can see they've updated right there okay so now what we'll do over here is we're going to duplicate this I want to have three links so just hit Ctrl D or command D on Mac and it will replicate it when we select the first one we can come over here to content and change that to home this next one we're going to change to tours this is going to be for like a fictional travel company and then the next one will be just a lowercase contact all right now we're almost done but we want to uh make these so that they're associated with a style and they are and that's currently under the paragraph style that they have all right so if we click on this we'll see it says pop-ins I actually want to change this here from Poppins to our Playfair display there we go and under color we have what's called top bar link for Style so we're going to edit that and we'll click edit here and I just want to change this here to Black all right so now we can get out of there and then that is our navigation all right great so let's go back to home and there's our navigation okay so I right now if we select this and we hit play we can see our any if you come over here and you drag this you can see how it's responsive by default now of course this not truly responsive because we haven't added a phone breakpoint yet but we will in the future just know that you can come here and see what the design uh and how it will behave essentially in the browser and it's really fast you know uh things like you know software like figma sometimes it takes a while to load but this is like instant it's really cool okay so now we're going to go ahead and work on the hero section so for the hero section I I want you to go to the YouTube description here this video and you can download assets and there's only three pictures and these were pictures that were generated from mid-journey AI art generator and I actually did a video tutorial on how to make this exact design or almost exact design with the help of AI so if you want to look that up I'll remember to link this in the YouTube description as well so what we want to do is I want to have a hero section and for me I personally we don't want to use any of the hero sections that are found within layout uh these predefined ones I'm going to show you how to make your own layouts which is going to be really handy because sometimes they're not always going to have what you want so what we're going to do is we're going to click on layout and for layout we're going to choose columns here and we're just going to drag out an area roughly right around here now one thing before we continue we're going to select this uh overall the frame at the top here and what we want to do is we want to add a layout and we want this everything to be kind of like stacked now when you choose layout you have the option to choose from stacked the direction for columns versus rows we also could change it to grid but we also have all these other options that we're going to have some experiment we're going to experiment with so we want to change distribute to uh top all right now for a line for for this element no it no longer extends all the way out so if you have something like that you want to make sure you select it and then you check out the size the width because you have different types of widths and Heights that you can choose in terms of your units so I you can choose relative fill or whatever well we want it to be 100 so we're going to put in 100 and there we go now it extends all the way out now there is a gap between this section right there so what we could do is Select this and you can see under the Gap property it's at 10 we want to change that to zero so now this is behaving how we want it to um and you're not going to have sections overlapping each other um due to the width of the viewport and things like that okay so what we're going to do now is switch to layers and we can see this is I it's denoted as columns and we have a frame and a frame inside of it we can delete one of these frames because we don't need it and look at that very cool what we can now do is first let's take this Frame it has a blue background so if you come over here under fill you'll see that blue background just hit the X and now we're going to select the columns itself and we are going to give that a background so under fill we're going to go ahead and click on the fill and it gives it a fill of white by default I'm going to zoom up here so we can see this in under image we can now drop an image and drag it from a folder or a desktop in order to upload an actual image now this is the point which I want you to use the mountains.jpg file from the resources so I'm going to drag it from my desktop which you can't clearly currently see it's on my second Monitor and just put it right there and there we go that's exactly what we want now you can kind of notice there's a little bit of a gap here so we're going to take our columns here and we're going to make sure that our width is set up properly and it's not it's a it's almost at 1200 pixels but we need it to be 100 we want this particular thing in this this image to say 100 of the browser width all right great now another thing that we will be changing here is if we select our columns is height is fixed at 460. we just want to change this to fit content and that will set it to Auto for the value all right so we have we have no content in here except for this current frame and so what we want to do now is I'm just going to double click in here and it will automatically allow me to start typing something so we're going to say aspire to reach your dreams okay so once we have that and it's now selected we can come over here and Associate it with a style with our H1 now notice it has the font that we already chose which is the Playfair display and that's all well and good now we're also going to go ahead and just take this and duplicate it and notice if we duplicate it it's going to put them side by side but I want this to be like a small description I that goes underneath it so why is it doing this well if we come over here and you choose our columns we will see that the layout type is in direction of columns so we want to change this here to vertical or they refer to as horizontal versus vertical all right so now they're underneath each other at this point I'm going to go ahead off the screen I already have the text for this section and I'm just going to paste it in and as you can see it's it's uh quite lengthy but we also want to change real quickly the I the actual value here so um we're going to take this because this is like a sub headline it doesn't exist at elsewhere we don't have to associate it with a any type of style so I'm going to hit X on that and as far as the font we're going to use Poppins that's kind of like the the Sans serif font that we're using throughout and for the size we're going to bump this up from 16 to 21 down there and there we go now one final thing that we're going to add here um and we're going to change the alignment of this in a second is a button so if we go on the insert menu I and we type in button we can see that we have a predefined button element so we can just drag this and you can see when you drag something from this left sidebar you can kind of choose where it will go in the flow so we wanted that at the bottom now we're going to change the fill to Black and we're going to change the actual type here if I select it I'll change it over here in the property inspector and we're going to change this to discover a New Journey just like that awesome awesome stuff so now what we want to do is we want to take this rows section this Rose container and we want to First adjust the size for the size we want to leave it at one fractional unit right here to fill but we do want to add a maximum size as well I and so to do that we're going to click plus right here and then click Max width that's going to add this section underneath it and for Max width we don't want it to extend beyond 1200 pixels all right so now that sets it at fixed now the height we can also change this to fit content all right so now once we do that we'll see that we have some issues with the lack of white space and a rather dramatic fashion and of course we can go ahead and start to adjust that as needed so to do that what we're going to do is we're going to take our columns which is just at the top here and we're going to add some padding and so you can add padding right here in this section so we can take our padding and we can just say 80 on all sides so now if I go back we can see it looks a lot better now finally we want to take our rows and we're going to take our district our alignment and we're going to change that to the left and then finally we're going to add a little bit more white space and not sure if you can see it on my screen but you can see these little pink drag icons and we can add some space between these like so so now if I go there that works well and then finally we want to make it so that this collapses into two lines here so to do that we can go ahead and give this a value of around 490 pixels of fixed and then this one we can also use relative of like 50 percent if I'd use relative of 50 which I didn't originally do that here that should have the same effect as well now one thing I kind of don't like is the line height on this I think we need more line height so line Heights down here under the text section as you can see there's a lot of properties that you can modify let's go from 1.2 to 1.6 or so and that looks pretty solid so now if we were to hit play one thing that I don't like is how it's staying all the way over here to the left so to fix that let's take a look at our columns here and we want to make sure that distribute is at Center so if we hit play notice how it stays fixed in the center and we're going to make sure we do the rest of that for the rest of our content now of course if we come down here it starts to break and don't worry we will fix that in a bit but first we're going to get the rest of the layout situated here so on to the next section now just to give myself some more room to work with here vertically I'm going to pull this down and in our next section we're going to have another custom layout that we're going to create kind of a a three column approach and so to do that we're going to go ahead to layout and we're going to go ahead and choose columns and we're just going to drag out here somewhere here somewhere right around that size and now what we'll do is we're actually going to change this to rows sorry about that so if I change this the direction here to Vertical it changes this over here to rows we're not really going to have rows of content but I am going to delete this one right here now for this section the frame we don't need a fill but we are going to give a fill right here under rows for a little like a subtle background color it's going to be the same background color that we used up here and so the color code if we come down here is going to be e2e ceb it's the same color code that we used previously all right so now Zoom back out nice color scheme here what we want now is a section of columns so to do that I'm going to go back to layout and we're going to choose columns and we're going to drag just I an area of columns out here all right so now we have this inside a frame but we want to I oh it's not there let me delete that frame there we go so now we should have rows with columns inside of it so we don't need this and we don't need a background color so we can get rid of that and I can just left click and start uh putting some type here for this First Column so it's going to say all expenses paid all expenses paid rather money don't worry all right money question mark don't worry rather for this for these ones we're going to go ahead and use an H2 subtitle so we're going to take our titles our style section over here and we're going to choose our H2 subtitle right there great now we're also going to go ahead and duplicate this and again it's putting it into columns but we want rows so we're going to change the direction here and then for this one we're going to go ahead and give this a uh its own style right here we go back to choose to style we're going to choose a secondary paragraph there we go now for this paragraph type I already have that off screen I'm going to go ahead and just paste that all right so there's our very first column NOW Watch What Happens uh when we end up doing this we want to have multiple column multiple row columns rather so we have four one two three four right here now don't worry they're looking terrible right now because they're all overlapping each other um so what we have going here is we want to take this columns section right there and we want to make it so that it's already at we want to put one fractional unit for fill all right for height we want it to be Auto not affixed to 453. and we also want to Max width so we can just choose right here Max width and we're going to choose 1200 pixels so we want to keep that sort of thing consistent across all of our different sections now for this middle row we don't actually need content inside of it and you'll see why in a second all right additionally we want to change our distribution here our Direction first oops I'm sorry let's go back to columns so we want to take our text I for our Title Here of this first section and we want to change the width from Auto to a hundred percent and you'll see what that does it forces it to stay within this particular column all right so we'll also do that I'm for the take a journey text underneath it so we put 100 there we go and what we could do now in fact if we just delete those ones that way they're kind of set up a little bit better um and this empty rose right here that we just I just put right here with nothing inside of it the reason I'm keeping this is because we're going to use this to create a line separator all right so here's how we're going to do this first off the width we're going to change from one fractional unit to 0.01 fractional units so it's going to be like really small all right and then the height we're going to change to around 320 pixels and then we're also going to let's come out here select it again there it is we're also going to give this a border all right so the Border and just leave it solid and we want to change this so that we can choose which size which side that's going to be on so we want zero for the top right we can leave at one and the rest will leave at zero all right so now we can exit out of there and now we can see this line separator that we've created in the middle now we still have some issues with uh our our padding and such so to fix that we're going to take our columns and we're going to come under padding we're going to choose which size we want to apply it to and so we want to apply it to the right and left of 80. and 80. all right so now this is coming along and it's nice and consistent along the same column as the type that's above it in the hero section okay so now we want to go ahead and select our our rows or sorry our columns rather and in here we can increase the gap between these elements let's change it from 10 over here on the right in the property respecter to 50. there we go much much better looking so this isn't quite done yet I wanted to kind of emphasize this one over these over here so what we'll do with those is I'm going to change the headline I they're going to leave the we're going to change this to H3 rather sorry I'm kind of fumbling my speech uh so we'll we'll take this and change this to an H3 makes it smaller and then we're going to go ahead and change the type beneath it to small paragraph style so we'll go back here small paragraph and there we go and instead of having to do that with the other row we can just take this one and duplicate it there we go all right so that's it for this section um and of course we're going to make it responsive and all that good stuff by the way let's hit play just to make sure it stays in the center up that's one thing we don't want we want this to extend all the way out so what we'll do is we'll take our rows we'll make sure as you can see it currently says 1200 fixed we're going to leave that a hundred percent and then we can also make a height I to fit content which will mean it's Auto there we go all right so let's see if that worked drag it out and there we go awesome all right so the next section is actually going to be pretty easy now I'm going to make this or give ourselves some more height and we're going to have another image up here and so what I'll do is I'm going to take our section up here and by the way we can rename these by double clicking hero section here we'll take this uh and rename this to feature section so I take our hero section we're going to duplicate that except we're going to go ahead and drag it underneath and look how it shows up perfectly under there because we made the frame itself a stack container and we're going to change the background to a second image that's in our project file so this is mountain2.jpg all right so for Mountain two we're going to actually have a fixed height of around 1100 pixels so we come back up here change height from auto fit to 1100 pixels PX all right now we don't need a button down here I am going to change this here to Swiss Alps and then I'll go ahead and just leave the same type there now I don't want this type to be centered so if we take hero section I we can go ahead and move this to the Top by taking our line right here onto that option so now it aligns It To The Top now let's go ahead and play there we go one thing that is off however is I forgot to place on here oh it looks like we have an extra padding so something's not lining up where we want it to be and it looks like it's this section right here so I'm going to exit out of here I'm going to figure out what the issue is because right here everything looks fine but obviously if we extend outside of this break point of 1200 pixels uh there's something happening all right I found the issue actually the hero section down here it's not the hero section we'll call the Swiss Alps uh it was a duplicate of the top and we applied the padding on the actual parent container right here but up here in our middle section I didn't do it there I did it on the inner column section so that's the descript discrepancies I'm going to put 0 here and just apply on the parent element on feature section and we're just going to put I right here we'll choose right 80 and left 80. so that's the issue for that discrepancy so now they all are along the same column awesome okay so let's continue on and what we want to do is again we want to make sure that this element here is at 1100 pixels which it is because we want to see this bottom color here we're going to make the next section seamlessly kind of fall into place here so for this time this section we're actually going to go ahead and first create a column [Music] drag it out here we're going to get rid of the frame actually we're going to get rid of both frames inside of it and then we're going to go ahead and give it a fill now for this fill it's another custom color and that color is going to be one e one B two four hit enter all right so now kind of seamlessly falls together and we're going to use now a predefined section so let's come out here to insert and then under our elements we're going to come down until we see kind of like a frequently Asked uh question section right here right here in this middle version so if we click it we can see it automatically just kind of adds it into that rows element that we had created all right so now for this one it does actually end up overriding our color because the fact grid as it's called this component itself does have a background now this is a component so we have to double click and we'll change and remove the background fill color right here now I know that ends up screwing things up but this is actually what we look it looks like right now but we have to go ahead and adjust the colors to match everything as we wanted so we'll do we'll double click in there we're going to go ahead and remember we only have to change select this one to change the rest of them you can see how it uh in a faint manner we'll select the other items in the uh the variations so we'll go ahead and change this color to white and we're also going to go ahead and change these colors see if I can select these individually or together by holding shift make those white all right and then finally I'm going to go ahead and take these and I don't want them to be Gray so what I'm going to do is come over here we're going to go ahead and paste in that other color code which will make it the same color as the background but we're going to just boost it up here the value right around this color code which is a29ab1 I think that will work pretty well so we'll see all right let's go back all right that actually looks pretty good all right so now we have an issue where there's this is extending too far uh for height we have this where we want it to be um but the width is not how we want it to be uh just yet so the width we actually want it to be 100 percent and then we also we'll go ahead let's see here and take our rows above it and we want to make this so that it is a hundred percent under width and then height will be Auto okay there we go now let's go ahead and hit play let's come down and there we go it stays right there all right so now we're gonna go ahead and add another one of these sections let's give ourselves some more room here let's pull this down so I'm going to take this whole section this whips out section control D or command D and put it to the very bottom oops we don't want it inside of there though let's go ahead and put it underneath there we go and this is where our third and final asset will come in so I'm going to just drag in the mountains three notice how this kind of falls into place this one we're not even going to have any text inside just kind of like a cool graphic all right and then let's also just for the fun of it integrate a YouTube video and this is super super simple we'll go to Pages here or insert rather sorry about that and you can access this from video and then just drag in YouTube or again if I we have this selected here we can just go to insert and then we can just click it all right so you put it right here now sometimes if that happens because I had that selected by accident that's not what I wanted to do I we can just go ahead and move this out and then take Swiss Alps and move it up here there we go we want this I personally want this to extend all the way out so we'll take our width at 100 percent all right and then I'll go ahead and notice we can specify the actual YouTube video so depending on which type of these components that you use or these elements uh they'll obviously have the necessary properties that you need to be able to effectively use that so that's the same with the forms and all that other stuff so for us I'm going to go ahead and choose a video that I already have off the side you could use whatever YouTube video you want or just leave it the same there we go if we hit play we come down here be able to click the YouTube video and it works just like that all right so now we'll have one final section a footer so let's go to insert and we'll go here to navigation and footer and super simple I'll just drop it here all right and if you want you can go ahead and change the fonts and stuff like that I and then also also you'd want to go ahead and adjust the link to section so obviously um if I zoom up here I'll show you uh like here's an Instagram link and you can choose a new tab or not very handy let's go ahead and now just to make it so that the height of this Frame will always stay the height of um you know to the very bottom of the footer we can just go ahead and select the frame itself and for height we'll choose fit content awesome so let's hit play see what we look like here on desktop everything's looking solid I can come out further all right and then it starts to break I once we get in quite a bit so let's go ahead now and deal with the responsiveness so we come up here and we select this little plus icon and we'll choose tablet you can also do custom as well depending on the needs of your design so we're just going to choose tablet and there are probably going to be some things that we want to make an adjustment to for me this is still kind of okay but the text is a little bit squished so if you know anything about UI design then you'll know that um you need to make effective use of your columns verse rows given the amount of width that you have in the viewport or the device that you're working with so if we take our columns here under the features section for the tablet version as you can see we have our tablet whole section then our desktop underneath it so if we take our columns we can change this to grid alright so if we change it to Grid it's going to screw up the layout but as you can see actually it's actually almost what exactly what we want the rows however we want this to extend and when we select this it'll allow us to choose right under span how how many uh of the grid parent container how many columns do we want to span we want it to span two columns in one row so now if we go back to control F4 there we go and then we could also take this here uh and we can just delete it all right so that's looking a lot better right there now we are we do have one issue where we have just not enough white space on the top so we can add the white space right here um under padding if we select the features grid section so to do that um maybe I'll add 50 there and then 50 here all right now notice even though I deleted it here it's still available on our desktop all right so everything else honestly looks pretty solid and I don't need to make any other adjustments for our design here so let's go ahead and hit play now and see this change that's going to occur here in the middle feature section all right so it stays stay stays and then it collapses exactly what we want all right so let's go back now let's go ahead and add a break point for phone now this is where we're going to have a little bit more work to do because things start to break quite a bit all right so the first thing we're going to do is we're going to work with our nafs or a hero section rather up up at the top so for our hero section on phone we want to make this so that I we reduced the amount of padding that's on the left and right so if we come out here we can go ahead and change our top and bottom to around 60. and then also our right and left from 80 to 20. all right so I'm just hitting tab to go between those now next up we're also going to change uh the alignment here so if I select our rows here we're going to choose to Center all this all right now another thing we need to do is we're going to select this remember we gave this one a 50 as well as the one at the beneath it 50 let's just do one fr and then we'll also Center align the text and we can also do one FR as well and Center that text and this text is way too large so we can just drag this the font size down probably something to around size 13 or so discover new Journey that type is pretty big as well so let's try um around 16 for that and there we go now let's work on the next section so again we're going to take the overall features container section and do the same thing so we're going to change this uh the right to 20 and the left of 20. all right and then we're going to take our grid let's see what we have here for our rows we want to make sure these things aren't extending out all the way we also want to take the grid rather because we're going to stack all these into rows as opposed to two columns down here and just one up there so to do that we're going to go back to stack and change the direction to vertical all right so why is it creating all this white space so if we select on the inner rows we can see that it has a height of 453. we're going to change that to auto and we want to do that for these as well so take both of take both of these with control or command um and change these to auto there we go so now under rows we're going to change our Gap um to around maybe 35 that's the white space in between and there we go all right so let's continue on we have this section right here um we want to adjust this so that this goes from 80 to 20. all right and then let's see our distribute Let's see we have a start all right and we also want to change the size of that type it is quite big so we'll do 16. and we will also change the width to a hundred percent all right that's looking good this for some reason has changed uh colors I'm not sure if we duplicate it okay so it's not it didn't change colors there let's go ahead and choose this and simply make it white all right and notice how it stacked automatically because it's a component that's already predefined all right now this over here I would like to push these away from each other so we have this columns area um let's see if we can choose just to add padding at the top like 30 and 30 at the bottom much better all right all right so let's go ahead and see if this works and it may not your first try again everything's good here we come down we collapse our navigation up here works all right great so that all works well now let's go ahead and add and this is fun uh we can actually add scroll effects so if I come over here to desktop remember if you make a change to desktop it will Cascade down uh so if you want some of these things not to be applied to to um tablet or mobile you can make those changes over there as well but I want these to Cascade down so this is really fun to do what we'll do is we're going to select our uh column section under features right there and let's say we want this to kind of slide up I when somebody Scrolls down or when the page loads well we select it and under here over here rather we can see we have our effects so we could do scroll up here and what we can do is change this perhaps from slide in bottom to slide and bottom rather all right so now let's exit that let's hit play and notice how it's slid in from the bottom that's because it's already in the viewport and so you could add that to other areas in the design as well so for instance if you want frequently asked questions let's try adding it there so we'll go ahead and take our our fact grid and let's choose scroll up here slide in bottom let's hit play and there we go so you can have a lot of fun tinkering with that it's very customizable you could do that on your own time all right awesome so now once we have everything as we want it all we have to do this is dead simple uh is Click publish all right to control four and it is now ready it showed a little um link down there if you hit publish again it's going to show up and then you can just click this little icon to open it in a new tab now before we do that I just note like if you want to make an update like you want to change text or add a new section or anything all you have to do is just click publish again and then click update and it literally takes like a couple seconds so that's the real nice thing about this so now let's get this over here let's go ahead and view this in the browser and there we go it looks exactly like what we set up of course our YouTube plays here let's check out the responsiveness all right so tours again if I switch back here to the actual app and show you the pages section and we click on about for instance it's exactly the same concept you have all the same tools to be able to just modify the site design so for instance uh if you wanted to choose this background color let's say this one right here let's go to layers let's choose rows we'll get this color code right there and then we go to pages and we go to about we can change the the page background color here all right and then we could disassociate this title um or we could just override the title here I guess to and make it white and then make this text white as well and then just keep on making adjustments here um to the the layout as you wish and so contact page for four page etc etc um it's exactly how I would Envision you know an app like this I it reminds me of the old school days way back when when I was using I front page 98 and maybe macromedia Dreamweaver in late 90s early 2000s but this is a much more modern approach on it because you're just able to instead of dealing with code if you're not familiar with you know the million CSS properties uh you're able simply just to use this GUI essentially to create it because what you're all all this is over here in the properties inspector is just a visual way of defining CSS properties like in the flexbox and grid and all the other CSS properties that make a design what it is and make it look like what it is and in this manner you don't have to deal with code and I it just gives you a ton of flexibility obviously on top of all the different assets the predefined layouts they already have design so if you're not a great designer they've also taken care of that as well so I haven't touched on everything here obviously there's probably a lot more that you can learn especially with the content management system but hopefully this was a you know a quick crash course that will really see and help you see the potential of this app if you're somebody who really just does not want to deal with code but you want to have a site that's responsive and modern all right everybody hopefully you enjoyed that if you did make sure to check out framer.com who's the sponsor of this video I I believe it's one of the best tools in this space and I think honestly for people who have uh just the need to create a website and design a really good looking website and not have to worry about HTML CSS uh JavaScript as well I think it's an awesome solution so definitely check them out I'll see you all soon and goodbye thanks [Music]

Channel: DesignCourse

Views: 74,142

Keywords: framer, framer tutorial, framer course, framer crash course, framer web design, framer responsive design, framer gary simon, how to use framer, framer 2022, framer 2023, gary simon, designcourse

Id: alvy1hFow2E

Length: 50min 16sec (3016 seconds)

Published: Thu Sep 15 2022