How to Webflow (Live): CSS Grid, Collection List Filtering and Nested Collection Lists

[Music] [Music] [Music] you [Music] [Music] [Music] [Music] [Applause] [Music] [Applause] [Music] [Applause] [Music] [Music] everyone welcome to another how to web flow live I am Nelson thank you for joining me this weekend I hope you're all staying home staying safe keeping those hands clean wiping down all the things and just you know hanging tight until all of this gets better yeah if you're not familiar with this stream if this is your first time in the stream please go on the live chat room right now and say hi and speaking of which with a live chat room hello to the first person here Vela Vilia the valve yeah I'm gonna mess up some of these names I'm so sorry but yeah welcome Metro Colleen Thomas mark HD web design Prashant MJ some of you let's see here I think I recognize Kyle I've recognized Colleen Tomas mark Hg and Prashant I've recognized you from last week so thank you for coming back today you are awesome yeah so what are we gonna be doing today we're gonna be talking about some basic stuff more people have asked for beginner streams of further explaining CSS grid what grid collection list filters and the new feature nested collections so that's what gonna be doing but before we get into that again hello to everyone in life chatroom please tell me where are you from Eunice is here what's up Scott Levin I recognize your name Russell Junaid Ian welcome welcome welcome Scott you don't know me but I have watched many of your videos thank you so much thank you so much I do it out of love I want everyone to learn web flow I want everyone to be inspired empowered to build awesome things and again web flow to me is like a box of Lego that you get to play with every day and then when a new feature comes out you're like oh hey something new to play with something new and shiny so how do I use this with the other Lego bricks that I already have you know and it just keeps growing from there um yeah so where Morocco awesome Canton Ohio New York City Glendale a Glendale nice London Netherlands Thailand Lebanon Atlanta Dallas Texas oh I know carlene's from Florida I've met you you're awesome Brooklyn all right mate I'm from England yes I'm all right I hope you are too Tony yeah GATS 101-100 you know there we go you are all awesome thank you for being here all right so how we usually do these streams is I have a topic that people have picked through the week and tweeted me or responded to the YouTube community tab on my channel and responded to my post there but yeah I'd love to answer these questions and help you understand well flow more and more so you can make awesome projects for either yourself or your clients someone from Bangladesh nice Junaid welcome so we get into the topic and then towards the end I take your questions if we have time and I usually stream from 10 a.m. to 12 p.m. Pacific Daylight Savings Time and that's it just a very chill stream in a way that will help you learn okay so yeah so hold on with your questions until I get done with the with the main topic that people people have been asking throughout the week which is the CSS grid collection list filters and the new nested collection you asked me to read and remind you about responsive web design yes I'll go into that too I'm going to that tooth where's the end but actually before I get into the main topic someone has donated to my buying me a coffee page and so buy me a coffee calm / pixel geek I'll put in the chat room right now I'm doing well Ranjin welcome from Brussels and if you donate here I get to your questions first I put it on the top of my queue or I just talk about or I try to answer it as fast as I can um during the live streams oh cool the chat box is working hey things are working also someone made a point to enlarge my screen so it's easier to see the UI of web flow and easier to see the mouse and the text and whatnot so I've done that too so thank you so much for the feedback and also thank you to Carlene before I started streaming this morning she donated a coffee so thank you so much Colleen so Babis he bought me a coffee and he says coming right back at you hoping you can help me once again with my web flow project the thing I'm trying to replicate is this and it's this link right here and it's this component right here okay and he says the thing I'm trying I'm trying to ask you is how can I make the CTA button update the number every time I choose a different tab if that makes sense right now it's set to $10 but if you click 15 or 30 it changes the number in the CTA mmm it takes some custom code it takes some custom code so this is what he's talking about if I click on 15 this number right here changes 15 if I click here it changes all right so it's gonna take some custom code and let me try to answer this as fast as I can and Babis if hopefully you're watching right now because we're gonna get into this and this is his website right now it looks really cool I like this logo right here it's interesting but this is getting cut off I'm wondering okay it's a navbar but he's trying to replicate it right here and he is actually on the right path using the tabs component so when you click on the different tabs it changes well I guess it was supposed to change this does he have different content or he's just copy pasted oh he has tabs within tabs whew interesting so I guess yeah that is one way to do it tabs within tabs and then this tabla Hanyu hold on hold on and I wonder what is this interaction that he has here hover so okay so it's an inner it's just a hover interaction actually the way I was thinking about it which is custom code might have been too hard and Babis I think you're already on the right path just um add the the button in here and it would be easier for you to update but if you want the custom code if you want the custom code route you would need to understand code so here's here's what I'm thinking here's what I'm thinking each of these elements each of these buttons has some sort of HTML attribute within them okay and when you click on one using JavaScript you can send that data and update whatever number is in here plus whatever back in code to update the price of this button because I don't know what you're using to actually process the payment so it's like say if it was a PayPal button you would generate a new PayPal button for each of these buttons and then paste in that code using a web flow embed component for each tab now if you take a custom coder out then you would need to update that code using javascript so Babis you're already on the right path using tabs within tabs but if you really want the custom code way let me know and it may take me more than five minutes to fur to further explain how to do this but this is the no code way where you're going right now so keep doing this and if you need more help just dam me and I'll look into it but thank you so much for the coffee and hopefully this answers your question but again you're on the right path just put in your button per amount of donation all right so a good job and also I just saw Tia door thank you so much for the coffee you rock let me refresh a tio in someone else thank you for the positive attitude yay Eunice thank you for the two coffees y'all rock love you all I'm glad to bring knowledge to you all and I'm glad that it's valuable to you um let's go let's go let's go skill what okay so CSS grid now well classes so CSS grid is this new display property and if I go here and just bring in a grid okay this is what it is imagine it's like a table it's like the old school tables back then if you're familiar with um old HTML before CSS you would have to write tables you would have to code in tables but this is a more visual and easier way to structure a table or a grid okay and um let me know what you really want to learn from from this grid because to me using grid is super simple but I could be wrong I could be wrong where I see using grid a lot is for collection lists and let me see it let me go let's go ahead and actually you know let me go back let me go back let's let's just put in some fake blog data ooh my Internet's slow come on now go back Oh huh is web flow slow no I'll go to the Chairman real quick um dropped frames am I still live are we good [Music] okay we're good now okay Oh livestreams gotta love it all right let me close this try again okay all good here thanks Ian so it's still alive then what oh man yes hi Ridpath welcome back we pass as we wait for webflow to load I'll try to answer questions well can you check out my feel mat and explain how to do some of their animation can be done in web flow yeah happy to do that after this I wonder if my laptop is just screaming right now like no is there anything I can turn off alright so we're back here okay we're good let me create a fake blog real quick so let's go ahead and make some blog posts and create collection cool we're gonna add let's add 20 things yes in regards to grid how do you keep information from spilling out past the containers good question maybe it's just my computer that's working slow anything I can turn let me close that close that close that okay maybe I saved some resources alright so we have our collection list of blog posts and now what I usually use grid for is collection lists especially for blog posts or repeated data so if I drag in a collection list and if you're confused about webflow collections refer to my last last week stream but we're building on top of that when you're using collections again and I made a YouTube video about this but I'm happy to explain it again do not I repeat do not use any of these layouts okay this layout is old-school CSS only use this layout if your clients or your clients users for their website uses Internet Explorer because this is all old-school CSS float if you're not familiar with float and you don't have clients that use Internet Explorer don't worry about it it's old it you don't need them it's like learning how to write HTML tables no one uses it you don't need it we're done with it so just keep it on full width all right now open up this collection list wrapper and you have this collection list this is what you need to set as grid okay so what grid does is makes a grid okay so by default grid is two by two okay as you can see here two columns and two rows and when two columns and two rows and so you notice that it overflows there's like extra rows that's because right here if there's any more data then a new row will automatically be generated so that's what this means right here okay now what if we want three rows simple you can press Plus right here to add a column or sorry three columns you can add one here from this panel or on the canvas itself click the plus right here and now instead of two columns and then a bunch of rows we have three columns in a bunch of rows and it only creates enough rows for however many however much data you have and notice how this row only has two posts and then the last one is blank that's what grid does so you don't have to worry about it alright so let's go ahead and like safe for okay that's nice number four and wait a minute yes but this is what my stream is saying my stream still on it's one of these days one of these days I don't it says poor I don't get it still going but some pauses so sorry everyone I'm just gonna keep going the show must go on alright so been cutting it out for me but thought the issues no it's not on your own is mine dropped 23 frames in the last all right be right back okay we should be back and back yay all right okay so this is what's saying stream is healthy so you all should see me now look at that look at that I went from healthy to warning to error to no data to healthy okay live streams it's tough okay so we're back here so what have we done before we left it's creating a grid of data from the collection list okay and the reason why I love using grid for collection lists is because it makes responsive design super simple okay so let's make something simple let's just add let's just Oh God laggy okay there we go let's just add a link block into one of these and let's add an image inside of that link block get the image from blog posts and we always want to get the alt text okay so there we go we have that grid and so how does this work for responsive design so if I go here tablet like you know what it's too small I want it three columns now so all you have to do is for responsive design is either click on this to edit the grid or edit the grid here on the Styles panel and just remove just trash one of your columns okay so if I click remove now it's three columns if I go back up to here to the desktop it's four columns if I go here down to mobile landscape I can delete one of columns and if I go down to mobile portrait I can delete one of the columns and there we go within seconds you have a responsive blogpost list okay so I go here desktop tablet mobile landscape mobile portrait simple all right is there anything else you want to learn from grid someone asked let me see here scroll up in regards to great how do you keep information from spilling out past the containers if Kevin if you can give me an example of that maybe I can look into it but I've been dirt has been times when grid isn't grid isn't that that perfect like I showed you right here sometimes there's text that spill out or you're using manual placement instead of Auto flow okay and so what I mean by manual placement versus Auto flow is all areas okay I'm gonna be honest with you all I still need to understand area I get kind of scared with area cuz I'm like what why would you need it if everything Auto flows where you want it I ran John I need to learn areas um HD web design why are there red and blank fields in the grid alright awesome I'm happy to explain that one so let me go ahead and go back here to tablet and I'm gonna edit it and there we go and notice how these two first rows are red however all the other rows below it are like clear it has a red border but it doesn't have a tint unlike the first two rows that's because the first two rows were telling we're telling the HTML and the CSS specifically hey we are going to have two rows but if there's data if there's more data that needs to go beyond the two rows then web flow will auto-generate those extra rows so all the ones that you see here that seem blank those are just auto-generated okay so that's just web flow helping you out Thank You Tomas yeah the non read our our our auto-generated correct and same thing with columns you can have auto-generated columns as seen here okay cool cool any other questions and before I get to those questions you guys are crazy thank you so much for the coffee's me drinking a lot of coffee Ghats 100 I'm a former Adobe muse user like to ask you about best practices for responsive web design yes for stacking elements on top of each other this is this is one example okay and I'll explain it Ivan thank you so much for the coffee 20 G hands it's hot it is it is okay what if I don't want to auto-generate ah it will auto-generate villa the the the rows and columns will auto-generate if there's more data than then yeah more data than you have as rows and columns okay so you can't get away from it let me do another example of grid so instead of using instead of using dynamic data and everything structured nicely with grid you can actually create some crazy things for example if I drag in a grid and I say you know what I'm going to make this the full height 100 VH of the page and I want to create some some wild layout so I can edit grid and just add a couple of columns a couple of rows and then I can remove the gap in between the columns and rows right here and now it's kind of like you're playing is kind of like you're filling up boxes with things and let me give you an example let me just get okay here here's me in Disneyland let me up is it uploading hello oh maybe the image is too big so with web flow you have things called auto auto flow and manual I'm going to show you manual real quick so if I drag this here automatically it's set to position auto if I set it to manual then I can move this anywhere in the grid I can move it there I can move it here if I set it back to auto it's gonna push it back to the top left if I put something else like say a button and I try to put it somewhere here notice how that button is not following me if I let go it's set to auto if I set it to manual now I can move this anywhere I want if I try to move this one notice how it's set to auto I can't move it anywhere I want if I do manual now I can do stuff like hey I want this to span I want this to start from column one and end at column three see so one two three columns also I can start from Row one and end at real one or I can drag this down like that and now it's taking up all six rows I can go even crazier with this and make this a interesting layout background say it goes from column one to column 5 and goes from Row one to row five and let's go ahead and make this stretch I'm gonna make the height let's see can I make this stretch there we go I'm gonna make these stretch and then to make sure that it doesn't look warped I'm gonna use object fit and set it to cover there we go let's do something different with this let's push it like that okay and now with this button notice how I can't see the button it's because it's behind the image if I want to put this on top I have to push it lower in the grid now you might be confused right here if you're familiar with PowerPoint keynote Photoshop Illustrator or figma or whatever where if you want a layer to be on top it should be higher in this Navigator well in web design it's different with browsers read code from top to bottom so whatever is at the bottom is the thing that's gonna be on top I know computers are weird but it's just one of those things you gotta get used to okay so the button net is now on top and because it's set to manual I can set it to any position that I want okay now TB is asking why is the button stretching let's see here if I do so in line one one of these things that's trying to explain this is it because grid is stretching let me see here okay there we go okay let me explain so TB Oh Thomas already explained because it's filling the whole cell so to override the filling of the whole cell what I've done is on the actual grid I line all elements to push to the top and push to the left by default grid makes all items stretch and stretch so that's why it's taking up the full cell okay so with CSS grid and doing manual placement you can do some fun things um I know that Pablo Stanley didn't intend in 10 grid is that the yep so Pablo Stanley created this using grid and of course interactions to make this happen so he made a huge made a bunch of different grid a bunch of different um cells in a grid and then just filled in each one to make pixel art so he did one for Megaman and he did one for link nuts so crazy thing you can do with grid and manual placement not many people will do this but it's fun to try okay let me give you the link in the chat room so Pablo Stanley did this and this was win we didn't even have Auto placement for the grid now to answer the question of what happens when you do something like this when he gets smaller and then information goes beyond the the grid so I'm gonna delete one of the columns and I don't think it was supposed to do that it's not okay so this is supposed to be manual let me fix this real quick I want something to break there we go let's go back here oh okay there we go so it's kind of broken know if you see here this column right here is is blank it's clear the reason why is because this column is being auto-generated now sometimes when this happens to websites or I get support tickets from people and it's like this I'm like I tell them use Auto flow Auto flow it's much easier to control a special especially with responsive design it's much more easier to control than manual because with manual you would have to do this I would have to go to this button text and then drag it here manually and then if I go back to edit grid that auto generated column is gone alright but I have to do that manually and say if I delete another column look at that I deleted a column but look at this the image is still beyond beyond the four columns the reason why is because this is manually placed to start and end and start at column one and end at column five and so this is saying hey you know what I still need five call because he told me so so now to fix this I have to cook set this to four and now if I go back to edit grid it's like okay now we're good but this is just too much work and that's where autoflow comes in okay hopefully this makes sense HG can you make a gallery of pictures with different sizes in grid yes you can but you have to use manual you have to set them to manual you can't do Auto placement with different picture sizes yeah using the content block Thomas you know I expect a beer right I will start up a buy me a beer page and all I'll donate a beer to you Cheers yeah Andrew I'm late but I made it yay welcome glad you made it so that's a little bit of grid so you have auto placement and you have manual area I still and I still need to learn up on I haven't used area yet okay it's it's one of those things I got a I got to figure out [Music] Ivan thank you so much for the coffee Ivan you rock you need to let us donate something else to Tomas you are already donating your time to be part of this livestream so that's more than more than I can ask for so thank you all so much all right next thing collection list filtering ah okay cool I like this one let's drag in a container and let's put in that collection list and let's pull it pull that data from blog posts so we're doing collection lists filtering collection lists and we said that was a grid there we go hey I thought I already made a okay that was interesting all right so we're there we're good now let's go ahead and we'll just drag an image [Music] name okay so we've reset up our we set up our stuff I'm going back to the beginning there we go and I think we had like 16 there we go all right so we're back we're good collection list filtering there's two ways to do this there's the native web flow way which has limitations and then there's the cool jet boost way all right so we'll talk about the web flow way first okay now I'm going to create another collection called categories and we'll set it up to be 5 categories and I'll also create another collection called tags ok so they're like blog post tags and I'll create ten of them now I need to collect and I need to connect the this blog post to these two collections and how we do that is we create references and we'll start with the single reference and if you're not familiar about what I'm doing again referred back to my last stream it explains everything in detail so I'm connecting these up multi reference connecting these up and let's go ahead and delete all the the fake stuff that I have right now and then recreate them do you to do to do you're gonna be over caffeinated you're helping I want to encourage yes thank you thank you my first paid web flow site was created with a custom filter it was a cool project I wish I could share it but of course links are blocked see let's add ten go ahead and share it just um put a space between the domain name and dot-com so YouTube would not think it's a link alright so each of these blog posts have a our part of a different category and also have different tags okay so this one has that category that one has that category and no tags let's give this some tags okay so a very very simple web flow collection filter it why is this so big what just happened hold on oh it's because the height is 100 VH there we go alright so easiest way to create the filter is by clicking on any of the any of the purple elements in your collection list and then going to the Settings panel and pressing the plus two filters and so this is simple filter it's all thing is what do you want to match and so I can go down to here and say if the category equals the then show those and so there I filtered them okay if you want to change it easy enough if the category equals this then show it or you can do other stuff like if it doesn't equal this then show all the other stuff or if the category is not blank like if there is a category show it if a category is not set then show it okay so no items found because all of them have a category set and so that's how you filter now doing it this way you cannot allow your users to do real-time filtering there's other ways to do filtering if some of you have heard of the other thing called a mix it up mix web flow and one of the web flow one of the web flow QA QA support non QA engineers Anya she created this tutorial she's super awesome and that this is a custom code way to do it now the downside of this of this I can show it there the downside of this is that every web flow collection list can only show up to 100 CMS items if you need to show more than that you need to use the web flow the web flow pagination setting okay and when you click on next page it loads up the next 100 and so this mix it up can't filter through more than a hundred okay but if you have less than hundred CMS items this is cool if you want a way for people to do it on their own let's see here if I can pull this up here we go so ascending descending random only show the ones with that color or that color or that color so this is pretty cool and it works for static elements and web flow collection items okay it takes a little bit of learning there's a learning curve to this but she lays it out as best she can to explain what you need to do alright so if you have less than 100 and items go for it if you have more than 100 that's when jet boosts comes in and jet boosts lets you do real-time filtering and dynamic search so multifaceted a filtering of web flow collection lists is what you can do here so this is a paid third-party integration that you would hook up to your web flow project and the instructions are super simple and he also has he also created a web flow cloneable that you can use and cool segue I actually used it for a project that I worked on for the past two weeks and it's right here Zack says there is a way to get past the 100 item limit with custom code but it's a little bit wonky ah okay III don't know that that Zack so that's why I just relied on jet boost to do it because again I have a no coder but I know I know a little bit of code and so if there's a way to do it without code and someone is just streamlining that process I'm all in on that tool and jet boost help me and so for example right here if I'm looking for public service and government there we go it's at the top if I'm looking for e-commerce retail it's at the top or these two there we go so yeah real-time filtering with your web flow collections pretty cool and so--but this is connected to these tags so pretty cool huh so that's a easy media and easy hard and vanadium type of collection list filtering okay so the easy is setting it up inside of web flow natively but your users don't get to make the filters themselves you would set that up for them using this the the hard version is the mix it up where you have to put in custom code and set up your class names exactly the way it needs to be set up the the cool way the medium routes I guess would be jet boost and it cop and there's a pricing to it so it's nine nine bucks a month to use jet boots and you can use it on as many websites as you want all right but this is this is not an advertisement for them but I'm just saying I've used it and I liked it and it made me get this project out for work faster above website uses mix it up jet boost uses mix it up so you probably took that and then to get to the next level interesting alright let's go to the last thing because this is this is related so this right here these this column of boxes this is a collection list and the new cool thing that webflow released is something that so many people have been waiting for since 2015 since 2015 is can I add a collection list within a collection list and finally we can say yes we can and that's what this is this whole column is a collection list and within each collection list item or yeah collection item is this right here a collection list so we nested that filters valia filters are free on web flow but doing multi faceted filters that's real time for users to use that's something that our team is still looking into but yeah yeah there's a lot of things web flow wants to create and again I always say this it's easy to make something hard to use it is hard to make something easy to use and wet flow always always takes the hardest route because we want to make sure that it's easy for people to build things inside a web flow okay so let's play around with nested collections so I have this collection list let's take away the filter real quick want to see them all okay so we have all the collections oh I misunderstood you mix it up was used on your project all right I'll take a look at your project soon hold on so nessa collection so in here I have an image and let's go ahead and put in a piece of text and that'll just be the name of the blog post so I'm gonna pull that in and let's go ahead and push push this down push yep there we go and now it used to be if you have a bunch of blog posts you can't show off the tags or even yeah you can't show off the tags that it has okay um here's a good example of how you would use this let's change the layout of a bit and change this grid to be one column delete delete delete come on yes and each collection item we'll set that as flexbox because we want that content to be in one row there you go and then let's make this image a width of saying 75 because it's just a thumbnail yeah 150 cool round this out a bit oh my computer is running slow right now okay and let's go ahead and put in a div and put that div block there so I'm just making a layout real quick please hold and also this needs to be centered no oh it's right here huh oh sorry it's this one I hear no it's not I was great what's going on why is this div blocks oh oh it's because this has a margin bottom of 50 there we go okay so what if you had like a blog post list like this and then you also want to show show off the blog post tags that it has so now I can just drag in a collection list within a collection item and there we go now there are limitations to this you can only pull things like blog posts you can only pull things that are from a multi reference notice how I don't even have the category in here I only have the tags that's because you can only do multi reference fields you multi reference and multi image fields okay so if I click on tags and let's go ahead and set the collection list to a grid and say three columns and there we go so max three columns then I'll run down to the next line and then I can just style this however I want I could put in a piece of text and pull that text from the name of the blog post tag and there we go so you have the name of the blog post right here so you have the name of blog post right here and then each of these are tags and then that's it so yeah super symbol now and that's what I used for the better together site I have the tags here and yeah and this is the actual category so yeah hopefully that helps hopefully you understand more about collections within collections and again this feature only works with multi reference or multi image fields plus there's another limitation you can only put one collection inside of a collection you cannot nest another one inside of this and you cannot put another collection within this for example so if I try to add this nope you cannot you cannot have more than one nested collection list if I try to put this in here you cannot have more than one inside of another okay so if you're thinking oh I wish I can do more I wish I can list the dynamic list inception keep going and nest as far as I can right now it's only one but you know as with everything web flow it's a start and will iterate I know that the team will iterate in and do more with it what will it be next update I don't know but this is not the end of it it's never the end of it so cool ah yeah see here awesome hold on getting to my notifications real quick wait is that okay so I'm caught up cool thank you again Ivan let's rock some CMS we're rockin CMS right now alright see you're Andrew the kid do you still give critiques on webflow projects people are working on and remember that used to be one of my favorite parts of your streams yeah I'd be happy to take a look at what you're working on let me see if I missed any questions I think see here I don't remember who was asking about swapping buttons but I threw together this in case okay yeah hopefully this dream help you understand the sheesh we forgot hope you understand a CSS grid more hope you hope you understand collection list filtering and the three different ways to make that happen and nested collections which is super simple let's go to your questions and if you want me to look over your if you want me to look over your projects now is the time if you have any other questions now is the time oh yeah someone asks about responsive design so when it comes to responsive design you always want to use you always want to use percentages VW or VH and if you go into my youtube channel I speak directly about CSS widths and also CSS heights watch those and it gives you a good explanation of when to use with minimum width or maximum width and it's always best to use percentage or VW for your width because you're solving the issue in between different break points okay let me see if I can give an example let me go back so this image right here notice how I set this to a fixed width of 150 pixels let's make this huge we'll make this 800 pixels wide okay now because that's 800 pixels wide 800 move let's take a I don't want this to be responsive so I'm trying to I'm trying to break things real quick okay so let me set the max width to none cuz I want things to break okay there we go if I go here please break okay cool broke in all right so notice if I preview this and it has a set width of 800 and then I go here this is still 800 so it's not gonna grow and shrink with the browser with size or the device window size or screen size yeah so instead of using exact pixels it's best to use percentages so I'm gonna go here and we'll set this to we'll say 20 percent so this is 20 percent of its parent I type 20 percent there we go so now this is the width of 20 percent if I go here now it's 20 percent of its parent and that parent actually shrunk because now instead of 4 columns we're at 3 columns okay if I go like this you if I play around with the browse sighs they should grow and shrink a bad example let me try again let me put in an image I have an image right yeah okay we're gonna again we're gonna set this to 900 pixel width and if I go here I'm hundred pixel with the max width of none and see see how it gets clipped it's not like some of it is not on the canvas because the width is 900 it's a set with if I go back to my desktop and set this to be a 100% width of its parent and the parent being the container because the container has its own width and then I start to shrink it down notice how the image will scale there we go okay so I don't know what the user's phone or tablet size is going to be so use percentages or VW's to solve for everything in between okay so a quick explanation hopefully that makes sense but yes watch those two videos that Ike's I made on my channel about widths and Heights okay let's go to Thomas's a website he used mix it up less oh I don't know if I'm saying that right [Music] veloce la so Veloce so you made this site okay this is pretty cool I like the the photography's good clean navbar clean way to explain that hey cookies are on this site I'm all-in so far good job Tomas Tomas Tomas scrolling down I'm trying to find your mix it up whoo so this wheel turns and these two top bar shows the scroll progress cool that's the collection list I like your card design nice all right so where's the mix it up um actually one thing notice how these right here they're all different heights you'll need to solve that by stretching the cards 100% of its parent that way they can all be the same row as like this and the reason why this is happening is because you have different number of text lines so this has two so it pushes it down this much or if this only has one and this only has one in and yeah so it looks like it's a going up in stairs but yeah I'm guessing the mix it up is in here for view all let's see is my video laggy I feel like my video is laggy yeah my computer is like processing like a lot what I'm hoping for is maybe when I hit I don't know ten thousand subscribers I'm gonna upgrade to find a way to use my unused PC to be the streaming box and then I use my macbook to send the signal over to my PC and then my PC will be the one rendering all I'm learning how to be a streamer so I'm trying to figure it out so a bit laggy yes ah all right well one day all right okay here you go filter by brand Honda cool good job you guys so notice how like so I click on this thinking so I went like this and then I clicked and then closed I don't know maybe it's just me but I don't know if I like the hover open on hover but maybe it's just me I don't know good job okay so if there's nothing in a certain category maybe there's a way to show hey no vehicles in this category because I just click on virus and there's nothing yeah as we are if I do a search what is this is this the web flow native search [Music] Knots the feed my computer is struggling right now on the video rendering oh it's the customer error he should be removing these yeah but even if it's customer error like that's another you know help your customer out and just put a a none state so that way as a customer I'm like I clicked on it but I see nothing but I'm not sure if there's nothing or is it me or is it you know so you got a I would suggest add that okay so yeah this search is native web flows site search good job Tomas love it looks nice all right Zach swap buttons what is this swap buttons oh this is the thing you're talking about Babis had the question did you just do this right now nice yeah it's just tabs good job here here I'll link it on the on the chat Thank You Zack here I'm gonna reply to Babis if he's not here where is he where are you this may help it was created by Zack yay Thank You Zack cool well it's only 11:15 oh wow look how laggy that was my gosh the lag is intense I wonder what hold on what's causing it you skipped my link no Andrew where's your link oh there we go Acme counseling got it got it got it [Music] [Music] dang so much lag hold on [Music] okay although I'm looking at my yeah my FPS is at 30 so oh whatever will keep going there's a clone lingo changed if you want to see how he threw together cool I'll take a look Zach but first Andrew the kid you skipped my link alright so um first things first dude can't Cove it update I like your illustration was it where did you get this I like this it's clear and it can be used for any type of language because people understand what this is cool lightbox close it nice illustrations oh this isn't this is needed mental health addiction diversion yeah mental health is a big issue nowadays because we're all stuck indoors I like your navbar nice and big makes sense this hero ro makes sense but things are are like squished together I feel for example this could use a little bit more this could use a little bit more margin top and bottom you see for example so you're using margin top and bottom VH I wonder why I would use straight pixels for this so something like 42 and 42 that gives it more breathing room for people to understand this and I think you're using VH yeah you're using VH for font size too I'm I'm curious to understand why you would choose that when it comes to viewport height I don't usually mess around with that when it comes to type because I want to make sure that it's readable across every size screen yeah for scaling yeah because if someone has a small or like a small browser window still make the type big because the type is more important than the illustration you know so I'm gonna go here and I would put again more banner orange yeah more breathing room and I'm trying to figure out okay using padding padding 5vh yeah like I don't think you would have to use scaling for this padding just even that is nice right here let's see here let's try I like 42 even 142 on this banner so it's clear like hey this is a place to see this is a call to action row this is much more clear okay we can do it for you yeah so this is really too close to this top so a lot more breathing room especially when this has to do with mental health you want people to be able to breathe okay visually they need to breathe and so a lot more pattern margin at the top of the bottom of everything and this is something that I learned from the better together project that I did with the team I had when I was first creating this the brand studio team at webflow was telling me yeah same thing we need more breathing room at the top we need more padding inside of each we like they kept telling me more space more space more space and I'm taking that that idea and giving it to you as well more space between everything like this right here beautiful a lot of space and you can actually you know what you don't even have to create it yourself because web flow has a couple of me click layouts Wow look how long after wait my computer is low I need to figure this out next week all right so right here you have a call to action area you know if I want to drag this in oh come on oh my computer there we go so whole call to action section right that's exactly what you're doing and webflow already added the information for you all you have to do is just replace it okay so love the illustrations love the nice colors but more breathing room for everything oh look at this see how much breathing room we have here that's nice forms don't have to be this long they don't have to be this wide whose name actually takes up that much room put it into a 550 pixel width container and you should be good form by power okay but yeah yeah more breathing room in between these each of these yeah more breathing room or more breathing room I've been told fit more information on the page good to know I had it right the first time if your client says we want to put as much information on the page as possible we don't want people scrolling down ask them what type of person doesn't scroll down when it comes to websites everyone Scrolls down how long do people scroll down well how much do people ingest content from Facebook or Instagram or reddit we just keep scrolling and scrolling so people are already used to scrolling it's you know do you want to bombard people with a lot of information or do you want people to ingest the consume the information at a slower pace but easily understand it so office address okay I understand it let me go to the next part office hours rather than just here's our office address hours phone number fax number and user map like too much in your face all right Abell is asking explain web flow pricing it's a little confusing I made a YouTube video about this on my channel look for which web flow plan should I get I think that's what I named it but I explained it better there the fact that it needs its own explainer is yeah kind of weird but too long didn't watch its handle AG it's really getting to me too long didn't watch is you have site plans if account plans if you're building one site then ignore the account plans just add a site plan to your project and you're good if you're a freelancer and you're building more than one site for a bunch of your different clients then get an account plan and then for each of your projects that you're building for your clients when they're ready to go live add a site plan to each of those that's the most basic way I can explain it hope that helps GATS I asked about responsive but I got lost in chat it's a bit further up okay so yeah yes can you ask one more time what part of responsive responsive design is hard for you to understand I want to make sure that I clear it up for you as best I can russell's just trying to figure out how to add interactions made a home page copy based off your old tutorial Russell what kind of interaction are you trying to create and you know what maybe next week I'll focus on interactions yeah next week I'll just focus on interactions Abell that was actually good yay all right cool and I'm annoyed by my lag does that help I need the window smoke no didn't help Oh I'm I don't know why there's a leg is it the hold on man all right okay so grid with slideshow full page grid with slideshow full page grid with slideshow great with slideshow there we go last week this was not happening anyways so great with slideshow are you saying a sly a slider component and then putting grid within it so I mean something like this where you have a grid of things inside of each slide I need a example ooh thank you - is that someone from Russia With Love thanks for the coffee someone Rock what yeah I'm not sure I'd like to understand default max with on grid ah okay since I have grid here default max min max okay so if you watch the if you watch my CSS with YouTube video that explains when to use widths when to use minimum width and when to use max with this is kind of like the same thing you have a minimum width so minimum meaning let me bring it over here I can actually click on this so minimum width is this column anything within this column the the width of it will be a minimum of 200 pixels okay so this column will be a minimum of 200 pixels however the maximum will be one fr fr is a fraction okay so one fraction and this is one fraction meaning it's it's 50/50 if I had another column then it'll be one fraction one fraction one fraction and that means that they're all equal now what happens if this one right here has a minimum of 200 and I'm going to say this is a but it has a maximum of 300 pixels notice how this got smaller all right because the maximum width this will be is 300 pixels you can do the same thing with rows so this first row will be a min max the minimum will be 200 pixels tall but the maximum will be one fraction and so the fraction right here doesn't really matter because the height of the actual grid is not being set so this one fr doesn't really matter until you set a height for this grid okay Russell do you see the example I pasted no I don't see if you're putting a link please if you're putting a link please put dot instead of putting comm or whatever put the dot inside a write dot inside of parenthesis yeah Tomas cos it Thank You Tomas and I hope I'm saying your name right okay so this is when you want to use min max refer to CSS width and CSS Heights in my previous videos those refer to this the only thing that's different is that grid uses a new unit called FR which is what else I can see Frank's fractions okay so a fraction of the page there the fraction not of the page of the parent element okay [Music] yeah would that be responsive when we sent min/max it's responsive so fr is responsive because it's taking a fraction of the width of the parent element okay if I set exact pixels just like I said exact pixels is not responsive so if I make things smaller 300 pixel 200 to 300 pixels will not change if I change these to fr like say the minimum of this is to Fr to I can't type in fr in this one okay max is three fr okay but the minimum will say is 200 pixels okay so if I keep shrinking keep shrinking keep shrinking the page if it goes on if the if I make the browser skinnier than 200 pixels then this grid will break it'll go off the canvas okay but the max meaning how big the column is going to be is up to three fractions of it's of the parent with okay so another example I can set it to 800 the minimum is 800 and the max is Auto meaning there is no maximum to this okay if I go here see that 800 pixels it's not gonna shrink it's not gonna shrink because 800 means use this exact size and don't and don't be responsive but if I go back here and change this to 3 Fr come on three what happened to F oh it's on max let's save three F are on the max there we go so if I do this notice how it doesn't go off the canvas because this is more fluid than exact pixels okay hope this helps all right who asked that question ok-ran Jan hope that helps okay Russell what's up what is this okay preloader nice not bad not bad these are some of the immediately I get that dribble vibe I usually see these types of layouts on dribble and it's nice I'm not saying it's bad thing it's nice and the fact that you're able to get that type of vibe inside of a real working website is awesome because too many times do I see on dribble a static mock of a website and people calling that web design and then there's no link to the actual site meaning it was just done in Photoshop Illustrator figma or whatever so whenever I see web design in dribble I always go is it really is it really when you don't have a link to the actual site with actual page make it real and let me see responsiveness of that design before you call it web design and another thing I get kind of kind of like about is they call it web design when clearly they created the design in after-effects and showing motion in the web site as you scroll down or some sort of preloader or some sort of hover effect when it's super smooth and it was done in After Effects or premiere whatever and I'm like show me the code show me that it is real you cannot say it's web design until it until I can click on it with a mouse or tap on it on a tablet or phone okay I'm off my soapbox I'm done back to Russell's design this is awesome because it's real and I can click on stuff and that's cool is this wet flow is this really when flow oh it's not wet flow but the fact that you created this amazing Oh anime I wanted to play around with enemy Jas Russell you're trying to build this out of blood flow got the grid working but the interactions not so much ah I would love to try to make this okay so I've done something like this in a previous web flow livestream no no on my personal livestream on this channel where is it though it's gonna take me a while to find cuz my computer is going super slow but I'll try to find it for you you still have 20 minutes in this stream so so you didn't create this but someone else did and whoever did this is awesome I'm interested what does it look like on a smaller browser and someone bought me three who bought three coffees from Paul great job thank you Bob you rock caffeinated as ever now what was I looking for oh yeah responsiveness okay look again uh how's it gonna stack wait huh interesting it breaks right here like you can't see the content see this is what I mean you can have a cool dribble grid different grid type of website but if it's not responsive then why and so he just the person who creates this could be he or she goes away from the slideshow completely and you know what maybe that's the right move because a grid like that is hard to make responsive your space slider is similar um yeah I'm kind of looking for it I can see that web flow is loading the background taking forever in a day let's see here is it in here and I don't blame web flow for the load time it's my computer I mean look at that lag on my audio in my video I want to figure this out next week we're gonna have a better stream because I'm gonna test this out okay it's not working anyone can find that link oh I'm so irritated by the stream lag anyway Russell like the way you design redesigned it in web flow yeah let's take a look at your link Russell my search I wasn't searching okay type it wrong there we go mmm-hmm nice yeah good job yeah so how to do the interactions of this interesting you did the arrow okay that's one way to do it so with web flow sliders you can manipulate the slider component to put the arrows somewhere completely different you can change the area that slides and the mask you can send it somewhere else on the page there's a way to do this exact grid inside of web flow with a slider component it'll take me more than 30 minutes to create at least an hour but it is doable yeah look for let me see let me see if I can find the video or at least wet flow pixel geek custom slider see here do I have it yeah the space one and I put it on dribble to let me see if I can find it I stole one of your old tutorials and put them on the home page oh I mean yeah look at this this food one that I made this is made in the web flow slider component this is made in the web flow oh my god what the heck is that showing up on the stream what is going on very good oh that's okay well anyways so yeah this is a slider and the this is all web flow the only thing that's different is I I found a way to make this rotate so it's kind of like a lazy susan so yeah this is possible so here's the link Oh wrong link well I mean you can get to this link from there but when I had a lot more time which I don't know I would take dribble dribble animations or whatnot of people's creating websites or web designs and they're not even real and I'm like okay I'll do it and I'll show you that it's possible in web flow and it's responsive so come on people make it real look at the look at the homepage copy in the pages which pages hold on let me go back to your thing what what copy not sure what you're talking about wrestle yeah yeah let me see if I can find the space one pixel heat let me see if it's on my web flow my web flow profile and again I am super sorry for all the lag the for the lag be the the stream issues we'll figure it out next week I'm gonna try to test some more stuff over the weekend maybe connect my PC back up and see if I can send the signal from my macbook to my PC and then PC to youtube we'll figure it out together umm in the pages sidebar pages sidebar homepage copy oh okay oh yeah that's what I'm sorry yeah so it is possible so yeah this is the thing we built a long time ago and this is done using a a web flow native slider so it is possible and that was the project I was looking for so thank you all right elements stacked on top of each other in the z-axis I'd have to shrink and grow and stay in the same position elements stacked on top of each other and I have to shrink and girl stands a musician GATS I really want to help but it's hard to understand without a visual cue without a visual visualization of what you're talking about if you can send me an example former Adobe muse for example a product with call-outs overlaid on top easy enough until they need to be responsive and grow and stay together in the same place call-outs overlaid on top need to understand what do you mean by call-outs I mean like something in the center of the page something that's on the center of the page that like grows and shrinks because I can quickly show you an example of that yeah that looks cool also making me hungry yeah the web so food being yeah but yeah guess um DM me on Twitter if you can send me a link to like a visual thing and maybe I can quickly send you like a loom video that quickly explains that overlaying things when it comes to web flow also okay so for overlaying one thing you can also watch is my video about CSS positions the different things about CSS position static relative absolute fixed and sticky because with position absolute and fixed you can overlay things on top of each other and maybe that that will help you understand stacking elements on top of each other okay yes on my youtube channel should be CSS positioning explained yeah hope that helps yeah any other questions let me see let me go up I'm looking at that transition and I'm just like anyway let's look for any other questions and if you have any feedback on what I can do better for the extremes let me know I want to make sure that you're all getting value from it I want to make sure that these two hours that we spend together helps you learn something where at least empowers you to do something new inside of web that you've never done before okay or if you're new to web flow hopefully empowered you to you know dabble in it try try dragging in something like a grid and saying oh maybe I can do something with this Scott thank you so much thank you so much for the donation thank you where's it from okay so yeah see everyone who donated on my buy me a coffee page thank you so much I'm glad you think this is valuable to you please send me more topics to talk about I think next week what do you think interactions should we do it trying to go trying to explain web flow interactions the easiest way possible because I know that everything that's just doing the web flow interactions in a one thin panel on the right can be confusing it's like so much information into a small space how do you make interactions how do you make some crazy things happen inside a web flow I'll be more than happy to explain that next week Scott Levin I don't even question never got answered oh where is it hold on Scott looking for it looking for it okay I guess we're doing interactions Scott I'm giving you the floor today or for the last couple of minutes no you asked question four times ah okay there you would love to see one off style symbol please is that the one I'd like to see one off style one off style so I can't get my head around flattering and I think gonna have to work on that okay so one off styles yeah it is kind of confusing one off styles let me see here design let's get this loaded okay so one of the newest features that webflow has released is cymbals uh what do they call it it's a cymbal overrides there we go now to be honest I haven't used cymbal overrides personally but I know that there's a need for it because a lot of community members have asked asked for it and the team worked on it so it's needed and it's live so what is a cymbal override so for example this green area whenever you see a green area that means it's a symbol what is a symbol a symbol is an element a group of elements that can be reused on multiple pages and so the cool thing about symbols is when you change it in one page if it's on any other page throughout the website that change pushes to all those other pages as well now we have this navigation right here and if I go to another page that same navigation symbol is here if I double click this come on wow so slow if I double click this and change this to hello up a little world and then click outside of it maybe close it and go back to the home page watch what happens that change also happened on the home page so what if I go to the categories page and I'm like you know what I want to change this only on this instance of this symbol I want to change this so right here I can go to the settings and I'm going to click on link to field and new override field and we've gotta call this I don't know page title okay now you can apply overrides so go to symbol alright so right now it says hello world link content to override field alright so let's see if I can change this to change this okay and I'm done now if I go to home it should still say hello world and there you go if I go to another page with that same with that same symbol it still says hello world however if I go to back to categories it says that override which has changed this okay so yeah the Leia she's is uh I use the symbol override all the time now yeah so that's one way to use symbols and you can link text images yeah there's a there's a couple things you can do with it can you override positions placement you can't override Styles this is only for data so if I go here to manage so yeah you it doesn't seem like you can set overrides when it comes to styles because that's a completely different panel okay Thank You bell eeeh she says the the override is only for the content the structure cannot be overridden cool hopefully that helps you Scott and again sorry for missing your question four times it's hard to keep track yeah okay it's 12:01 I hope you all had a fun time learning let's do this next week Saturday at 10:00 p.m. 10:00 a.m. Pacific Daylight Savings Time 212 p.m. we'll do interactions we'll go through all the basics of webflow interactions because it is a very confusing thing how do you control animations how do you control interactions and triggers and what not that when you click on one thing something else happens with a completely different element or if you click on click on a page and then you want to have some sort of animation load or while you're scrolling where the mouse position is there's so many different things we can learn next week thank you all so so much well I'm gonna I gotta get my music going and when is this gonna take up there we go okay yeah so I appreciate you all I appreciate you all so so much for being here I love doing these streams because knowledge needs to be put out there I've been given this opportunity to to work with web flow and learn from the best from some of the best engineers some of the best designers and I want to do my best to pass that knowledge forward and you know what's weekend passing stuff forward if you learn anything from this send that knowledge forward to to someone else who's also asking questions because we should all grow together if you want to start your own YouTube channel and teach people stuff that you're learning go for it there's so many people who like to learn in different ways so start your own channel and teach because it's fun because you learn while teaching this oh yeah I already said my schedule but yeah so I'll see you next Saturday we'll learn things about interaction but that's it thank you all so much and as always make the web beautiful together see ya [Music] you

Channel: pixelgeek

Views: 2,445

Keywords:

Id: bPJIuLuZ_ak

Length: 122min 41sec (7361 seconds)

Published: Sat Apr 25 2020