LIVE WEBFLOW designing Tesla's Website

and let me see let's stream okay okay i think we are on hey everybody what is up and welcome to today's live stream workshop i'm so glad to see you all here let me know in the comments we're good you can see me you can hear me everything works well all right so thank you all for showing up here i'm really excited for today first of all this is really exciting day for us at flux academy because today we have launched our third edition of the webflow master class and we're running a whole promotion to talk about how cruel this new course is but we thought to start things off with this workshop to build tesla.com and show you how easy you can do this with webflow i'm going to aim to do this at least build the home page in about one hour and it's going to be pretty exciting uh so first of all i want to introduce we have khabarza on the stream with us hey barza what is up everybody kabarza is a webflow expert he's also a coach here in flux academy and he's also co-teaching the new webflow master class together with me uh it's been super cool to work on this project with you how how was it for you what do you think about this new edition it is super awesome you start from zero and then you become a master it was a lot of fun creating that and today is a very exciting day um i'm super excited to be here and uh guys uh just feel free to ask anything i'll be in the comments i'll answer your questions and i will also interrupt ron if i have to uh to just pop in with a question fantastic so we want to make this stream and workshop as interactive as possible so i'll be doing the teaching and i will assume that you know we'll start doing this as simple as possible if you're a beginner don't worry we're not going to overwhelm you but if you have questions feel free to chime in and then kabarza will try to help you out with that said and by the way uh let's see what we're going to build so this is tesla.com website and there's the reason i picked this is because number one it's pretty simple so that we'll be able to do this in one hour and teach you a bunch of stuff no we're not going to do redesign i saw in the comments you were asking if we're going to do a redesign i'm not going to do a redesign but i want to show you what's cool about this and what we'll try to cover today so first of all they have this very nice kind of like smooth snap scrolling so you can see as i'm scrolling it immediately passes down into the next section perfectly and also we have this kind of like the all the content here the model and the buttons are kind of like fading in fading out with different content on each section so this is pretty simple and i'll show you how to do this and my goal again is to cover the basics together with you but also show you how you can be creative about this so that you can achieve really cool cool stuff that's obviously good enough for companies like tesla the other thing that i like about this uh website is the the kind of uh the menu that they have here so they have this kind of like thing the the hover state here is actually just like following your cursor wherever you're going so it's kind of like squeaky going around changing size and i i like this and i thought now they've used a bunch of code to achieve this and the other effects and i was like can we use no code can we be creative enough so that we can achieve the same effect pretty much and not use a single line of code and that's my goal here my goal is to show you how you can be creative around web flow's interaction and animation so that you can create something like this but perhaps this gives you an idea on how to do something different so with that said let's get started now i've linked the i've downloaded the assets from this website and obviously i should say the design and all the assets are copyrighted to tesla it'll it's you know it's theirs we're just going to rebuild this in webflow now if you want to download these images i've packed them you know in zip file uh below this video and yeah you can work alongside with me so let's get started so i have a webflow project this is just a clean new webflow project and i've just went ahead and uploaded the assets we don't have a lot but that's what i have so far so let me get started now the first thing that we're going to do when whenever we're starting a webflow project is we're setting up the basic right so we're going to have a font that's we're going to use throughout the whole website and the font size and stuff like that those are the things that are going to apply to everything that we're going to put inside our body so the first thing that we're always going to do is going to change body all tags we're not going to add a new class because we want this settings to be applied to every page on the website now they're using i think this is got them here but i'm just going to use monsterat because it's a free font it's already included inside of webflow here and it looks pretty much the same so i'm going to choose montserrat as our font here i'm going to keep it as normal i'm going to put the size as i think 14 pixels and let's say 24 line height so that's going to be in color let me go and pick something like some kind of a dark gray so that's kind of like going to be the text style and that's that's the basic setup now here's how i want to get started um let's start because most of this website or the homepages list is very very simple it's the same structure we always have a section that takes up the whole screen and then it has some background image to it and on top of it there is some kind of content and the content is the same right it's always the model and these buttons so let's start by creating this component this section component duplicated a bunch of time i'll leave the navigation and stuff at the top for later on so let's start with the content and add the navigation later on so here's what we're going to do we're going to start off by adding a section so we have here section from the add panel and let's just take it and give it a class let's call it section um uh now here's the moment run uh yeah sure sorry for interrupting oh know now we see your screen okay oh you didn't see my screen up until now no i yeah no so this whole time i was talking about the uh tesla website and what's cool about it i wasn't sharing no the other is no it's it's cool now uh i mentioned the the designers um it wasn't shown okay okay but you saw when i was talking about this navigation and the snap scrolling and everything you saw that yes yes sorry it was just uh lagging a lot from the other screen i have oh got it got it got it all right okay so let's get started so what i have here in webflow you can see my screen right now right yep all right so we've had the we have the body now we've added a section now as i said all sections here take up the whole space right so what we want to do is we want to define the height of this section and we can do it from here and we want it to take up the whole screen so we're going to say 100 v h which stands for viewport height this basically means fill up the whole screen no matter if it's high or low it's always going to take up the whole screen so that's the first setup that we want to do now the second thing is that you can see that the content here is centered so the content is always centered so let's go ahead and center the content and i'm going to do this by changing the display setting here into a flex and then let's just yeah justify it to the center so that's basically what we have here for the section and all sections are going to look the same the thing that's changing with each section is the background image so i'm not going to apply the background image just yet i'm going to add the background image later on as a modifier actually let's do this right now so let's call the first section let's add a modifier and call it model 3. let's add a modifier model 3 and apply the background so i'm going to scroll here to the background and uh pick an image so this is the first image now the image is way too big so we want to make sure that it's covered so it's covering everything so it fits within the bounds of this area so i'm going to change the size from custom to cover which means it's going to fit it i also want it to be centered so in the positioning i'm going to change it to center now this didn't change anything right now but if we're going to have different crops for the images it always means that it's going to be centered so now we basically have a section next what do we have next now we have and by the way i can see i've picked probably the wrong that's not the i can see i didn't pick the right image but i guess it's yeah it's this one all right fantastic okay so now let's bring in the content so the in every website and this is a general thing that you want to always structure your website like this we always have a section that takes up the whole you know width of the screen and then we have a container in the middle because the content is not spanning all the width of the website and you can see it's actually contained within these boundaries actually the the the buttons here show you how wide the content in this area is so let's go ahead and add the container that's going to hold everything that's in here so i'm going to go ahead add a div i can add a div or webflow's container it's pretty much the same let's call this container container container and this container specifically i'm going to give it some kind of a max width so i think let's try 550 pixels as a max width and i'm gonna just set it to expand because we're in a flex thing and so this is where the content is going to be but you can see it's like top to bottom now actually it's not top to bottom here we're going to have space where we're going to have the you know the nav bar and also here we need some space now note that we have this tiny arrow here this scroll arrow which we only have in the first section so i'm not going to deal with this right now but you can see that in all other sections there's pretty much space here at the top and at the bottom so let's go ahead and do that by adding some padding um or actually let's add some margins from the top and bottom now we can do this in you know percentage or fixed pixels i'm just going to do this right now by hand and maybe this is okay maybe later on after we add the navigation we see that we need a little bit more space but right now i gave a little bit of margins from top to bottom and by the way i hold the option key if i want this to be symmetric the spacing to be symmetric which a lot of times in design you want spacings to be symmetric so now that we have this section here the the content the area for the content basically we need two different we have two groups here right we have this text group at the top and we have the buttons group at the bottom so that means let's wrap them in two different divs so that we can put them in here so i'm going to put one div and div is just a box if you're familiar new to web design and web flow div is a box that's holding content right so this first one i'm going to give it a class i'm going to call this text wrapper and wrapper is how we call divs that hold stuff together right it's like a group in figma or whatever so here's one that we called text wrapper the second one i'm going to call buttonswrapper wrapper now as you can see they're both aligned to the top and i want one of them to be aligned to the top and the other one to be aligned to the button so what i'm going to do is i'm going to choose this container and i'm going to turn it again from display to flex settings now flex allow us to organize the boxes within within the box right so right now it's they're stacking them horizontally but i want them to be stacked vertically and right now they're justified to the top but i can justify them here space between where one is at the top and one is at the bottom so this is now spacing them one at the top and one at the bottom and again because everything that we've done so far is dynamic right then it doesn't really matter how you know what's what screen size it is this is always going to stick to the bottom area and the top one is always going to stick to the top area so now that we have this let's add some text right so this is probably model three is probably the heading here so i can add a heading maybe like h1 usually h1 you wouldn't want to have more than one like for seo purposes but let's just do this really quickly and again because i'm going to have this repeating again and again i wouldn't want to give this a new class i'm just going to design the h1 classes for all the website and then let's go here maybe set this as 40 and maybe not bold maybe medium and add the text here now probably i would want to make the container or something like this apply centered text for everything between the inside the container so this is going to be centered everything actually is going to be centered so i can change the alignment to centered so we have this title and let's bring another text element and it's just a normal text element let's do order online let's do this this automatically became a link but i want to make sure that our links have an underline so let me go here change all links and make sure that they have an underline so now this is a link if i want to connect it somewhere i can connect it oh it's automatically connected very nice the copy paste works really nice um okay so we have this one let's create the buttons so i'm going to start off with webflow's default button and let's drag it here let's call this this is custom order right so custom custom order and let's give this a class of button now the second button is actually you can see that it's a variation of this button right so it's it looks just the same it has the same size the same tags the same alignment same corner radius it's only the only difference is it's white so that means we should probably have just a single class of a button and then we have a modifier to create a variation on that button so if we make a general changes to the original button they're going to be applied to this one as well so i'm just going to duplicate this so that we can look at them at the same time this is going to be existing inventory existing inventory all right so let's get started with this button okay it's called button fantastic what do we want to do we want to change the color to this dark gray maybe reduce opacity a little bit here we want to give it a round round corner so let me give radius corner of 50 pixels now you can see that this this words those words are actually longer than these but actually these buttons are the same size so maybe i want to make the size fixed here in this case so let me go here and do maybe 150 pixels um 150 pixels maybe more so maybe 230 that looks okay now i want these to be spaced out right and i can do this in multiple ways but because we already have the button wrapper and because we've already used flexbox to you know space between here top bottom we can actually do the same here and do left right right so let's turn the buttons wrapper into a flex and then here i do want them to be stacked horizontally and justify them space between so now it actually looks pretty good maybe this needs to be a little bit bigger so now we have the buttons so now let's create a modified version here let's call this maybe light button and turn this into a light color sorry not the typography the background color into light with a little bit of opacity and dark color okay so now we basically have the buttons now i didn't do this perfectly i can see with the spacing and the sizing i haven't done this perfectly but it's pretty much okay the section looks pretty much the same also the image size i can see that they have made the image bigger but let's roll with this for now okay so now we have basically one section and we have the structure so let's go ahead and duplicate this a few times copy paste paste paste maybe like four or five sections and now we have different sections so basically the only thing we need to do is you know change the text right to maybe model y on the second one and then we want to change the background image so instead of model 3 i can duplicate that and call it model y and then go ahead what is model y it's the blue car i know nothing about cars besides the color so okay so now basically this looks okay okay what's the next section so now you can see how easy it is right we've we have the structure bam now we can go ahead and within minutes have the whole page built so this is model s what is model s it's the other red car let's go ahead and replace that with this is the other bread car this is the other red car whatever what do we have after this we have model x okay and i don't want to bore you with you know all of the copy and pasting so i guess i'm not going to do everything just enough that we have something to scroll snap with and see that everything works so what is model x it's the white car it's the white car and then let's do the solar panels just so that we have one more okay solar panels let's duplicate solar okay fantastic so we basically have most of the structure of the page working so let's go ahead what do we have okay we have one more thing that i want to do before we do the snap scrolling which is the button that we have here so we have a button here and you click it and it scrolls to this next section so basically i can do this very easily right i can go here into the first section and i have this image arrow down and i can bring it down here oh it's pretty huge let's call it down arrow let's make it like 14 pixels or something okay so you can see it's here but we don't want this to be here now the thing is we also don't want to put this inside of our container because our container you know has this space between so it's messing up with everything that we have here so what i really want to do is make this arrow not mess up the layout at all just like it doesn't take up space inside the section just be on top of it and the way i'm going to do that is um by turning it into a position absolute instead of being positioned static that way it will not be actually rendered as an object that's taking space here it's just going to be on top of it now every time and we're going to use position absolute a few times here every time you want to go ahead and do that change it to position absolute it needs to be relative to something so you can see right now it's relative to the body but we actually want this to be relative to the section so we have to go into the section and change it into position relative okay so now that we've made this and i'm going to go back into the down arrow now you can see that it's relative to the section and now basically all i want to do is you know give it a little bit i want to it to snap to the bottom so let's say i want this to be 20 pixels from the bottom and now it's it's actually here um and as you can see now i'm moving it around and it doesn't even affect any element at all that's on the page so that's exactly what i wanted now actually to be honest i should have made this a button and then so if i click it it scrolls down let's just do this very quickly by bringing in a link block and then um probably because we created the styles already let's call the link block down arrow and put this image inside the link block down arrow and make it a little bit bigger so we can click it something like this okay so now this is actually a button and with buttons we can connect them to specific sections so in order to connect it to this section we're going to give this section actually a name and the way that we do this is we go to the settings we give it an id so let's call this model y because we want this to scroll into model y and go here into the down arrow and i can change the the button setting either from here or from the settings panel and i'm just going to choose the model y section so basically now we have this button i'm going to click it it's scrolling to the next button and this only shows up in the first section which is exactly what i wanted so fantastic okay we've got that let's move into the scroll snapping so with the scroll snapping here's what we're going to do for the scroll snapping we do need a little bit of custom code and i found this code from another actually webflow youtuber called anansi and um the code is inside the assets if you wanted um i'm going to copy it it's very very um let me just add it here so we can all see it i'm going to add an embed code and it's basically very simple code it's a scroll snapping using css so it's just adding a little bit of styling now this requires that we put all of the sections that we want to snap inside of a wrapper that's called scroll snap wrapper so i'm going to copy that because it's important that we tag that we have the same name that we addressed in the code let me go ahead and create a new div block and call this scroll snap wrapper and put everything inside of it so let's put this inside let's put all the sections that we have created inside now the trick of this code is that we have to set up the width to be 100 viewport width in 100 viewport height and we have to set the overflow to scroll this is how it works so now that we've done this and we make sure that the code that we have here is targeting elements you know with the right names so scroll snap is the name and section is actually how we named our sections so this should work and let's test this out let me see and you can see it's working it's even working inside of webflow's preview so i'm just scrolling and it's snapping into the next section perfecto okay so now that we have this to make it look really like the tesla website you can actually see that in tesla website one more thing happened there's actually an interaction first of all take a closer look at this model and at the buttons when i'm scrolling they're kind of like fading out and fading in right they're transitioning also it looks like they stay in place like they are static in place so let's go ahead and create the interaction that makes it look this way because right now in our build you know we're just scrolling from section to section but the text it just stays there so let's go ahead and add this interaction now the way that we're going to do this is we're going to add a scroll interaction to our sections and we're going to create just one interaction and then we're going to apply it to all of our sections so we have here um the interaction and let's go ahead and add a section uh while scrolling in view okay and here's what we want basically now we're going to set up a scroll animation and i see that i already have this created here so let me delete this because i practiced this earlier basically what we want is this we want that when we will slide into the view everything that we have actually inside of the container okay and everything that we have inside of this container is going to fade in right so it should have been faded out and now it's fading in meaning going from opacity 0 to opacity 100 and when we're scrolling out it's basically you know fading out so from opacity 100 to opacity 0. so here's how we're going to do this we're going to add an interaction while scrolling in view play scroll animation and we're going to add a new animation let's call this scroll animation now the way scroll animation works um oh sorry sorry sorry i made a mess and i've created this twice so let me delete this because i've now picked the container and added an interaction on the container while i've actually wanted to add the interaction on the section so here it is i'm on the section i've added the while scrolling into view and now i'm adding in the animation call it scroll animation animation now the element that i want to animate is actually the container within it so i'm going to select the container and then i'm going to add an interaction that's called opacity now here's the thing we basically what i have right now if i'll put a preview on is you'll see that we are already at the beginning i want this to start somewhere around zero okay so we don't see it and then we will scroll we when it will get into the position i'll just randomly put it let's say it's 30. it's going to get to 100 and then when we start scrolling out again it's going to stay there let's say until 70. and then when we leave the page duplicate that when we leave the page it's going to uh animate from 100 to zero but i have a problem which is right now as you can see i'm stuck at i'm supposed to see this but if i'm doing the live preview i'm not seeing this because it looks like everything is already in so to fix this you can have here in the on scroll animation boundaries and we can give this a little bit of an offset so and i know the numbers because i've we've played around with this a little bit but sometimes with these kind of scroll animations you have to play around with this until the numbers match so i'm going to add an offset of 30 percent and let's try this again so now when i'm inside the scroll animation and i'm doing a preview now you see that because i've added this 30 um 30 offset i'm actually at 70 not at the 100 and now as i'm scrolling out you can see it's starting to fade out let's do it done and let's test this out so now we're seeing this as i'm scrolling out it's fading out i'm trying to do this slow so that you can see it and then well we don't have it in this section but now it's fading in again so basically now i have this applied to this section let's go ahead and apply this to all sections so go ahead while scrolling into view play scroll animation scroll animation let's add this offset to 30 and basically i have to reapply this manually to all of the all of these sections that we have here hey ron um let me pop in and um cyrix if i'm not mispronouncing his name he's asking him if if we can also animate the image as we scroll i just find it as it's a really interesting idea and yes we can like just we the way we fade out uh the text we can take any other element and apply a different animation to it and that way we are also adding more dynamics so good idea and yeah yeah of course and actually i am going to add one more thing in a second i just wanted to finish this so that we can see it um but let's test this out right now so it's fading and you can see it's faded in let's try this the other way around so you can see it's fading in the fade in happens actually fairly fast but it's happening now here's the thing that i want to add here it actually looks like this is staying right in place right it looks like it's static the text is actually static here our text is you know scrolling up and down now in general we could have made something like makes the text fixed or make the text absolute so it literally stays in place but because we have this snap code and it doesn't work with you know absolute positioning we can't do this so we are going to animate one more thing um so let's go ahead go back to our scroll animation and we're actually going to fake this effect of the text stays in place so here's how i'm going to do this i'm going to go back to the scroll animation and i'm going to take the choose the container but this time instead of opacity i want to animate its position so i'm going to move it and what i want to do is i want to make let's say that when it's in position you know when we are arriving at the middle it should be at position zero right but let me duplicate this and do position 0 here as well but when we're scrolling down when we're scrolling out i want this to actually stay maybe at the same place so let me maybe move this down 76 pixels down and when we begin so maybe it's going to be minus 76 minus 76 let's see how that's going to look like so now as i'm moving you can see that it's the text is actually moving down right actually maybe i need to push it higher so it looks like it's uh it's not moving at all right i need to be more extreme instead of minus 75 maybe 150 and 150 here let's do try this now i'm scrolling now you can see that it's almost not moving it is moving still down because i should probably be even more extreme in my in my offsetting of the text but you can see that i will be able to let's try minus 200 and 200. i will be able to fake this positioning of the text doesn't move but it actually just animates in the other direction so it looks like it's not moving right now i think here here it is now i got it right looks like the text is staying in place but actually it's just moving in the other direction okay so i think we're good with the actual content and scroll snapping and interaction let's go ahead and create the nav bar all right let me just take a water break khabarza do we have any interesting questions or discussions going on yeah and uh something else i want to mention friendly m agency is saying we could apply the animation to the class instead of you know reapplying it to each section and that is uh correct we could do it that way so we can be a bit more efficient you are right every time that i'm uh yeah every time i do something four times i'm saying maybe i shouldn't have done that this way but a good a good note okay so let's go ahead and create the nav bar so i'm going to go ahead and pick webflow's native navbar and why i'm using that because you know if we're going to go ahead and make this uh responsive later on i don't think we're going to get to this today but you know it's going to be easier everything is going to be turned into you know uh hamburger menu and stuff like this okay but with webflow's native navbar we have a lot of cleanup to do so first of all it's called this navbar let's remove the ugly gray background i also want this to be fixed at the top right so the navigation here is fixed always at the top so let's go ahead and change this from position relative to fixed i'm going to make sure that it spans all the way across the top so now we have it here now you can see do we have enough space maybe all right so now it's fixed at the top also webflow's container um yeah let's replace it with our own container and in this case i don't even know if we let's call this nav container nav container because we do want this basically to span from edge to edge so it's not like a real container but let's take this and let's take all the elements okay so now we have this let's give it a little bit of padding from the sides let's go ahead and put tesla's logo in here it's huge let's call this tesla logo and maybe do 110 pixels okay this looks about right now note that they actually have here two menus so there's a logo there is a center menu and this menu they have the same interaction but you know they're different i probably should you know do something like uh maybe duplicate this twice maybe not duplicate this one no let's just for simplicity's sake let's go ahead and copy paste this oh maybe i can't because it's a webflows native menu um so let's go ahead and inside of this let's create two separate menus so i'm going to call this menu one and then we're going to have menu two menu menu two and inside menu one i'm going to add a bunch of links let's actually call this nav link so that we can style them properly let's delete this i'm going to have a few links here and a few links here now okay so now we want this whole thing this nav menu to span up this whole thing so let's call this menu wrapper and let's make sure that its width is a hundred percent actually let's take this nav container and maybe turn it into a flex box that can organize both of them in this menu wrapper we also want to turn it into a flex box this way so now we pretty much have this ready but we do need to give menu one probably a little bit of spacing now i'm just doing this visually right now this is probably not a smart way to do this and probably i should probably definitely do this with percentage if we want this to be responsive so um let's see if this is um but by the way i think there let's see the how their works yeah when these are too tight they immediately move into the menu button so this menu is not supposed to be super responsive i guess um let's do this this way for simplicity's sake right now okay let's go ahead and give this styling all right so let's change this into a medium one let's give them model 3 model model what else do we have y model x what else do we have model 3 model s model s and then let's say solar solar panels panels okay and here we have shop account menu shop account menu and delete this okay so let's think about how uh what do we have here wait a second okay okay let's think about how we're going to create this thing now usually when we're creating kind of like hover interactions then we create a hover state for this single element right how would we create a hover state for this usually we would go here into the hover and then give it some kind of a background and that's what's going to happen you know when we hover on top of this thing this is how we would usually do this but in this case and i'm going to just undo what i just did here in this case we can see that the actual element moves so it's actually a separate element from the links and it's just following my cursor so let's see how we can do this first of all let's go ahead and create an element um that is separate from these element and just looks like the backdrop so i'm going to go ahead and add just a random div block and i'm going to call this maybe menu backdrop and let's go ahead and give it a background color by the way a few comments uh from um beneath the video so we have people saying that you can put the logo inside of the container and either use flex or grid to make it center which i presume will work inside of this inside of the menu wrapper yeah and then space um between i can do that the only thing is that when i will move here uh the logo will get inside of the it will get inside the menu that's the reason i left it outside but yeah we can do that because the the reason is when we're going into mobile webflow is going to hide everything that's inside the menu wrapper and hide it behind this menu button right that's the sometimes we need to have two um that that's a way of going around that yeah okay so in the meanwhile what i did here is um i created this backdrop that is just basically a div an empty div that has a little bit of background and has um a little bit of corner radius maybe it needs to be yeah i think it looks okay but much like what we had here with this arrow we needed to be beneath these things and not take up space like it is taking up space right now so we already saw how we're going to do this by turning it into an absolute position absolute and make sure that it's positioned relatively to its parent which is menu one so let me turn this into relative and now basically it's behind all of these elements i can push it a little bit here and yeah it actually looks pretty good maybe we can make this a little bit smaller and now it works okay so now it is just statically behind model three now here's what we need to do we need to create hover interactions that if i'm hovering over this element it's just going to move into this position and if we're hovering over this one it's going to move into this position and actually if we're going to hover over this one it needs to not only change the position it also needs to grow a little bit right to change to this uh to this size so let's go ahead and do and and of course if we are hovering out it needs to disappear so let's start off with the moving and resizing and then go ahead and do the disappear so for this thing we're actually going to have to manually create four different interactions this is not something that we can do applied based on class like we discussed earlier because each of them has a different position and potentially a different size based on how big you know how many words are in the link so actually let's let's start with this one it's going to be easier actually to go backwards work backwards uh i'm going to pick this link and going to the interaction panel and going to add a mouse hover interaction and going to do on hover and let's call this solar hover now here's what we need to animate we need to pick the menu backdrop and let's go ahead and animate its position so i'm going to move it and then just basically position it where i need to position it now i also need to change its size so let's go ahead and change size and do maybe i don't know 130 no that's too much or maybe it's okay so now i have the size i'm putting this together so these two things animate together um and let's now i need to change the move a little bit here okay so this is going to be the final animation in size where it moves into it's going to happen over half a second but linear animation is always boring so let's do out circ let's do out circle for both of them out circle let's preview this for a second okay so now it's moving and changing the sides okay that's nice so basically that's what we need to do so we've already done that right but it moves fantastic all we need to do is to duplicate it to these buttons with different parameters so let's see how we're going to do this let's choose this one and let's do element hover we already have this created so let's just go ahead and duplicate this and this one we're going to call this model s model s over and move into not this position move into this position now basically if it's in the original size it looks okay but it might be moving from solar panels so we do need to shrink it back to its original size so i don't remember what was the original size maybe it was 78 or something let me go out to just see what was the original size of this 89 so 89 pixels so let's go here and do size 89. okay so now it's if it's bigger it's going to move back to the same size if it's anyway in this size you're not going to see this move to the right position save this let's test this out so now we can move here and we can move here and you can see the size changes big small big small okay so let's go ahead and do the model x hover start animation let's duplicate this it's already super close so model x size is the same we're just going to have to pick the position and it is set fantastic last one not actually not last one but almost last one start animation duplicate model y so sometimes you do have like a little bit of tedious manual work to create these interactions but as you can see you can create some pretty cool stuff and the duplication is actually fairly easy the last thing that we have to do is actually create the this for the first one of them so mouse hover and start animation because we might want to scroll back into this one so this is going to be model three move back into position zero and change to this size and by the way for this one here's something that i forgot and it's too bad that i forgot about this right now because now i'm going to have to fix it four times we forgot that it's going to start with opacity zero and then it we also need to change the opacity to a hundred so here's how we're going to fix this first of all let's set the animation the opacity to zero and set this as an initial state this we only need to do once but for all of the animation they do need to animate the opacity back to a hundred so i'm going to save this and we also want that when we're hovering out of the whole menu so no matter where we are if we're hovering outside of the menu we want the button to disappear so let's add a hover out interaction on the whole menu one so menu one hover animation actually not on hover only on hover out and i'm going to call this just menu one hover out and just pick this backdrop opacity to back to zero so let's save this let's test this out so now we're starting with no opacity opacity in opacity out opacity in opacity out but if we're going to start from this position you see we're not going to see it because these interactions don't have the opacity in interaction so let's go ahead and basically just very quickly also add opacity 100 added to them save and then this one model opacity 100. and then save up i think i've made something wrong here i've animated nav link nope i need to change the target and i need to change the backdrop opacity okay this one i'm going to choose the backdrop opacity 100. and last but not least solar panel let's choose the menu backdrop opacity 100. all right let's save this and let's test this out boom boom out out in out in out in okay and we have this interaction working all right so we have done this and i think that for less than one hour we have built this page it's not perfect right it's not responsive yet we haven't created you know this mobile menu maybe or you know we can go ahead and recreate this stuff which is also fairly easy but i think for a demonstration on how easy it is to create something as world-class as tesla.com um it's unbelievable that you can do this thing in less than one hour so i hope you've enjoyed this um if you want to open up for q a and ask some questions i think this can be a fantastic time to do this kabarza we can open up some questions from you know from our students um also a good time as i said again to remind people that we have just launched the third edition to the webflow master class today and we're running a promotion until friday you can get it for 200 dollars off and this is crazy crazy new course um i would love to show you just a second like let me see if i have this here um in this new course we are teaching you to build two websites we have basically did this uh more like a project-based learning so we are teaching you webflow by building these very complex websites like real world website we have a real estate website and we have this fitness website including cms and interactions and a bunch of stuff and you're you're learning web flow in depth uh while building these real client work projects um so this is really really amazing stuff i really encourage you to check this out and uh yeah let's open up for for questions what's up kabarza i need to find a position where i'm not on your face yeah yeah so do we have interesting questions in the chat just i'm also just reading the chat right now looking for questions please don't delete this stream uh we're not gonna delete this uh stream um did you did you did you enjoy this stream so far did you find it valuable did you learn some new web flow magic and thinking techniques today so i ideal what's the best practices to use background images in webflow ah now we have a whole new chapter on this in the course like advanced image techniques because these are yeah kabarza go ahead and tackle it yeah uh somebody else also asked like a very similar question uh if we can use like in-line images so normal images there are many ways of you know achieving the same look uh but by still using different tools in webflow so yeah we can uh use inline images like normal image elements and then position them absolute and then just put content on top of them that's also a good way of using images in webflow then they will be more responsive and faster to load yeah just so just as you can see we have a if you're if you were building this site for elon would you use actually inline images versus background images if elon asks me i will do inline images for him but elon would have you do it from the office working 40 hours in the office first probably yes got it got it okay let's see we have a question from cameron i have a question basically my clients are small business and i like to slowly teach them how to manage the website themselves is pos project text update for clients easy to complete so the way that we teach it in the webflow math class and also i recommend is i do recommend you train your clients on working with uh webflow's editor which is super super easy so for things really like text updates or even updates stuff on their cms which is you know adding a new car adding a new inventory thing right blog posts they should be able to do this on their own they don't really need your help as a designer or a developer unless this requires a change in the structure of the page or the logic of the site they should be able to do this on their own and you should be able to train them to do this and it's fairly easy with webflow larissa is asking can i learn animations in depth in your course um you want to tackle this or yeah so i i think in this in this course we decided to make things a little less theoretical and a little bit more practical and really show you how these concepts apply in real world websites so let me just go ahead again and open up the so here's the here's the website here's for example the fitness website and it has these you know intro animation and this kind of uh animation and the the other website that we have let me show you i'm just afraid that my because i'm streaming like i won't be able to do animations like my computer is slow right now but you know we cover these intro animation and these parallax animations and of course like the normal animation all of these kind of like interactive animation these kinds of like moving uh both scrolling moving and the text is a loading animation so we're tackling a lot of kinds of different animation and also how to practically uh use them in real world context and also all of the mental models that you will need to be able to then think up any other animation that you might want to apply um and figure out how to do it on your own what else do we have here and just to continue on that we we don't just stop like at the animations that webflow offers we like explore a little bit more um to add even like more animation so we go a little bit more in depth do you cover how to handle clients and what to consider when getting your first clients in the master class well specifically the webflow masterclass is not about freelancing it's about web flow but we do cover how to have your sales conversations regarding webflow so a lot of clients might not want to maybe they they've heard everybody uses wordpress or they have other you know platforms or hosting considerations so when you're selling webflow websites to them you want to know how to address these concerns and how to talk about what they care about and ease their concerns so that you can sell them webflow websites so we do cover these webflow specific uh sales topics but not necessarily just normal you know uh again freelancing uh tips or where to find your clients this is you know again this is a web flow course not a specifically a freelancing course another question what style properties like in general like what styles can you add to cms data in webflow so basically anything so you you can add styles to cms data the way you add style to other elements so you can um you can create like cms driven websites that are still looking really unique you can even have like different rules like the first item would for example look different or the odd or even uh items would look different so a lot of flexibility with cms and styling so i have a question for amir how long will it take a beginner who does not specialize in programming to build a page similar to what you did with the tesla website so our goal is and i i honestly believe that you know if you take the webflow math class you should be able to do this in pretty much the same speed that i did it right now and maybe if not in one hour then maybe in two hours but as you can see there wasn't like maybe what took us a little bit of time to think when we were thinking about this is maybe just trying to figure out oh we need custom code what custom code do we need but to be honest you know i mean kabarza correct me if i'm wrong basically what we did is just google webflow scroll snapping and there's so many community projects and custom code that was already shared and people already created these kinds of like copy and paste components that you can already use so you basically need to have the capacity for understanding of how to work with these things and then you can reapply them you know i don't know all of the custom codes or all of the effects but i know how to look for them and i know how to implement them easily and that's my goal is to have you at the same position by the end of that course uh by the way i asked one of our webflow coaches like what do you think about scroll snapping what like which i know there are like many solutions which one uh should we use and kudos to ethan he mentioned this one is the simplest one so we took this one all right so there's one from yan suzanne run when you start a new project do you spend time creating style guide is it your typical starting point um yeah so we do we do usually start with a style guide we have a style guide as one of the you know the resources in the course and we basically gave away the i think the style guide for free um and i think this is a really great place to start you spend you know a few minutes to an hour setting up the basic it's really worth doing when you have a complex website if it's a single you know landing page with just one site just one page and not too much content maybe it's not worth your time because you can build the whole page in one to three hours right but if you have like a big project like the project actually that we're covering in the class that have multiple pages that have a lot of dynamic content and you're reusing styles and you're reusing opponent it makes sense to get started from a style guide now there's a lot of ones out there and there's a lot of frameworks right now client first and all kinds of really robust things that i think that for most beginners and freelancers are honestly aren't overkill they're too complicated so just trying to work with this thing is going to waste more time than it's going to end up saving you that's why i really try to keep our style guide fairly simple and minimized again oriented for freelancers who work on their own and trying to save up time but yeah that that's how i would do it i also see a few wordpress related questions well this can be you know a topic for a live stream itself but in short like um mentioning just something that here uh from cameron saying i'm assuming custom code and api works better with wordpress say not necessarily like custom code works just fine with webflow if you want to add you know more functionality you can just as easily add a custom code and api interaction integration would work anyway so no problem there if you need the core functionality of wordpress then you have to use wordpress for anything else if you can code or like add functionality on top you can do it with webflow and then you have the cms the fast hosting you know the freedom of design everything there i saw there was a question about uh maybe from cena about creating a booking website so a booking website i think it's important to understand what type of websites is this there are a lot of types of websites there are marketing websites like the one that we've built today or maybe e-commerce websites that our website where you purchase something there are membership websites right that are kind of like gated content so you pay a subscription and you get access to pages that you can't get booking website is a type of website that is called marketplace meaning there are two sides in a marketplace think about airbnb or whatever booking.com there are two sides there are people who are listing their services or stuff like that and there are people who come in and purchase them so far i don't think that webflow is maybe the best solution for marketplaces right now i don't know there i think there are dedicated solutions for marketplace which these types of websites just like e-commerce these are actually robust they require a lot of features right like so webflow does allow for e-commerce website but then people start to compare it with shopify which is a dedicated e-commerce platform and it's hard to compete with somebody who's just doing that right so with marketplace i think there are companies who are just focused on building uh marketplace websites so probably they're not as good as webflow in terms of having design flexibility and stuff like that but in terms of the features that required for building a marketplace website maybe they have more features there right now it would take a lot of customization and custom code to build a booking website using webflow so i wouldn't say it's ideal i see another uh question from the mcfriendly agency how much building and using cms uh we can learn from the uh from the master class so maybe i will just share my screen again let me see if so with this website we have kind of a real estate website so we have this listing page which is all cms and we have search for that and we have you know you can uh filter based on you know uh cities and then in the webs in the home page we're filtering based on other things so so we we do cover um let's say filtering and all that this is a little bit more uh basic cms filtering and in the second website which is a little bit more advanced let's see here we have blog so here we have cms and um here we've implemented some cool things like uh pagination in page in-page pagination and all kinds of in-page tagging and this is by using the um a little bit of custom code and extensions but yeah that's we cover we cover this in the course we show you how we we do that i hope that makes sense um all right i see another question in the web formats cluster we're going to learn tool to track website metrics such as google analytics uh no we don't cover it or we don't cover that analytics is a huge topic we do show you where to put the analytics code if you want to embed it in the website but that's that's super easy but um how to look at analytics how to use analytics that's dang even i would like i've been doing that for years and i would call myself a beginner like we have a full-on analytics guy it's so complicated um can functions like bookmarking blog articles be integrated in webflow what does bookmarking blog articles so that i assume it's something like um favoriting something in the cms right now natively it's not possible but there are like um community projects that will allow you to do this with just you you just copy paste a few lines of code and then you add a button that will do that for you and then boom you have it so not natively but with community projects easily all right fantastic okay we're going to wrap it up this stream for today thank you everybody for showing up and staying with us all through the end i hope you found it helpful and beneficial i always love hanging out with you live and kabarza thank you so much for joining us uh and providing helpful insights oh dang and my camera just died on the last minute let me see it's fine so i'm still here guys uh we wrapped it up at the right minute all right thanks everybody see you soon bye see you bye bye

Channel: Flux Academy

Views: 58,440

Keywords: become a web designer 2022, freelance web designer, graphic designer job, web design, web design freelance, web design business 2022, web design freelancer, web design business, web design 2022, web designer career, web design school, ran segall, Flux academy

Id: cgUKdYlGCu0

Length: 70min 57sec (4257 seconds)

Published: Mon Jun 20 2022