Building a grid layout in Webflow from a Figma file - Live Stream - 11/04/2021

hello and welcome everyone to today's live stream uh my name is john from web dev for you i do these live streams every monday through thursday from 12 pm to 1 pm central and we cover everything web flow from building entire layouts to creating interactions and animations and i also provide support via the super chat feature on youtube so if you need help with a personal project or something in webflow you can drop a super chat and i can assist with your project so i can see here that yvonne has sent a super chat a very generous super chat i did get the email yvonne so i do cover super chats at 12 30 a bit after 12 30 after we do some designing in webflow so i got the email about hubspot i'll see if i can help with that and a few other things within that email appreciate the super chat very much thank you and uh and yeah so so we'll definitely take a look at that and i got the read-only link to your project hi tazewere hello i'm good thank you how are you nice so today we're going to build this layout here using grid and the wizardry method so i looked at this and i thought this would be a good example of creating a website that scales because to me like using a full width layout and grid and the wizardry method seems like a good combination like before i wouldn't necessarily approach these type of builds because i usually like creating sites that have containers and for this type of layout i don't see it having a container i just see it being a full width site on desktop and so for this i feel like the wizardry method would work really well because we can scale the entire site on desktop we don't need to add a container necessarily and then we can change the layout on tablet hello eli welcome welcome yeah so it should be a fun super chat today yeah and then we'll look at yvonne's project uh after we get into building this um so i'll quickly get started um the way i'm going to approach this build is we have let's see i want to divide it up into grid section so we have one two three four five six i'm just looking at a at a grid layout to see like how many columns and rows we should have so it's looking like we should have let's see this is one row this is another one so one two see one two three four five six so i'm gonna do six by one two three four six by four let's try that so i'll go into webflow and if you're new to webflow if this is your first time watching my live stream um feel free to ask any questions um sometimes i do dive into like deeper concepts and ideas in webflow but i understand that there's new users who just got into webflow and it can be a bit daunting at first but i'm here to help if you have any questions initially regarding webflow so yeah let's go ahead and start building so i like to start all my projects well usually i put all my elements in a page wrapper so i'll add a div and we'll call this page wrapper and then i'll add a div in here and we'll call this um hero section and i'll set them in height for this to 100 vh so it fills the entire viewport so this site initially on desktop is just going to be 100 viewport and actually let me backtrack because we're using the wizardry method i'm going to go to wizardry technique.webflow.i let's go to the the documentation and we're just going to clone this project so we start off with the wizardry method so we'll clone it and then we'll have a style guide to work with all right so we have the style guide great um if i go to the home page oh we're on the home page um the body is set to the excuse me uh 1vw so the font size is 1vw so when we so we want to set all the units within the site to m's so i have a whole whole backlog of working with the wizardry method so i'm not going to cover every little detail about it but that's the general idea and timothy ricks really describes it well in his documentation if you go to wizardry-technique.org you can get more of a feel of how to use the system so jayro why do we use pagewrapper so the reason i like using pagewrapper is because in in a case where i want to copy and paste the entire page to another page i can just copy the page wrapper and then i can paste it onto another page easily whereas if i didn't have the page wrapper i would have to copy and paste individual sections one by one and it just makes it a bit more difficult so having a page wrapper and having all the contents in the page wrapper i can just copy and paste an entire page to a new page anytime i'd like and it just saves a little bit of time um so yeah that's a great question and nice so yeah let me create a new page here i'm gonna create a new page just create it untitled and then i'm going to set this page as the home page okay and then i'm going to call this style guide [Music] and click save okay so we have a blank home page and we can access the style guide here so right off the bat let's go ahead and install a new font so the font that's being used in this figma file is circular but we don't have access to circular here so um let's see where's my site yeah let me close this one because we're not going to use it so i'm going to use dm sons for the font so we'll install dmsons and i'll just install all the variations great i'll go back into the designer and cool so we have a blank site um and yeah let me go into the style guide so let me style all the headings so all the h1 headings we're gonna set it to dm suns right here and dm sounds is probably the closest thing maybe to circular so i look using it dm sounds and notice that i'm styling all the global headings um this will make it really easy to add headings and not have to restyle them all right so we have that and then for the paragraph let's select the all paragraphs tag and select dm sounds alright so cool and just like that we've styled pretty much all the typography elements for the site nice all right let's go back to the home page and this is where i'll start building out my elements so again we're going to add a div block and i'll add a page wrapper and then in here i'll add a div or not a div a section so we'll add a section and i'll call this hero section set the min height to 100 vh so it fills the entire viewport uh ivan wrote why not apply the font to all the all body tag um good point yvonne i missed that and let's do that i don't think or maybe yeah maybe applying it to the all body would have changed it let me see all each one headings let me remove this yeah um that's a great point uh yvonne yeah the only the only instance i wouldn't do that is if i had different headings fonts for the headings and paragraphs but yvonne makes a really great point where by just applying the font to the body the all body tag we don't necessarily need to apply it to the individual headings so that is a big time saver yvonne coming through with the shortcuts or the time savers again um so yeah definitely listen to yvonne he's worked a lot in webflow so just a little caveat there appreciate it yvonne um so let's go to the hero section and this is where we're going to do the grid so let me just bring this over here and we have so would i say four columns and six rows so let's go into workflow we have the hero section and i'll set it to grid actually i don't like applying grid to section so i'll just call this div hero wrapper and we'll just set it to position absolute and full and then i'll set it to grid and we'll do four columns and six rows and we'll remove the gap and perfect okay so when this within this grid i'm gonna try to create this layout so we have a div block up here um so i'm gonna say let's see so this will be one row or yeah one row this will be two rows and this will be three rows oh uh thanks yvonne um yeah i'm happy to hope but i've seen your work so uh don't cut yourself too short there like i know you're not cutting yourself short but like you're you're good so i would definitely continue uh building um maybe you're like a webflow savant i'm gonna call it yvonne the webflow savant you know when you start something you're just really good at it um so anyways uh cool so we have uh one row for that top part we're gonna add two row uh two rows here so i'll add a div block and we'll call this a logo wrapper right there and then we'll add another div block and this will be one two three this will be three just like that so we'll call this um we'll just call it content or title wrapper how about that title wrapper [Music] um and then case study so we'll add a div block and this will be let's see one actually let's see one two okay case study yep this will work and next project and then we'll add a div block and this will be uh next project uh wrapper uh do we have a discord community for webdav for you there currently isn't one that has been mentioned before um yeah if i it feels like i've gotten a few requests for this already so maybe i'll i will create one um yeah i might have to make it i know this might not be great but i might have to make it paid because if i have to give energy to the discord server uh it's going to take some of my time so yeah and i don't know if i want to make it paid i don't know if i want to do that so i'm still debating it but thanks for bringing it up jay um would anybody pay for that like i know it wouldn't be a large amount that i would charge for a discord server um but i yeah because i'm currently working on a few projects at the moment and and i wouldn't need to monitor the server and take you know manage it and stuff like that so uh now that it's been brought up a few times i'm gonna seriously consider it because it could be a cool thing where we can all just have access to each other at any time and help each other with web flow so definitely thinking about it all right let me add another div block here and this will be this here so we're gonna i'm gonna make this two rows and we're gonna say um left image wrapper and we'll add another div over here and this is gonna be so let's see case study oh wait um hold on what's that case study i didn't give this a name so this would be case study wrapper and let's make it two grid cells then we have this div block and this should be yeah there should be two grid cells okay boom perfect all right and then this big one so this is gonna span all six all eight cells and this is gonna be this is going to be slider wrapper i'm going to make this a slider then we'll add another div and this will be the social wrapper so right here i'm gonna call this social wrapper and then one last one and this will be video wrapper right in here we'll just span it like this okay and i'll say video wrapper don't i don't like telegram so much so it would it would be a discord server dylan if we were to do it okay so let's see um [Music] yeah so we have that now i just need to adjust the grid a little bit so let's make this a little bit thinner like that and then this will be like this and this will be like this maybe like this yeah perfect all right hey atrn hello hello yeah the discord might be like five bucks a month or something like that um because that would make sure that anyone who joins is serious and we don't just have a bunch of just people joining the discord but yeah all right so yeah that's looking pretty good um let's change some of the height as well so this one let's make it fr unit so you can make the rows fr by just clicking on min max and then going back to default and that's what i'm doing here and i just want to see here so we have that maybe i'll make this 1.5 make this a little bit larger here and yeah i think that's good all right so if you notice like what i'm doing here maybe this should be a little bit bigger this top one so i'll do like something like that um still want it a little bit taller like this uh yeah that'll work yeah excuse me yeah css grid is really good i lost my voice there for a sec um so if you're looking at this layout you'll you see that i'm able to kind of recreate that similar layout here and just to make it more visually kind of makes sense what i'll do is just grab this green color here and you know just to showcase it a bit better we'll paste that green in here so we see we have that green we have the green here and green here and green here right i can just change the opacity i just want to showcase like how the layout is coming out so if we look at this and we look at this we can kind of start to visualize how the layout's going to look like okay and yeah let's just remove that those colors and one thing i have to do actually let me see here for the grid no i think we can leave it in fr units that should still be responsive so if i scale it or if we'll have to publish it but i think it'll be responsive once we scale it all right so let me export some of these images from figma uh let's see let me see if i can get inside here and i want to export this image so export let's see did we get the entire image let's see no we just got that piece um let's see here starting learning ui on monday i joined two of kennedy's crowdcast events and loved his process awesome yvonne yeah eric is is really cool i've talked to him personally really really great class great stuff um just trying to export the entire image and not just ignore overlapping layers no uh let's see group frame selection let me see if i can get this entire image one second okay well it's the same image as this i'll just export this image without yeah i just want the image there we go okay perfect all right so we have this rectangle and i'll just call it um camera image [Music] and we'll export it or import into webflow okay i'm not going to make this a slider for now because it would take too much time but yeah this image is a bit large but we'll work with that for for the moment um but i'll add the background here choose image we'll select this image here and set it to cover and center alright so we have that image then i'll add the same image here and we'll set it to write cover and rate all right cool so we'll work with that yeah this needs a bit more work it needs to be a bit thinner i feel so maybe 0.25 yeah that's better nice then we have this text or is that a logo that's just text okay let me grab this color for now so i'll just like pick pick out the easy parts of this build um so we don't spend too much time so let me add a text block here and i'll call this next text [Music] and it is 48 pixels oh so we need to use m's so one vw so let's just take a look we'll just make it just kind of eyeball it next project and we'll make it dm sounds bold how about three three is good we'll add some padding to this 30 i hold down shift to change the padding on all sides and we'll adjust the line height here all right so we have that that looks good um see so that'll be h1 yeah i'll make this an h2 for the case study say heading h2 and we'll say case study heading maybe let's try some different class naming convention so case dash study heading and we'll set it to white say case study [Music] and we'll add a paragraph say case dash study underscore paragraph and we'll make it white and that looks good so this white is 50 opacity and then we have this more about us text here so it's going to be a link block and here we'll add a text block and we'll say k stash study underscore about text and we'll double click more about us [Music] and for the length block we will say case study underscore link block and we'll make it white and that's it cool then we have this arrow here so i'm just going to export this arrow and as svg export long arrow rate and drag and drop in there awesome and then i will drag and drop this arrow in here and for the case study link block we'll set it to flex and perfect and then i'll add some margin to the text about 20. that looks good and we will let's see so we'll set the position to relative for this case study wrapper and then for this case study link block i'll set the position to absolute lower left and then we'll do something like we'll add some padding to this actually maybe 30. and for this we'll just move it 30 pixels from the right and 30 like that okay or let's see let me see if there's a better way to do this if i set the case study wrapper to flex vertical and then let me try setting this to rel to static and i change the alignment no that doesn't quite work so we'll just do position absolute just like that let me add some margin to the bottom here that looks good we have this text here that's vertical or aligned vertically so i'm going to skip that for now because that would take a bit longer for this paragraph i'm going to give it a max width of something like um we'll use characters maybe 42 characters yeah that's okay maybe that's still too wide let me copy this text there we go and we'll say 36 characters that looks good nice so we have that uh case study i can add a bit more padding here maybe 40. and we'll say 40 from the bottom and 40 from the right here and it needs to be m so i always forget about that so let's try one m or two m's yeah so when working with the wizardry method we'll do two 2.5 m and 2.5 uh m i always forget yeah when working with the wizardry method you want to use m's instead of instead of pixels so let's say two m's two and one m and let's try 0.7 m there we go and then for this this will be 2.5 m instead of 40 2.5 m so 1 m is 1 v w just and that's how we make it responsive basically 2.5 m 2.5 m and 2.5 m okay and the text is in ms yep it's in vw wait three no should be 2.3 m's there we go okay all right so these are kind of the same size keep it consistent and i'm liking that more about us could be a little bit bigger so maybe 1.5 m nope 1.2 m yep there we go all right so it's coming along let's publish it and see the responsiveness of it maybe i could find this image on unsplash to get a higher quality image so while it's doing that i'm going to go to unsplash and type in green camera see if it comes up no i don't think it's gonna i'm gonna find it but we could use any of these other images because the image i just downloaded isn't high quality i might just grab one of these other cameras so green camera nope doesn't show up and that's like a green camry don't want that okay we'll come back to it uh so let's preview it um in what in the site so we can already see it's kind of it is responsive so as i'm resizing it this goes to tablet so it uses pixels but you know i can zoom out and we see the text doesn't get larger so i'm noticing here i didn't use ms for this margin and pad and padding and we can see what happens to that text it just it moves which is what we don't want so we'll go back into webflow and then here we have to use m's so this will be one point let's just do the same thing one 2.5 m's 2.5 m's 2.5 m's and 2.5 m's so i could do it here if i if the screen size is 3000 pixels it still looks the same which is one thing i like about the wizardry method um yeah let's let's see this here so camera let's see if i can export this camera yeah perfect um let's just do jpeg i yeah instead of png i don't know why i saved this one as png we'll go into webflow let me add that image oh i have it here we'll add this image and we'll set it as the background here so let's add the background choose image set it to cover center and nice okay so that looks good i feel like this section is too short plus adjust the grid [Music] so let's see here hmm unless i went like this no um let's go back in here so i would do something like this maybe yeah let's try that yeah that's not bad um cool so then i'll add an overlay we'll copy this and let me add a div block in here just add a uh let's call this video color overlay [Music] position absolute and full set the video wrapper to relative we will add this background image or background color and adjust the opacity okay nice um yeah so i think i'm going to leave it at that um i just wanted to showcase kind of the power of grid uh for this logo i would probably just export this as an svg uh because it's much easier to import images that are already transformed than than trying to transform images or text in webflow so you know i would just export that as a logo then import it into webflow and then just add an image in here [Music] and choose the image and then select this logo for the logo wrapper give it a flux setting of center center and there we have the logo it's not the same font so it's not going to look completely cohesive but i think that's okay and this font might be too big so what font size let's set it to point seven or see one m let's see what the style guide is for the paragraph it's one m okay cool um so yeah it's coming along um we just quickly built that layout then on tablet what i would just do is select the grid and i would just delete the columns i would actually maybe set it to flex and vertical yeah and then i would mess around with the sizing of each section so this case study wrapper um you know i might give it a specific height 500 pixels or so um yeah and then for the heroes section i would set this to auto and let's see hero section hero wrapper yeah we don't want a specific height to this so let me see hero section and yeah the height let's see 200 vh well in any case i would just mess with this and set it to flex i'm not sure why it's not getting taller here uh yeah hero rapper uh maybe this needs to be relative yeah so the hero wrapper needs to be relative okay and then i would yeah mess with the heights here maybe 400 and next project something like that the slide wrapper maybe 400 left image wrapper i might not show this i don't think we need the left image wrapper but yeah that's the idea i would use flex on tablet all right so yeah hopefully that was insightful you know it's very easy to build these types of layouts and web flow well i shouldn't say easy but it can be done using grid and the one thing i'm not sure i would have done maybe i would have done differently is setting this hero wrapper to absolute i might do like relative and just set it to 100 height no that wouldn't work maybe 100 vh or maybe i would have just absolute and full or i could just add the element to the section but i don't particularly like setting the display setting to to a section i'd rather add a div block in the section in case i need to add some padding or something like that or margin yeah in case i need to add margin or padding to the section but yeah it's kind of just a practice where i just you know just have the section and then put put elements in the section not necessarily give the section a flux or a layout setting um but yeah that's it for the build we're going to move on to yvonne's um super chat and we'll see how this looks here yeah i can zoom out and okay so this image has to be in uh arrow image or case study underscore arrow uh this would have to be a width and a height or the margin would have to be an m so let me do one m and then let's see how that looks yeah so the arrow has to have a width and a height and m's as well let's do two m's maybe three m's yeah or 2.5 m's all right and then after this we should have a fully scalable site so i'm going to zoom out on my browser and notice nothing changes except the logo here notice the logo on the left and why is that because we haven't set a width and m's so let's do that so um logo or just logo yeah c2ms 1.5 m's 1.8 ms okay cool now that should be it so using the wizardry method you can make uh text scalable and you know on a super large screen this would look the same so just to demonstrate that i'm going to copy this let's go to sizzy and i'll just paste that in there and this is a laptop small laptop medium imac retina so you don't notice any change because the text is scaling and the images are scaling i can go in ipad 12.9 we're getting to tablet here so it does look different on tablet the wizardry method uses for the body if we go to the body all pages it uses 14 pixels for tablet and mobile for the font size and then on desktop it uses one vw and that's why you can scale it up you can scale it up from desktop desktop and up and it'll retain its proportion and sizes so super powerful method and props to timothyrix for providing that all right so yeah i think we're done with this build for today i might revisit it on monday and we can finish out creating the social and the text here and these little design elements uh awesome so let's go to yvonne if you have any questions about what i just did feel free to post it in the super chat in the meantime i'm going to go to yvonne's super chat and so yvonne writes he created a project using the client first design system and it's live but has some time constraints and some features have to be migrated from the previous webflow project but i would like to discuss how to improve the integration between third-party services like hubspot shell form services an asset c curves folder was difficult to use well for me because of its full width use and request by the client that it should not scale best design practices for a modal full screen when triggered to appear on screen ok let's take a look all right wow loving it good stuff yvonne um very nice let me go to the live site okay wow that's a cool effect very nice very nice so i'm guessing this is a png with a transparency i'm just trying to take a look here lottie element that's a lottie helmet okay nice there's a good stuff let's check out the blog i like the colors very nice and the the radius on these cards that's very nice um okay so let me get to the question and let's see discuss how to improve the integration between third-party services like hubspot and shelf form services so i'm not well versed in third party integrations like this uh yvonne but there is a great webflow video on integrating hubspot and webflow um you can just you know they have a hubspot let's see they should have a video okay capturing so this video here capturing sales leads with hubspot crm i would watch this video because it could help you with that specific question it's a pretty straightforward integration you just have to put some code in the form from humpspot and you should be good to go other than that i'm not sure i could provide much more insight into that um you know just follow the instructions in this video and you should be good to go with hubspot and maybe watch a few hubspot videos to understand their service but i personally have not worked with hubspot i've worked with mailchimp and the regular webflow form but you should just be able to go to the form so let's go to the contact page if there's one maybe the book a demo uh is it on the home page let's see book a demo goes to doesn't go to a page so yeah like if you had a contact form for example i'm just going to add one here just contact form or form [Music] and then you style your form and then i think hubspot works with an action uh link and and then you want to set the method to post i i believe and uh yeah and that should be good to go so i'll move on to the next question let me know if you need any clarification on that but the next question is an asset see curves folder was difficult to use well because of its full width use and request by the client that it should not scale okay so let's go to the assets and uh curves talk yeah i mentioned curves [Music] i don't see folders let me see here okay here we go curves uh so let's see um an asset was difficult to use for me because of all words turned curve hero curve integration curve track curve uh where on the page is this curve image let me delete this form yeah if you could direct me to where this image is on the site uh yvonne that would be helpful yeah it's a nice shadow too i like that shadow nice watch video book a demo they want the curve to expand full width between the lottie files um is this a lot okay to expand full width between the lottie files so let's see curves i'm just going to drag and drop this in here i want to see what ah okay i got you so kind of like creating a line down the site okay oh excuse me um let's see let me look at the structure here we got the page wrapper the section hero i didn't use it because i couldn't get it to work okay um let's try to add that curve to radial gradient radial gradient okay all right uh let me try something yeah i'm not sure if this is right but i'm just trying some things out here just to get a feel for what you might be going for so i'm just setting the curve to yeah just setting it as a background image to the section um as if they connect okay yeah i might just try setting it as a background image to the section and then you know it depends on what the curve does and yeah okay great so i was going to actually mention to use svg because these are um these lines could be a lot more crisper using svg so that we have that one that looks good and then what i would do on this one is use this svg image and uh can i rotate it i don't think i can rotate it yeah i would just maybe flip this svg and i think you could get that effect of like going back and forth let me try downloading this svg image to see if we can get that effect going so let me save as okay so let me open this and i'm just going to rotate this we have that yeah i'm just gonna reflect it horizontally yeah click okay okay file export for screens line svg and export okay now let's go back in here can i add i don't think i can add images it's a read-only link yeah so that might be oh it does no i can't yeah it's not gonna let me add an image but i will try that uh yvonne i tried to but it scales from one pixel to pixels and they didn't want to grow okay um the svg scaled oh i got you ah yeah yeah okay i got it i got it um yeah there's a piece of code you can use for this um let me try to find an example where i used it i know i've used it before let's see set let me try it over here yeah so i'm researching the there's a piece of code that will let you do this uh yvonne uh retain retain with [Music] yeah i think i know where i use it let me try to find this project where i used it and share the code with you yvonne and i'll email it to you um the code let's see just gotta find this project ah here it is okay let's try it uh yeah vector effect non-scaling stroke that's it okay so here here here's what we're gonna do and i'll try to demonstrate this quickly in webflow um actually let me just use the project i was working on so i'm not creating so many new projects i'm going to create a new page create and yeah we'll add a section [Music] and we'll just make it a full width section and i'm going to add this uh you know what i have to add the path as a well no no i don't okay let me drag this in here i just downloaded that svg line um so this is what you might have to do um ivan and let me go back to the chat let's see yeah okay so let me open up so i'm going to right click i'm using adam the atom code editor to inspect the code of this svg for a second and just to see if it's a path it should be a path definitely but we want to make sure okay so let's take a look let me view let me wrap okay so view box style yep it's a path um perfect so what we can do i'm gonna add this image as a background um add choose image and set it to cover okay so we have this line and basically yeah i'll just kind of demonstrate what you mean so we have the line and if i make the browser larger well the line's not changing here or yeah let's see okay yeah the line does get a bit wider and smaller so what you want to do is add this bit of code i'm going to grab it here and okay so it's oops it's style path vector effect uh non-scaling stroke uh stroke width let's see what the stroke width was initially you might not need to change this but in case it does still get smaller you can use this uh stroke doesn't have a stroke width but that's fine yeah you can set the stroke width here let's try 0.5 and the stroke i don't need it to be a specific color let me try something see if i can change the color as well and you could use crisp edges too let's see how that works and let me center this stroke there we go that's better one pixel okay let's do that all right uh still feels like it gets thinner and i think yeah this is where we have to add the svg as an embed so let me delete this from the background i'm going to add an embed element and i'm going to add the svg as code save and close and embed let's try to set it to position absolute full and we might have to move it something like that but you can position it that way so i do think it needs to be an embed because i don't think we can access the the svg within the file if that makes sense let's try this one more time and we're a bit over so if anyone needs to drop out that's totally cool let me clean up my tabs in the meantime all right okay all right so there's the line okay yep that's it and you can remove crisp edges crisp edges it does make it super crisp but there's also anti-aliasing i think that's what it's called it makes it look so crisp that um it's almost too crispy like i don't know if that makes sense and did it change it to blue no it didn't change the color i think to change it to blue i would need to let me see html embed let's see view box yeah i could change it here the stroke color here um within the embed but we don't need to do that so yeah yeah no worries happy to help uh yvonne um yeah so just vector effect non-scaling and stroke with so i'll go ahead and send this code over and i think you should be good to go you just have to add it to the embed set it as you know behind other elements so it doesn't interfere with the elements in front um and yeah and then i would just yeah like inverse them like so it creates kind of this effect of like a line running through the site it's a really nice effect [Music] and i would move this up have you ever thought about doing 1.5 sessions every two days uh no one hour is plenty for me um yeah after one hour i'm just kind of like i need to work on a few other things and i don't i know people have other things to do as well so i don't want to make my streams too long even though i do go over an hour sometimes yeah it's taking so long to publish but anyways but there we go we have a line that stays one pixel width no matter how big or small we make the site you might have to work on the responsiveness of it i think it's because it's absolute and it's 40 it moves up like this so i would just kind of work with the positioning the layout you know how you want to do it it could be i don't know if i would no not fixed but yeah or add some padding let me see i'm not crazy about adding the absolute there let's see no padding wouldn't work uh yeah i would kind of work with this here uh yeah so for sure for super chat i'll definitely stay a bit longer definitely um so let me let me send yvonne this code and yeah and i'll be happy to help gentile gentile yeah so sending this your way now yvonne um svg path code and all right there you go all right hope hopefully that uh that helps yeah no worries jintel um go ahead and send your project the stream's going to go a bit longer everyone because i'm going to help out here but yeah thanks for joining if you need to drop out thanks yvonne i appreciate the super chat super generous same with intel appreciate it yeah it definitely helps me move forward with the streams and continue to provide good content yeah so yeah i'll make this the cover of my youtube uh of this youtube video here yeah and super like uh happy with the progress you've been you've been making yvonne it's really great so yeah i'm not sure you're probably sending it to email jintel and my new template should be out soon which i just got a notification of super happy about that i'm gonna be very happy to share this template with you the the youtube video will be out today i just have to make sure that it's up the template i'm trying to get it so the site doesn't scroll to the bottom on load yeah i feel like i've seen this issue before can you send the read-only link jintel um to my email [Music] you can just send it through my contact form [Music] um [Music] lisbon web summit that sounds important lisbon web summit [Music] uh yeah just uh go to webdevfree.com and go to contact and just fill this out here and it'll go to my email wow yeah that's important yeah i thought that was amy poehler for a second parks and recreation great show good stuff yeah that's awesome yvonne mcguire yep cool cool so yeah the guy from apple is going to be there what's his name let me go lisbon must be a huge summit yeah what's his name i don't know these guys names craig federighi yeah is he italian must be italian yeah i don't know all right awesome let me check my email should come through in a second actually let me see if my template is in the marketplace i'm super excited about that and then i have another template i'm working on right now there's my dog sorry about that uh let's see let's look at uh there should be a recent maybe there isn't templates oh yeah here we go okay it's not up yet but once it's up i will show it because uh yeah excited about that all right um so here's the site jintel uh yeah i feel like i've seen this before what what is the ah wait wait uh i almost had why does this happen um i know this the contact form yeah the contact form okay so the contact form there must be a setting on it i can't believe i remembered that the support definitely helped working in support uh contact form so let me create a new page jintel and i will showcase it's auto focus on the contact form so if i type add in a form and i have any of these fields set to autofocus you see this here so if i click on name or email address and it's set to autofocus the site will scroll down to the form because it's trying to auto focus on the form as soon as the page loads so you just need to uncheck that so if any of these fields have auto focus just remove it and you should be good to go let me know how you go if that fixes it and i'll stay on just for a bit longer just to make sure we're good to go it started on third and ended today lisbon time nice cool yeah keep keep sharing your projects yvonne super super awesome and john be a think tank yeah two years in support like you you know i've seen many different use cases and um you know pretty much all day working in webflow yeah yeah that's why i'm happy to be providing this live stream and just helping out okay nice it solved uh if it's published let me let me just double check that's probably not published yet but that's a cool i love that effect here kevin hart's what now executive producer nice yeah so great looks like uh everyone's getting some good work good stuff all right so yeah thanks everyone for joining glad i was able to help yvonne and jentel and today's thursday so next live stream is going to be next monday and yeah we're going to have some fun with more design on monday and building and all that good stuff so today we covered the wizardry method again i built out the layout for this figma file this is what it's looking like so far it is scalable oops so i can scale it i didn't have autofocus selected okay so it's not autofocus so let's see let's go back into the site and let's let me just check something form okay something with js all right so yeah if there's custom code maybe try removing that just for a moment jintel and that will narrow down if it's if it's the code or if it's something in webflow uh let me go to the site here it is if there's any custom code yeah let's see oh in view what's this that could be doing something um yeah try removing this in view code and yeah i don't think what is that jquery in view jquery in view azure as a bindable interview event event that's some period the usb port contains method yeah this probably has something to do with it um and you can let me know what you're trying to do with the script and maybe we can accomplish it just in webflow without the script and if you can send me an email um or we can chat through email jintel because i'm gonna go ahead and close the live stream um because we've been it's definitely past one o'clock but we'll follow up via email gentile just try temporarily removing the custom code to see if that's what's causing it and uh we can help we can follow up uh from there all right uh thanks everyone uh yeah thanks siobhan thanks dylan um thanks for joining um jay thanks for joining tazewere thanks for joining awesome have a great weekend everyone i think i might watch the eternals this weekend so looking forward to that other than that yeah have a great weekend have fun developing and yeah developing in webflow and designing and i will see you monday thank you peace bye

Channel: WebDev For You

Views: 719

Keywords: webflow, web design, web development, live web development, live web design, building a website, learning webflow, webflow for beginners, website live stream, webdev for you, webflow live website build, webflow flexbox, webflow layouts, webflow web design, webflow grid, grid in webflow, from figma to webflow, figma to webflow, css grid in webflow, css grid

Id: J5qSKJlMCQ8

Length: 74min 5sec (4445 seconds)

Published: Thu Nov 04 2021