Adding and styling a contact form in Webflow - Live Stream - 10/12/2021

hello hello hi bro excuse me hi everyone uh welcome to today's live stream uh today is uh october 12th uh 2021 and yeah if you're new to the live stream sorry i have the hiccups today i've been trying to get rid of them uh if you're new to the live streams i do these live streams every monday through thursday from 12 p.m to 1 p.m central time and we and my voice is cracking as well i might be losing my voice but yeah we cover everything webflow um from creating layouts and uh websites and yeah creating layouts and workflow and animations and interactions and webflow and i also provide support via super chat uh via the super chat function on youtube youtube so excuse me my voice is going and i have hiccups so i'm gonna try to get through this live stream as best i can so just bear with me um hello killa hello tazewere how's it going um we are going to build this site here today um so yeah it's just a contact form excuse me and we're going to style it and make it look really good um so yeah this is what we will be building today today sorry um so i'm just going to give a few minutes to let everyone kind of come in as i set up the slide here and today is tuesday oh excuse me build a contact form all right so yeah so today's agenda we are going to well today is uh yeah today is tuesday uh today's the 12th and welcome to everything webflow and on today's agenda we're going to build a contact form in webflow and then i'm going to that's from 12 to 12 30 and then from 12 30 to 12 40 i'm gonna field any questions about this build and then from 12 40 to 1 pm we're going to have a general webflow discussion and i'll field any super chats so that's what the agenda is looking like today so again we're going to be building this contact form and styling it oh my god hey amy hello i saw you left a comment but then i couldn't find it any anymore so today's not my day as far as far as like talking and doing the live stream um like my voice is going and i have hiccups that's the perfect combination for doing a live stream and i really tried everything to get rid of these hiccups like i tried all the techniques they just won't go away so amy if you if you have any any questions today uh definitely let me know in the chat and i'll be happy to help so killa uh you wrote can we do a particle logos and webflow today or anytime in the future um can you send me an example of what you mean killa to my site oh my god that's gonna get old really quick um yeah just send me the site in the contact form and i can take a look that is a kind of highly um what do i call that like kind of a personal request so i would appreciate a super chat for that um if you want me to to cover that um but yeah we're gonna be building this contact form um so yeah we can get started hope everyone is doing well if you're new to the live stream streams i do these every monday through thursday from 12 p.m to 1 p.m central we cover everything regarding web flow layouts animations interactions and i provide support via super chat super chat if you need help with your website i'm just going to place this mic a little bit lower so try not to get the hiccups that uh pronounced all right so yeah um so again we're going through these wireframes um so i looked you know this is a figma wire wireframe so i'm just grabbing all these layouts you know whatever layout i want to build for that day i just grab it and then we build it so this is the layout that i saw you know it's just a wireframe and you know i went ahead and recreated it in webflow we can see i like to use sizzy but actually i'll show that in a sec but you know it's fully we can make it a bit more responsive but as you can see it's very responsive for different devices and we can work on here the responsiveness we can work on that a little bit um but i guess i'll showcase it now i use uh sizzy.com application um oh so amy a super super chat is a uh it's a function in youtube you should have a button it's like the money symbol and you can just drop me like a donation basically basically it just helps support the channel and helps support me to create these every day almost every day so if you just drop like a donation i call that a super super chat because it's a it's called super chat and youtube where you click the dollar sign and then you send a super chat and you just drop it drop in whatever amount you want to drop in there and um you know super chats by sending a super chat super chat you can ask a really specific question to your personal project or you could ask me to go over something specific so if there's something you want to learn how to build in webflow or there's a feature you want to add to your website and you want to know how to do it or you want to see me do it you know you can drop a super chat and and i can get to that near the end of the live stream uh great um sweet so killer bro i just got back and made coffee coffee is great and set up peppa pig for my daughter cool that must be a show i'm guessing uh but yeah i'm just showcasing um so we can see what it looks like on different devices um so i can see here i can make this more responsive here on this laptop 15 inch looks good ipad definitely needs work so yeah ipad 11 inch looks good iphone 12 that looks pretty good iphone 12 max looks good and the pixel 5 looks pretty good as well you can probably add some margin there but the 12.9 inch we definitely want to work on that so we're gonna have to work on this a bit here for the 12.9 inch so yeah let's get into the build so we don't spend too much time here on the intro yeah no i i tried everything killer i held my breath i drank water in a weird way i you know i just couldn't do any more because it's right before the live live stream if it gets too annoying then i'll cut the live stream short and try to work on these hiccups but i'm also my voice is cracking because i think i've been talking a lot um amy wrote okay thank you i will do that do that and send my question that i posted towards the end sounds good thanks amy all right let's get into the build um let me start a new project here in the midst of my hiccups and we have a new project and amy while i'm building this if you have any any questions feel free to to write them up as well um in the chat those don't require super chat um if you if there's quite questions about the build of the day all right um cool so we have a blank project again we're building this contact form with this image on the right so we have the body we have a blank project should you bump up the opacity of the input div block um i kind of like the opacity kind of being lower here so yeah um but yeah we'll get into that killer all right so for those of you who have seen my live streams we'll start off with the section so uh amy you're probably familiar with this but i hold down command k to add elements it brings up the quick find so you can add elements here as well from the elements panel but i hit command k it just makes it easy for me to add elements and i'll add a section i always like to start my sites with the section and any different sections you know any different parts of the site i'll add a new section so i'll call this contact section and i'll set the min height to 100 vh for now hey what's up dylan how's it going um that looks good and then i think for this section i'm actually going to set the display setting to center center so apply a flex setting center center i didn't do this in the original one but i think this might work out a bit better and then i'll hit command k i'll add a container every time i add a section i want to put a container in the section or actually no not for this one sorry so this is a full screen contact form and we'll get more into the details of how i built this in a second so in the contact section i'm going to add a div block and we're going to give this the name contact a wrapper contact wrapper [Music] and we're going to set the width to 100 yeah that's good and then in the contact wrapper i'm going to add a div block so let's look at the structure here in the navigator so we have the contact section we have the contact wrapper so yeah i never like to add elements directly to the section i like to put things in a wrapper and that gives me more flexibility for my layouts as i'm building so we have the contact wrapper i'll add the con a div block and i'll call this contact left and i'll add another div block and i'll call this contact right okay and then for the contact wrapper i'll set it to flex horizontal align stretch and justify start and then for the contact left we'll set it to let's do sixty percent and the contact right let's do forty percent in width okay that looks good and then yeah so now we can start adding content uh content to the contact left section so for this site i'm using the the font sign and then i'm using varela round for this because because this heading has such a short x height i wanted to make sure i found a font that had a short x height as well and varela isn't too short but it's the shortest one i found by the default ones in webflow uh yeah for sure killer um i'll be happy to go over that cool cool um nice so let's go ahead and install the the font sign so i'll go into fonts and i'll install it so s here we go it always takes me forever to find these fonts we have sine right here here we go sign sign mono might be cool too add font let me install sign mono we'll get a bit creative in in this live stream assign mono might give us a very cool paragraph text i haven't used it before okay so let's go into the designer and in the contact actually let's add a background color to the section so let's go yeah let's go into the cooler so coolers dot co is a website i used for color palettes and i used this color palette here for the site so i'll grab this color here for the background i'll go into the section and just give it that background color and then we'll go into the contact left section i'll hold down command k i'll add a heading so we have the heading there and i'll call this i'll select the global tag so we can all of our headings will be the same um yeah this the same every time we add a heading so all h1 headings and i'll give it the font sign and i'll make the font size 56 and the line height i'll do 1.3 dash unitless okay to the section i'm going to add 5 vw of padding from the left so we have some spacing on the left and that looks good this contact right section we're going to worry about about it in a second but we have the heading and i can write it and get in touch that looks good and then i'll go into yeah and also for this heading let's give it this blue color so we use this color palette so i'm just going to grab this blue color and select the all h1 headings and make the color blue okay i'll select contact left i'll add a paragraph element we'll style the all paragraphs text and i'm going to try the sign mono i do not like that so let's do varela like i initially had so varela i'm going to use a font size of 16. let me make sure that's what i used here maybe 18 no 16. and a line height of 1.7 unitless so unitless is like percentages so it's like 100 line height or in this case 1.7 or 170 i think i don't know if they correlate exactly but i like using unitless for line height it just helps with responsiveness when getting to different devices okay so i'll grab this text and i'll paste it in here have a project in mind that you think would be a great fit for we'd love to know what you're thinking and then for this i'm going to give it oh also for the paragraphs let's give it this blue color and i'll just add it in here so we have that blue color for the text and then i'm going to give a custom class to this paragraph i'm going to say contact paragraph and i'm going to set the width to 40 ch which is 40 characters or 42 let's do 42. yeah so 42 hey cavito how's it going what's up what's up all right so we are building this contact form today and we're going to style it and make it look good there's actually quite a bit that goes into a contact form so we're not just going to work on the styling today but we're also going to work on the the components of a form and what makes up a form and how you want to set up the settings of the form so that your message comes through correctly so yeah we'll go through all of that so we have the paragraph and the next thing i want to add is the form so we'll go into the contact left i'll add an element and i'll add a form block so we just add it there and this is what it looks like currently so right off the bat i'm just going to go ahead and style these elements so for the name field i'll give this a class name contact field label and for this i used what size 18 okay cool so for this i'm using sine and the size of 18. the line height i'll say 1.3 and then i'll just add this class to the con to the email address as well contact field label and then we'll style the text field so i'll say contact text field and for this i'll give it the border so i'm using these colors here so i'm going to use this orange color and let's give it a border of orange and then a background of that orange color and i can save this global swatch so i can click the plus here and click create so i always have access to this color and then for this orange i'm going to set the alpha or the opacity to 10 so it's really light and it gives us this form here and then i'm also going to set the height to 50 so it makes it a bit bigger and now all i have to do for this field is give it the class name contact text field and we have that styled so what i want to do now is in the the form i want to add a div block and i want to call this contact name wrapper or contact actually i'm going to call this contact top wrapper because it's going to be the top and then i'm going to place these elements inside of this wrapper and actually we want yeah so this is going to get interesting okay so we have these elements in this wrapper and i want to set it to flux let me do something like this we can see it so flux and actually does that work no it doesn't because we want these this text to be at the top so if we look here this text is at the top and then we have the field so we actually have to do uh one more thing yeah grid grid is amazing hey dale how's it going yep we're building this contact form here today no worry worries uh the pricing grid from yesterday project has been super helpful for me happy to hear that kavita for sure yeah yep cool cool so yeah that's the contact wrapper so we actually want to add another div block and we want to say contact i'm going to say contact name wrapper even though one of one of them is an email and i'm going to place this in here and this in here and then to this contact name wrapper yeah actually that looks good so we're good there um i'll add another div block apologies if this is getting a little bit confusing but basically we're just adding i'll explain it in a second just so it doesn't get too confusing here and yeah and then for the contact name wrapper i'm going to say grow if possible and then i'm going to add a margin of 20 to the right of 40. okay i'll explain what i just did because that was a lot so basically uh because i wanted these two fields side by side i had to put them in a wrapper and then apply a display setting of flex to that wrapper and set it to horizontal so that they're lined up next to each other but then i also wanted the name or the field uh label to be above the text field so i had to wrap that in another wrapper and then these two become vertically uh aligned because they're they're div blocks so they just stack on top of each other uh hopefully that makes sense if you have any questions uh let me know hey no worries yeah we're just building a contact form today and styling it so yeah cool we have that and i'll worry about the spacing afterwards so let's move on to the next part which is the the buttons here so let me go into the form i'm going to add a div block and i'm going to call this radio buttons wrapper yep and then i'll add a or just copy and paste this field label and i'll call this subject and then in here i'm going to add another div block and i'm going to call this radio actually you know what let me call this middle uh contact middle wrapper how's that so we have the top this is the top then we have the middle which is going to be the the um the radio buttons so we have the field label and then this will be radio buttons wrapper okay cool all right and this is going to be set to grid alright so let's add a grid right because we have a 2 by 3 grid here which is going to make it easy to to design this so to the radial buttons wrapper i'll select grid and i'll add three columns and two rows perfect i'll click done and that's it so in each radio buttons wrapper i'm just going to add a radio button okay and for the radio button we can immediately go into the element settings and just take note of the group name you want all the radio buttons to have the same group name but they can have a different choice value and we'll get to that in a second but i'll go ahead and style this radio button so for the text i'm using uh what is it yeah oh i'm using monster rot for this actually i'm going to use varela let me see what montserrat looks like here yeah no i'll use varela so this should actually be varela round yeah okay so we'll use varela round so for the text let's just say all labels here and we'll style all the labels and i'll say varela round and the size will set it to what did i use here yup 16 and a line height of 1.3 dash okay and then for the radio button we'll select this radio button here we'll go to element settings and we'll set the style to custom and i'll just give this the class name radio button and i'll make the size 20 by 20 give it the border of let's see this orange color to match the styling of the text fields so we'll enter that in there and then for the background we'll also do that color but i'll set the opacity to 10 or the alpha and then when it's checked we'll change this color to orange as well and that's fine we'll just leave it like that so it's just a border indicating that it's checked okay and then let's see here let me remove here let me say all labels i'll remove this margin from the bottom actually no i'll just call this radio button label give it a custom class and then for this radio button field let me try to center it no that didn't work so let's see here oh okay so for the circle this radio button let's remove that top margin so that it's centered and then to the radio button i'll add a margin of 10 pixels from the right and that looks good so we have our radio button i'm also going to remove this margin from the bottom here on the radio button label and great so now we have the radio button i can right click duplicate right click duplicate right click duplicate duplicate and duplicate okay let's check out our options illustration web design mobile design so i'll double click illustration web design mobile design development development motion graphics development i think my hiccups went away motion graphics and other okay that looks good and cool so we have the submit button let me move the submit button down here and i'm going to go ahead and start adding some margin so the contact top wrapper i'll say excuse me i'll say 20 maybe 20 and to the contact middle wrapper we'll say 20 as well okay and then to contact field label let's set it to 20. yeah that doesn't look bad i'll work on that in a second all right so the last thing we need to add is the messages area so we'll add one more div block and i'll call this contact bottom wrapper so we have the top middle and bottom and then we have the submit button so in here we're going to add i'll just copy and paste this contact field label and we'll call this messages or message okay and then in the contact bottom wrapper i'll hit command k and i'll add a text area right because if we look at the elements panel here are here are all the uh things we have access to as far as for that we have access to for the form okay and i'll say contact text area and let me grab my colors here actually i added it as a global swatch so i can just go into the border set it to orange go into the background set it to orange with an alpha of 10. okay cool so that's looking good i'm going to go ahead and add a bit more margin to the bottom of these different sections maybe like 40. yeah that's looking good and then for this text area i'm going to set the height to 150. let's see that didn't add anything let me see here text area oh that's fun huh let me see something here contact text area it's not letting me change the height okay that's interesting let me delete this for a second and re-add it so text area curious all right we'll get back to that in a second it's not letting me uh change the height here so must be something none of this has explicit height to it so all right yeah we'll come back to that in a second cool um yeah so let's style the button so i'll say contact form button give it a radius of 8 pixels give it a background color of orange and we'll make the text sine we'll set it to maybe 18 and 1.3 dash for the line height and i'll say for the text i'll say send message cool and let's make the size 16 okay and for this bottom wrapper let me add 40 pixels let me add more padding to this button maybe like 15. yeah it looks good um yeah i'm not sure why i can't change the height there maybe i have to add more no i don't like that shouldn't have to add more padding all right um yeah we'll get to that in a second so then we have the contact text field let's add some placeholder text so i'm going to say name or let's say full name and let's dial this text so i can click the drop down go to placeholder and for this text let's set it to varela round and the color i'm going to select this blue color and paste that in there and then then just set the opacity to something like 20 maybe 40. yeah okay and the same for this we'll say email and then for this let's go to placeholder and set it to varela round and that blue color and 40. all right cool cool it's looking good so yeah you can style the placeholder text by clicking the drop down here and selecting placeholder okay cool that's looking good let's make sure all the text is that blue color so let me say normal here for this text yeah just enter that blue color there and then these should have that blue color as well the field labels cool awesome um yeah great so let's add that image so this should be pretty fun so for the contact right section we see we have this image here and for this image i want to this is just a little tip just went to unsplash.com i searched for black and white photos black and white and i scrolled through and i think i found that that image with a ball it was somewhere around here this one's pretty cool too yeah let me download that i'll showcase what i did and then i went to shapefactory.co and they have a duotone feature so i clicked here and then i uploaded the image so that image we just added um where is it i did just download it didn't i yeah it's right here okay cool so we have that image and then i went into here and i grabbed into here and i grabbed those colors so it was orange and blue so orange and blue okay so we have those colors not really liking this picture so much let me try to invert it so orange and blue no still don't like that all right i'll just use the image that i had initially which was if i can find it now here it is so i use this image yeah so that's how i got this here and yeah so i must have used a lighter orange i'm thinking maybe this i use this one is that what i use no i use the regular orange i guess it's just a little bit bigger here okay so that's how i did that then i downloaded it um i did pass it through or i resized it and i might have passed it through a compression but basically it's this image here and um i just went ahead and added it to webflow it might be kind of large actually oh no this is the one i just downloaded let me see yeah that's the one i just downloaded let me find the one that i've already uh compressed so yeah we can see this image is 2.4 megabytes that's too large so i ran it i ran it through compress png to reduce the file size and that's just a nice little tip to reduce the file size of your images so then i have this one that's minified it's still fairly large it's almost a megabyte so i'd probably work on it a bit more to get it even smaller so now for the contact right section i can go into the background click the plus choose image select this image set it to cover position it in the center and i don't need it to be tiled then for this contact right i'm going to set the position to fixed and position it to the right so it always stays in place and this contact form will scroll if it has any uh specific um if it goes past the height of the viewport this will stay in place and the contact form will scroll all right so hopefully everyone's following along uh so far uh yeah so yeah for this contact left i'm actually going to change it to 50 percent yeah that's better so we have some space here on the right and let me go back to this contact text area see if i can change the height no still nothing oh thanks amy so let's see what amy wrote i'm in the studio probably you right now i'm having okay sounds good so i'll get to that in just a second amy appreciate the super chat for sure um we will get to that in just one sec i'll just finish this build and then we'll get into the super chats yeah this is very curious if anyone knows why i'm not able to change the height here definitely let me know because i'm very curious about that yeah i was able to do it on this one oh wait a second hmm oh i guess text areas you can't okay so text areas will look like this i guess because on this one i use the text field and that's why i was able to resize it but text areas doesn't look like you can resize it show all settings yeah okay all right cool so yeah i think we're pretty much done let's go to the radio buttons and let's go to the element settings and let's just give the choice value the name of the button so i'll say illustration and here i'll say web design and note how it says radio 2 here we want this to say radio like all of these need to have the same group name but they can have a different choice of value and this will make sure that it'll show up correctly on your form so the group name is radio choice value here is development uh radio and this is motion graphics this is radio and other cool so let's publish it let's take a look see how we did and yeah let me work on the margin here this should be a little bit more maybe 40. yeah that's better actually that looks good i like that spacing the last thing we'll do is make it responsive so yeah that looks pretty good nice okay so we do need to work on this here hmm yeah with grid i'm trying to see if i can make it rap what does dents do i don't think that's gonna work no um okay so the responsive version would need a bit of work here because as you can see when we get there it gets a little bit wonky but let's go into tablet and let's change this for tablets i'll select the contact wrapper i'll set it to vertical i'll set this contact right to a position of relative and set it to a width of a hundred percent same with this left side we'll set it to 100 percent instead of 50 and then we'll add 5vw on tablet from the right and then for the contact right let's add about 400 pixels of height to the image and then we'll add some padding of like 60 from the bottom for the tablet and let's add some padding from the top here of 60 maybe 40. okay it's looking pretty good and let me add some margin here 60 there we go maybe 40. cool that looks good then mobile landscape that still looks good mobile portrait let's set this to auto for this text and let's set this to vertical let's set this wrapper to two columns so i'll delete a column and let's do one column okay and great just like that we made it responsive let me let me remove some of this height from the top i could actually set this to zero awesome or maybe 20. it looks too close to the top very good okay and we are done remove columns as with decreases um yeah that's a good question or a good point uh dale um so yeah let me see here actually now it might look better because we just changed it for tablet no let's see yeah we just get there it's not too bad i mean motion graphics goes right under at the end so it's not ideal but it's not the end of the world either and i would want this to line up with this so um going to add 40 pixels of margin here from the right cool so this is aligned all right i think we're done it's pretty responsive i'm not going to nitpick that last thing and if i did i would i might you know one thing i could do here is for this grid cell for the column set it to maybe 12 pixels so they're a bit closer and that might fix that responsive issue so amy i definitely want to get to your question sorry about that if you've been patiently waiting but i just want to get through this build before we get to super chats excuse me all right so while that's publishing we'll just quickly go through the layout so again we have the contact section we have the contact wrapper on desktop the contact section has 5vw of padding from the left then we have the contact wrapper we have the left side which is 50 the right side is 40 set to fixed to the right then on the left is where we add all our elements the heading the paragraph the form and in the form we have a top wrapper middle wrapper and a bottom wrapper the top wrapper has the names an email address middlewrapper has the buttons and the bottom wrapper has the text area and then we have this button here and looks good and then we just made it responsive for the different devices all right cool thanks amy appreciate it appreciate the patience for sure all right now that motion still goes just underneath so it's a slight little thing i'm sure it would be a quick fix um but yeah it's definitely good here so i'll just go to sizzy and let's take a look at how we did see if it's a bit more responsive here on this device yeah so motion graphics ooh i tell you web design can just be a little bit i'm not going to say annoying but you're building this and you're like oh just one word is too long um but yeah what we could do is just use mo graphics for this i think a lot of people use mograph yeah mograph is like a this is kind of cheating i probably wouldn't do this but i would say mograph it's like a short name for motion graphics um and then we'll be all set so it's kind of a little cheat there but we can see it looks really nice on tablet now macbook pro 15 inch looks great laptop looks great imac retina looks great iphone 12 awesome iphone 12 pro max awesome probably make the heading a little smaller there but yeah we've designed a pretty cool contact form all right um yeah so that's it for this build if you have any questions about it let me know i'm going to get to amy's super chat so let me just go to the website here so amy i hope you don't mind me sharing this with the group so the studio nine company dot com slash projects okay oh very nice i love the white space super clean and the color of the images with the white space looks awesome great cool menu love it oh i like that too that's nice very nice all right so the question is is an alternating layout using cms grid achievable right now i'm having to manually filter the grid to add each blog post and i want them to repeat alt alternating okay let me just think about this for a sec um to do so uh there's an alternate using cms grid and you filter the grid that each blog post and i want to [Music] that's a great question amy yeah so i see what you mean so vertical horizontal vertical horizontal so it alternates this way yeah interesting interesting yeah the cms gets tricky um let's see let's try it um yeah i see what you're saying amy um basically we want yeah we want alternating sizes as we go down okay i've never done this before but this this could be a great kind of experiment let me start a new project and and we'll go through this for those in the chat this might go over 1 pm so just just letting you know okay so the first thing i'll do is yeah let's add i'm going to add a collection i'll say blog posts create collection let's add 10 items and i'm going to yeah they have images great for sure yeah now that this is i'm curious about this as well uh amy for sure let me add a section and i'll say blog section we'll add a container call this blog or just container and max width of 1440. cool okay then we'll add a wrapper oh sorry hope nobody heard that excuse me uh blog wrapper we'll set it to yeah we'll just set it center center okay and here i'll add a collection list and we'll select the blog posts i'll go ahead and set this let me give it the class name collection list wrapper i'll call this collection list so to this collection list we'll set it to grid yeah let's just do that for now in the collection list wrapper let's set it to 100 okay so we have our grid of blog posts and yeah okay so add an image and for this i'll call this yeah we'll just call it is where it's going to get interesting um okay let me go to element settings and let's see if we can find a filter for this okay um all right let's see okay let me get the image and get the image from main image okay all right so we have the images and now we need to try to set them to different sizes and have them alternate okay so let me call this blog image or post image and essentially i'm gonna do something like this wow this is interesting it's gonna take me a second because i think there might be a way but i'm just trying to see if because that's the thing with cms items once you change one item it wants to change it for all of them but using filters you can sometimes apply specific attributes to different collection items so here under filters you know i can add a filter if the name equals something or if a toggle is switched on i could try to set the size of the image to something else maybe so i'm trying to see if this is possible um so i'm guessing i'm guessing on your site let's see is this a cms let me take a quick look oh this isn't workflow okay gotcha uh what i was doing is duplicating the content wrapper to basically make another cms grid and then limiting the start values does that make sense yeah yep definitely so you had basically um basically multiple collection list collection list and then just changing the start order but i see how grid would be a shortcut hmm oh yeah no worries yep um let me see here hmm can we do it with columns hmm yeah let me see something hmm like all my blog posts wouldn't be able to show up if i add more posts yeah but then i was limiting myself to oh pagination wise like all my blog posts from dealership yeah i got you yeah that makes sense that makes sense okay collection item filters if we add the filter um yeah no that would only hide or show elements hey tommy how's it going yeah we're just brainstorming here um amy is trying to figure out how to get a layout like this um you know alternating sizes uh for cms using grid yeah yeah no worries uh yeah i hope you hope you had a good dinner and uh so we're getting some some suggestions here uh kavita wrote can you resize each image individually no no because any time so for example if i go into each image so if i try to set this like 500 by 700 or you know let's do 300 by 500. and set it to cover then for the grid cell i could center it right you see it changes it for all of them which isn't the look we're going for um could i change it in here this would be wild if i could this this would solve it no let me try something yeah it still changes it for all of them let's see grid hey everyone let your cool challenge i would go for flex instead of grid nice nice do you think it would be possible eunice oh uh so let me read what dale wrote could adding appropriately sized rows and spanning the vertical images into the extra rows or something like this work by the way i have no idea yeah so i was actually trying that dale that's a great suggestion but here let me try something yeah no it doesn't doesn't work it changes it for for all the the items okay so unit so i was thinking that i was thinking custom code would have been the route hey everyone late here cool challenges i would go for flex instead of grid and with a bit of css alternate the height and and vertical uh height versus vertical images interesting yeah okay so let's see actually just had an idea [Music] ah okay let me try this okay nope let me put these images in diff block and see test hmm i was trying to access the last item that would be great eunice um cool so eunice is saying set it to flex and probably wrap and then the collection list you'd set it to fifty percent [Music] um oh oops yeah my bed collection item i'm gonna set it to 50 okay and then yeah could we use like odd even css so let's see this would be vertical this would be vertical but that would be odd even see yeah we very curious eunice all right tommy's gonna try it too this is a great challenge amy for sure um yeah if it wasn't for the cms we could definitely do it but the cms just complicates things a bit because it's like you change one thing in one and it changes it for the others and we can't add a add a combo class i could add it for all of them the only thing i'm thinking of how to do this amy is let me see image post image collection item let me see something 1300 by 860. i'm wondering if we grab a vertical image okay so this this could be a way to do it um i'm going to the grid cells i'm going to set this back to grid actually uh grid yeah okay and then the grid cell collection no yeah collection item center center maybe something like this and for the collection list okay um so that's really okay i know that's why i was doing it manually i mean if i if i'm using this as a portfolio i could just limit them myself maybe like i was doing but i thought the blog post would be so cool two vertical divs with images spaced as needed aligned towards the viewport center if that makes sense for those two vertical divs with image spaces needed in line towards the v8 400 thanks that's good good night for responses but they're beautiful ones at the end they're just the same so it works that way uh collection list um okay collection list items so what i'm thinking amy is like if you manually um size the images then you can add them to the grid but they wouldn't they yeah they'd be somewhat they would be responsive yeah so like let's see like this and then i could be like for this one um skateboarding i got a vertical image you could give individual classes in the cms with an additional field and then add the image in the class with embedded code would that work maybe give individual classes in the cms with an individual field and then add the image and the class with embed code [Music] yeah that would work actually manuel that's a great point all right so i don't know if this would work for you amy but but yeah like just resizing the images manually and then you can have a alternating images like this i'm trying to get it so the gap isn't that big so we can fill this gap here in this case i might want to use flex yeah so use flex and collection item or just give let's see this blog wrapper or just make it a container a lot smaller 960. yeah and then for the collection item we do something like this actually let's just say grow if possible flexion item 50 we'll say 40 just give it some margin yeah i don't know if that if that would work amy you can let me know something like this and then just alternate it if you do uh if you do do it this way you'll still be able to resize the images so i could still say something like oh wait no that wouldn't work actually yeah uh if i change the width it'll change the width for all of them so i guess the way to do it for this would be yeah for the collection let me set it to flex center center the way to do it is to get the vertical proportions uh you want for the image initially and then add it to the add it to the collection item or reference it in the collection list and then you can you can still make it responsive like you can see it gets smaller on different devices and then when you get to you know mobile here you could just be like for the collection list just set it to vertical and the collection item set it to like 100 and then add some margin at the bottom like that and you could have all your your blog post this way and let me set this uh collection list wrapper container all right yeah i'll remove this margin very cool and it could just be vertical on mobile but that's probably the best i got for now unless like i can show you what manuel meant but let me know if that's helpful amy if you could do it that way and let me just take a look here yeah and for this effect it looks like we're just changing the opacity on hover so light here would just be like you know 40 so on hover it just changes the opacity of the image and you can add an interaction to add you know this here so let me let me try making these images actually larger so image i'm going to try 600 yeah something like that let's do 700. okay yes because the the rat uh this has a max width let's try 1440. yeah so if you had your images like this yeah so i would just play with the dimensions like if you know your aspect ratio for each image um then then that could that could work but that's basically all i got for now and i think what manuel was referring to so if i delete this and in the collection item we add an embed code we can say something like image see add field let's main image okay i don't know if this is gonna image source equals main image and close that or just let's see okay so we have that and then yeah so let me show you this real quick amy because i think this might help too so you could do image and then do style image style equals quotations with and then here let me just close this for a second then in the cms you could do something like let me go to the settings add a new field and you could do um just a number so where's the number here we could say with and add a new field and we could say number i'm going to say height cool all right so then so then we would add this here so for this width we could say 500 by 700 click save this one would be a square let's make it more square so 400 by 400 okay so we go in here and we say style with is then we get the the width i always forget in no that's right that's right width and then height height oops and close that okay so i think that did it with oh i have to say pixels the pixels and with pixels okay nice uh so fit let me try setting it to cover nope and i want to see if it applies it actually it wouldn't so i think we have to add that with css yes we have to do with css or you could add div blocks but no you want these as images let me just do a quick object fit css yes we would do in the code [Music] for this and the styles in the code would say object fit and fill yeah and then save and close and then for this same thing oh that didn't work oh cover cover there we go alright amy i think that's the answer yeah so that would be the answer to that and you could even do the the width and the height by percentages but after that you would have to get a bit more detailed into it so amy if you want to send me an email go ahead and do that and i'll send you the share the read-only link to this project so you can see what i did and kind of fiddle with it you can take a look at the custom code and uh yeah so basically if you set the width and height within the cms you can then choose how you want to style each image with this piece of code inside cool uh yeah that was fun i learned something new as well so we're always kind of learning new stuff and we have a great chat here so everyone's very helpful very nice and then you can go ahead and yeah add interactions and stuff and make it look like this so let's just take a look here see if this has specific width and height yeah see with 90 percent max width 500 and then this one max width of 450 yeah yeah so you can just play with that see what valleys work and cool so you can go to webdev4you.com and just go to contact and then just fill out this form and um i'll send you this read-only link yeah so it's just these first two that we kind of edited edited all right we definitely we went a bit over so anyone who stayed thanks for staying i definitely didn't want you to feel like you had to stay um usually i only go till 1 pm but we did have a very nice super chat from amy and we had some fun kind of troubleshooting this site yeah i might go with max with here amy or percentages to make sure or just apply a width that way it gets it should become responsive on mobile or as we get down to different sizes but yeah i'll send it to you and if you still have questions just feel free to email me nice thanks eunice yeah i know you were you were working on something uh yeah if uh if you have another kind of alternative to to doing this that that'd be cool as well um yeah eunice is a really good uh builder so i'm sure you can there might be something there aside from that in bed um yeah but that's probably the only way i can think of for now but we'll see eunice i'm curious to see if you come up with something for sure all right uh yeah thanks everyone for joining amy i'll send you the read-only link thanks for bringing this up it was very fun uh tomorrow we'll just build another layout today we built out this contact form this was a lot of fun this will be cloneable after this video you can go to my interactions which i'm going to change to cloneables and it'll be here you can clone it just take a look and see what i did in this live stream yeah so that's it for this live stream today on october 12 2021 thanks everyone for joining and i will see you tomorrow thank you

Channel: WebDev For You

Views: 443

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 contact form, website contact form, webflow grid, webflow responsive design

Id: H8-fbOJpC5I

Length: 82min 0sec (4920 seconds)

Published: Tue Oct 12 2021