Building a Minimal Layout in Webflow - #1 | WebDev For You | Made in Webflow

[Music] you hi and welcome to the color layout and type series okay so you might be wondering what the series is about so I'll just give a quick overview of yet what the series is about and why I've decided to to create it so basically if you've watched the videos on my youtube channel you know that I've worked that I work a lot with animations and web flow so I just decided to switch gears a bit and get more into the design aspect of building websites because we know it's not just about animations animations are great and they can add a bit more depth to the site but you want to have a good foundation for the layout the type and the colors for your website so that is why I decided to create the series we'll be focusing more on creating actual layouts with the tools and web flow so this series was inspired by the Scotian class that I took by Gilkey Brecht and it's visual hierarchy and spacing and web design which is just a great topic in general but yeah I went through this course he creates really nice minimal web layouts that yeah you can you know practice your design with and so he he designed at first in Photoshop so when I was taking this class sparks started to fly in my mind because my goal with all my videos is to try to bridge that gap between actual design and web development so I thought this would be a great way to showcase that so they're really nice minimal layouts most of them just fit in the viewport on desktop so the user doesn't have the scroll there's some really nice call to actions and the layouts are really nice and he works with type and you know placing things correctly within the layout so I highly recommend taking this class if you want to level up your design skills but yeah we'll be covering a lot of those topics as we build the site as well a lot of the design topics I mean this is his dribble page where he has a lot a lot of nice minimal layouts so you can just go through and check out these really nice layouts on desktop they fit the entire viewport but when you get into like tablet and mobile there is some scrolling where you know we'll be swiping to view the other sections of the site so this is his dribble page and yes just really inspiring and I think it's a great way for me to showcase the power of web flow and to incorporate design layout in colors into my videos and things like that so yeah as we go along through the series there will be more advanced layouts with animations and yeah so this is just a quick intro this first video yeah it's probably a bit longer because I'm just introducing the series yeah I highly recommend going through this page here is Drupal page and he just has some really great layouts all right so yeah that's a quick introduction let me close this here yeah a quick introduction to the series we will be working a lot with type I've integrated my web flow dashboard with Typekit so I'll be using Typekit fonts and yeah and yeah if you have the Creative Cloud you can sync it I'll leave an article on how to sync your type kit with web flow so you can use a lot of really great fonts so the next thing I'll go over is this first layout here that we'll be creating so after watching Gil's class I created this layout really quick and then I built it and web flow so the next thing we'll cover is an overview of this layout here okay so this is the layout we'll be building today in this class I'm gonna call it a class because they're going to be broken up into different sections and it's probably going to be over an hour long but I'd have it all here yeah I won't go through all the topics you can go in the description to see the topics for this class but you can skip the topics and I'll leave kind of like a glossary in the description area below but yeah this is the layout we'll be working with and yeah basically we're using two colors Caribbean green and blue shark oil and I have a few call-to-actions here so this is the heading the paragraph you can view the color combination at shape Factory so these are the two colors that are used and we have the duotone images so at shape factory you can convert unsplash images and to do a tone so there's another call to action and then here there's the gradient and you can view the gradient with the call to action and you can kind of change the gradient around so the whole layout is centered around these two colors and I'm not just going to work with colors in the layout series I'll be working with you know people and places and you know just to give it some variation but to start off we're just going to focus with colors and my next layout too is going to be colors as well yeah so there we have this section here and then we have a nice slider with duotone images using those colors the type is feet aura so that's from Typekit and then if I open the menu the menu comes from the top to the bottom and it just tells you a bit more about the layout so we have Caribbean green for color one blue charcoal for color to the hex code here the layout is built in web flow using flexbox the type is Futura the images are from unsplash.com and the duotone they've been converted to duotone via shape factor eco and you can view more here's another call to action can be more at web dev for you calm alright so yeah basically yeah we have three columns and the third the first column has the slider second column has the heading and the text and the different the logo text here the menu trigger and the call to action and the third column has two rows the duotone and the gradient sections they're both with call to actions so let's see how this looks on on tablet and mobile so when I resize will will take a look at the responsiveness so as I get smaller everything kind of shrinks in and right when we get to the tablet breakpoint I've just aligned everything vertically so as we scroll we have the slider and it's filling the entire viewport and then we have the two sections duotone in gradient they both fill half the size of the viewport vertically so fifty viewport height and they fit nicely in there the sliders taking up the entire viewport and the first section is taking up the entire viewport so we get into the lower breakpoints and I've just resized the text but again everything is aligned vertically and they stack up nicely all right so just want to showcase the responsiveness yes just a nice layout kind of a good a good one to start off this series with we're just really basic we just working with colors and fonts images and placement of these different elements so after taking those class he talks about building the layout in photoshop so I actually built this layout first in Photoshop I won't be doing this for the next year next classes but this was a good practice just to get used to placing elements in different locations and things like that so this is the layout both in Photoshop and then I built it in web flow yeah so that's a quick overview of the layout we'll be building today so next let's go over this layout and web flow and then we'll start building it okay so this is the layout here in web flow and I'm just maximize this so we have the layout basically everything I just covered so let's go into the Navigator and just break down the site really quick and I'm gonna close some tabs up here just to kind of clean it up and yeah we close this all right so here we have the layout and web flow I'll open up the Navigator and basically this whole layout fits into one section that and that section fills the entire viewport on on a desktop screen so yeah so there's no scrolling to the site it's just full viewport height and a few full viewport width so it covers the entire browser there fills the entire browser so if I open up this section we can see we have column one column two and column three so for the class naming convention of this class I'm gonna use Co L for column and dashes just because you know coding and yeah I'm just used to seeing class names with dashes but you can name the class as anything but for for this series I'll be using dashes and kind of abbreviation so column is co L a row is ro W and things like that so yeah so we have column one in the section which is the slider so that has the slider and we have column two has the heading the logo text the menu trigger and the call to action here at the bottom and then we have column three in column three has two rows which is the duotone and the gradient section here and we have some text with some call to actions yeah so that's kind of the breakdown it's pretty straightforward and then we get to tablet and everything's just stacked vertically and we're filling the viewport with the VH unit if you don't know about the viewport units I highly recommend kind of researching that and just web flow has a good video on it I might leave it in the description area below but it's a really great unit to fill the viewport so no matter what the size of the device is the the layout will fill the available yeah the the viewport area of that device okay so yeah there we have a tablet mobile landscape and mobile portrait all right so it stacks up nicely so I think this will be a great practice to kind of showcase how I built this and how we can stack them for different devices or change the layout for different devices so yeah the next thing we'll get into is building building this layout in web flow okay so here I have a blank web flow project and the first thing we're going to start off with is adding the section so here I'll yeah I'll go through the navigator so we have the body and oh I had yeah I'll add an element so here to the left click Add element I'll add a section and I'll give it the class name section okay and then for the height because it's already the full width of the viewport the width is set to auto so it'll be the full width of the viewport so for the height I'll set it to 100 VH so now we have a section that's the entire width and height of the viewport so there won't be any scrolling on desktop layouts okay so there we have the section so we're gonna build this layout using flexbox I'm not going to use the columns or anything like that I like using flexbox because as the name kind of implies it's really flexible so we're gonna go ahead and start with fluxbox so here I'll add an element I'm gonna add the first column an element I'll add a div block and I'll give this to block the class name Co l - one for column one so we want to go back into the section so let me select the section I can select a navigator or in the in the designer and I'll go to the styles and for the display setting I'm gonna set it to flux and I'm gonna say horizontal I'm gonna say a line stretch and justify start okay so that any children elements inside or any elements inside of this section will stretch the entire height of its parent element so as you can see this div block is now the same height as the section and it's not as wide but we can change that really quick so to make that flex child it's now a flex child because the section has a flux property so to make this column span the entire width of the section for the sizing here just change it to grow if possible so I'll go ahead and click that and now that column is the entire is filling the entire of the yet entire of the space within the section okay so we have column one so now let's add column two so I'll go into the navigator click on section add an element I'll add a div block and I'll give it the class name Co l - two and again for the sizing I'll say set it to grow if possible so now we have two equal width div blocks inside of the section so again I'll select section add a div block and I'll give it the class name called column three c ool - 3 and for the sizing I'll set it to to grow if possible ok so now we have three equal width columns but I don't want them to be equal width right because if we go to the layout here we can see that the second column is actually wider than the first and the third so I'll just reference this real quick just to see what settings I actually applied to it and yeah I can see what I what I did here so for column one I actually yeah I know what I did here okay so what I did for column one and column three is I gave him half the size half the Flex size so to do that because fluxbox is really flexible you can click on column one and instead of saying grow if possible you can give it a custom flux behavior so I'll click on these three dots and for grow I'm going to set the growth to 0.5 so half half the growth side so it's not going to fully grow it's going to be half of what it would grow to so it gets it becomes half the size basically and so now I want to do the same with column 3 select it go to the three dots and for grow I'll say point five so basically this middle part would be I'm trying to think of the math here but yeah this middle part would be 50% basically and these two side pieces would be 25% and that just gives us a nice layout where the centers column is wider than the first the third okay so now in the third column we have two rows we have to do a tone row and the gradient row so as you can see here we have these two rows so I'll go ahead and add a div block so I had a div block and I'll give it the class name C column three dash duotone because I know it's gonna be the duotone section and for this I'm going to let's see what I can do for this one is click on column three and give it a display setting of flux and set it to vertical so they stack on top of each other and we'll do ya a line stretch and justify start and then for column three for the sizing I'll say grow if possible so it fills the entire height of column three so now in column three I'll add another div block and I'll give it the class name CEO l3 gradient so this is going to be the gradient section and for the sizing I'll say grow if possible and now we have two equal-sized div blocks so yeah so the reason I'm using flexbox is is because when we get to tablet mode and mobile it'll be really easy to rearrange these these layouts or these stuff blocks so yeah basically that is the layout we have column one it's gonna have the slider column two is gonna have the header and the paragraph and a few other elements column three is going to have the duotone section and in the in the gradient section so what I decided to do actually put some thought into this and what I want to showcase first is how to how to convert this into a tablet in mobile layout so this is just the skeleton of the layout so while we're here I can quickly showcase how to change this right so what I'm gonna do is give each column a border so just to showcase this really quick so I'll give it a border here in the border and I'll give it a border of let's say five pixels so we can see it and for this one I'll make the color red then for column 2 give it a border say five pics I'll make the column say or we'll leave it at black black it's okay so say black column three give it a border or actually the dual tone section give it a border we'll say green and then the border here set it give it a border five and we'll give say yellow okay so if I preview that's our layout so we have column one two in the two sections here so if I go into tablet that doesn't look great right everything is really squished together so what I can do on tablet is change the flux setting for the section so if I go into the section I can change the flux setting rather than horizontal I can change it to vertical okay so now everything stacks on top of each other but once we start adding elements these sections are too squished right because the section has a viewport height of 100 VH so it doesn't go beyond the height of the viewport so on tablet what I'm gonna do is change the height from VH to Auto so the section will inherit the height from its children elements all right so now we see there's no height to any of these elements because the height was added via flux property properties so we can go into column - I want column - on a tablet to fill the entire viewport of the tablet so I'll go on to column two rather than having a sizing of Grove possible I'll say shrink if needed so this lets me play with the height once I change the sizing so now for the height I'm gonna change it to 100 VH so now column two becomes a hundred or it will fill the entire viewport of the device and then for column 1 which is the slider I also want this to be 100 the H and height so for the sizing I'll say shrink if needed and I'll change the height to 100 VH so now we see that column 1 is filling the entire viewport height column 2 is filling the entire viewport as well and then for the duotone ingredients I'm gonna say shrink if needed there and I'll set the height to 50 VH so that both the the duotone and the gradient sections fill half the size of the viewport so when you're looking on your device you can see those two those two sections at the same time all right so I'll say shrink if needed and for the height I'll set it to 50 VH okay so that's basically it the last thing I want to do is make a column to the first thing you see on a tablet device so for column 2 flexbox has this really great property we can reorder elements so I can change the order right here and I can say first so it becomes the first thing within the layout so we have column 2 then we have column one where the slider is gonna be then we have column 3 the duotone section and column 3 the gradient section all right so if we go to tablet and mobile those layouts will be applied to those devices as well so there we have the desktop tablet mobile landscape and mobile portrait ok so I just wanted to cover that really quick so this is basically basically the skeleton of the layout next we're going to work with column two so I want to add the heading in the paragraph first then we'll add the duotone and the gradient section and then we'll add the slider at the end yep so let's build column two all right so here we have column two I'm gonna go ahead and remove the border so here under borders I'll just click the X so it doesn't have a border and yeah I'll remove the border for all of them because those colors are kind of distracting me so we don't see anything it just looks like a white canvas but now we can we can add the elements if I hover over the different sections it actually shows me that you know those are different columns there so for column two let's go ahead and add the heading and the paragraph so for column two what I'll do is I'll set the display setting to flex set it to horizontal justify:center and or align Center and justify Center so that anything I place within this column will be in the center so now I'll add an element I'll add a heading so I'll select heading and I'll to give it the class name heading or h1 - heading okay I'll type in my text here so I'll say Caribbean green and I'll say the ampersand and shark oil or is it blue charcoal yeah blue charcoal I think that's right yeah I'm blue shark oil okay so there we have the heading now I can style it a bit so because I've already synced up the type kit with web flow I can use the Fatima font that I selected in Typekit so here under typography I'll click the drop-down I also like to Futura PT bold for this text and for the color let's go in here for color and I've already added the Caribbean green and blue charcoal colors as global swatches but if you don't have the colors in your swatch you can just go to yeah let me preview it here you can go to view color combination at shape Factory and you can just copy so this is the Caribbean green you can just copy that hex code go into the layout and then you can just paste it in here okay I'll just select this watch because I've already added it once you've or I can delete the swatches just to kind of showcase how to add swatches so let's go back in here I'll copy the hex code and paste the color in there and then I can click the plus here and I can call the color Caribbean green then click Save and now it's a global swatch so I can access it at any time all right so with this I want the Caribbean green text to be that color and then for the blue charcoal I want it to be a different color so I can just highlight it and once I highlight it yeah highlight it webflow gives me these options here and I can wrap this text in a span so here I'll click rapid pan it's like this little paintbrush here so I'll click it and now I can give this span a particular particular class name so I'll say I'll just call it heading blue and I'll scroll down to the color so here for Caribbean blue so yeah let me get the color from the shape factory site so here's the blue shark oil so I'll copy it and then for the hex I'll paste it in there and then I'll add it to the global swatches by clicking the plus and I'll call this blue shark oil alright so there we have the two colors so I'm going to reference this site here to see what the size of the text is so it's 54 pixels in in font size so I'll go back into the layout here I'll select the h1 heading if you apply if you change the font size for the the heading it'll change the span size too because the span is inside of the heading so I'll select h1 heading give it a size of 54 pixels in height and a height of 54 pixels you could play with the line hey the line height here to give it a bit more maybe I'll say 64 the line height yeah and there we have the heading so one thing I didn't do I'm actually want to put this heading heading in a text wrapper so that I can move the paragraph in the heading together so with column 2 selected I'll an element add a div block and I'll give it the class name text wrapper or yeah I'll just save text wrapper okay and then let me just move it up here and I'll put the heading inside of the text wrapper and I'll add some I'll add a paragraph to the text wrapper as well so here I'll select the text wrapper add an element I'll add a paragraph and I'll just copy the text from this paragraph here so I command C paste it right in there and then for the paragraph I'll give it the class name paragraph and for the font size I'll say or the font type I'll say feet area PT so just regular let me reference the site here so the font size is 18 pixels yeah 18 pixels and the line height is 34 so here I'll say 18 pixels for the font size and 34 34 pixels for the line height so with with the text wrapper let's see how I want to do this here yeah so notice that this text is really wide so one thing that Gil talks about in his class is having 20% 20% on each side to create that minimalistic feel so here we have the column it's pretty wide so what I can do for the text wrapper is select the text wrapper go to spacing and for the left margin I can say 20 percent and the right margin I'll say 20 percent there so it looks kind of like it's stretched but that's because yeah web flow is taking up a bit of space within the viewport but if I preview we can see it looks fine and if you're worried about the text looking like that you can just adjust either the font size for the text or play with the margin a bit but I'm okay with it I think on you know what's the viewport is a bit wider the text will kind of align correctly so yeah so there's the column it has 28 the text wrapper has 20 percent spacing on each side so when we add the left the first column in the right column will have a slice minimalistic feel with a lot of white space around the text all right so there's the the heading and the paragraph and let me see if I added any margin here so yeah let me separate the paragraph and the heading a bit so I'll select the h1 heading and here for spacing I'll add some bottom margin and I'll say 40 just to create a bit of spacing between the heading and the paragraph all right so the next thing we'll do is we'll add these little elements here so I'll add the webdev for you kind of logo text here so with column two selected I'll go ahead and add a text link so that we can link out this text and I'll call this logo text all right and for this I'm going to give it a position of absolute so we can position it in the upper left corner and here I'll say top left there so notice it went all the way to the top left of the the entire canvas not the column and that's because we need to set column two to a position of relative so that anything inside of it is relative to it so because column two didn't have a position of relative the the text link was looking for the neck the next parent element that had a position other than Auto so that I could position himself relative to that div block but by giving column to the position of relative we now see that this text link is relative to column 2 all right so I'll just double click inside of the text link and rename it to web dev for you color layout and type series okay then I'll style it so here for the font I'm going to say Futura PT bold for the color I'm going to say blue char coil and I'm going to remove the underline by saying none here for the underline okay and then I'll give it some margin from the top so I'll say 20 pixels of margin from the top and then I'll say 20 pixels of margin from the left all right so I'll go ahead and add a border just so we can start seeing this a bit better yeah that's price you've done that in the beginning but yeah there's our column - there's the the logo text so let's add the menu trigger now so with column two selected I'll add an element add a div block I'll call this menu trigger wrapper I'll give this menu trigger a specific width and height so here for the width I'll say 50 pixels and for the height I'll say 50 pixels as well I'll give it a position of absolute so we can place it in the top right and I'll say yeah top right here so there we have the menu trigger and I'll give it some margin of 20 pixels from the top and we'll say 40 pixels from the right for the menu trigger and for the menu trigger I also want to give it a display setting of flex and horizontal just device no vertical align Center and justify Center so that when we add the menu bars they stack on top of each other all right so let's add the menu bars so here I'll add an element add a div block and I'll call this menu will say menu line because it's kind of a line for the width I'm gonna say 60% for this first one yeah 60% and the height of 2 pixels and for the background color I'm going to set it to blue charcoal so there we have that line so I'll go into the Navigator and I'll just copy that line in the menu trigger wrapper this menu line I'll copy it three times okay then I'll give the menu line some bottom and top margin so I'll hold down alt and just give it yeah that might be a bit too much so maybe maybe three yeah and that looks pretty good so we have kind of I don't really like using the name but it's kind of like a hamburger menu with the three lines and just to make it a bit more dynamic well make the second and third line a bit smaller or different sizes so for the second line I'll select it give it a combo class of second so we can apply individual properties to it and I'll make the width 25% okay and then we'll select the third line give it a combo class of third and change the width to 40% okay it's all centered so it doesn't look good so we can select the menu trigger wrapper and for the Flex setting rather than a line Center we can say a line end so they all go to the end all right so there we have kind of a nice menu trigger it's a bit more dynamic and yeah I like it so you can just play around that with that and kind of play with the sizes I'm gonna say 55% for the first one yeah and that looks a bit better okay all right so yeah we have the menu trigger if I preview we can see that our column to layout is looking pretty good we have a lot of white space around the text and yeah it creates that kind of minimal feeling all right the last thing we're going to do is add the call to action here at the bottom so for this I'll add a div block make sure column two is selected add a div block and I'm going to call this a CTA wrapper so call to action CTA short for call to action again I'm gonna set the position to absolute and this time I'm going to place it in the bottom right okay and yeah it doesn't have any width or height because we haven't added anything to it so I'll go ahead and add some text inside of this wrapper so with the CTA wrapper selected you can make sure it's selected here in the navigator we can add an element and I'll add a text block okay and actually let me let me delete the CTA wrapper I'm gonna go ahead and delete it because we want that CTA wrapper to be a link block so that when the user clicks they can go to some other page right because it's a call to action so we want the user to click and go somewhere else so with column two selected I'll add an element I'll add a link block it's pretty much the same thing as a div block but you can link it out to something so I'll select link block and I'll give it the class name CTA wrapper and it'll put it in the right spot at the bottom right because we already gave this div class particular properties okay so there we have the CT wrapper so yeah I'll go into the CTA rapper at an element and also you can tell us a length block because it has that link there in the navigator yeah so now I'm an element I'll add a textblock and I'll give it the class name CTA text and I'll double click in here and for this text I'm going to say view color combination at shape the factory okay so we have it so now I'm going to style that text I'm going to make it bold sofa Tora PT bold the color I'm going to change to blue shark oil and the font size let me check what I set it to here the font size is 22 pixels there so I'll say it set it to 22 pixels and the line height to 22 alright so there we have the text and also I want to remove the text decoration so I'll say none for the text decoration so it doesn't have that kind of nasty underline it actually it still has it because we need to select the link text and go to the text decoration and say none so it's giving it that that blue underline because it's giving it kind of like that hyperlink styling and that's why it's giving it yeah that blue underlined so we just want to remove it and looks good so the next thing I want to do is add that arrow so the user knows that they can click that it's a call to action and it's going to take them somewhere else so with the CTA wrapper selected I'll add an image and I'll scroll down here to media select image and I'll choose an image and I've already added these arrows so we have a white arrow a green arrow and a blue shark oil arrow so I want it to be that blue arrow and there we have the arrow so the last thing I need to do for the CTA wrapper is give it a flux setting so that the text and the arrow are next to each other so I'll go into styles give it a display setting of flex and for this I'm going to say a horizontal and I'm going to say a line and and yeah and just if I start so that arrow is you know closer to the bottom so with the CTE rapper selected I'm just going to add some bottom right and bottom margin so for this facing I'll give it a bottom margin of 40 and for the the right margin I'll give it a right margin of 40 so I'll preview and we have our nice CTA for the arrow I'll select it and let me just give it the class name of CTA - arrow call to action arrow and I'll give it to margin of let's say 10 pixels from the left so there's a bit of spacing between the text and if the arrow here yeah so there we have our call to action it looks good and our desktop layout for column 2 is pretty much done if I go to tablet because we already set up the layout for for column 2 we can see it looks good on tablet on mobile we'll have to change the size of the text and also mobile landscape I'm gonna go or cover changing the sizes for each layout in another section so we're done with column 2 let's move on to column 3 okay so for column three there's some images in the background so let's go ahead and add the background images so here we have to do a tone section so I'll select it go down to to background and I'll add a background image choose image and I'll select this image here set it to cover and position it in the center then for tile I'll select none because I don't need it to be tiled and there we have the image so now I want to add the text do a tone here in the upper in the upper left and let me see here yeah okay so if we want to add a duotone tag so I can actually copy the CTA text here so I can hit command C to copy and/or actually ya know I want to add a new text block so I'm gonna add an element add a text block and I'm gonna give it the class name do a tone text and I'll just double click in here and say dual tone and yeah well style the text so for this it's going to be futur PT bold the color is going to be blue char coil and let me see the font size here it is oh and it's actually an h3 heading so let me delete that let me go and add a heading and select h3 and give it the class name let's see what I did here for the class name yeah h3 heading so let us say h3 heading so again going to Styles set it to futur PT bold the font size is 24 and a line height is 30 so yeah that's perfect the color is blue charcoal and we're going to set it to a position of absolute and place it in the top left let me set the position here it's a relative for that column alright so it kind of looks like yeah it shrunk a little bit but that's okay well we'll get into that so yeah let me change the text here to say dual tone and we'll give it some margin 20 from the top and I'll say 20 from the left I think that's what I did here yeah 20 if 20 perfect alright so there we have the text duotone let's go into the gradient and start working with that - yes I'll click on gradient for the gradient section we just have a gradient so I'll select it go down to background I'll add a background here and I'll select radial gradient to add that gradient in there and for the first color I'll set the color to the green shark oil or Caribbean green and the second color I'll set it to to the blue shark oil okay and then for the gradient I'll select this first one here it just creates a nice kind of ball looking shape within the space available and yeah there we have the gradient and I'm going to go ahead and copy the h3 heading and paste in here let's see if it pastes it I don't think it did let's see heading column 3 yeah it did right in there all we needs to set column 3 to a position of relative yeah let me select in there and I'll just call this gradient to give it a combo class of gradient and this allows me to give it its own property so I can change the color and then I'll double clicking here and I'll just say gradient alright so so far so good column 3 is almost done so I just want to copy the CTA wrapper here and just paste it into the duotone section so we have a call to action I'll double click in here for the text and I'll say you do a tone images alright and for the CTA wrapper I'll give it a common class of dual tone so we can apply the its own properties and actually no that looks pretty good so rather than 40 for the CTA wrapper we're gonna say 20 pixels from the rate so it's a little bit closer to the right and 40 pixels from the bottom it's okay alright so there we go and I'll copy the CTA wrapper and yeah paste it into the gradient as well then for the text yeah select the text was let's change the color of the text first I'll say gradient and I'll give it the color of green here okay and then I'll select the image let me go into the image the arrow let me double click replace image and I'll change it to the green arrow okay I'll double clicking here and I'll say view gradient okay and then I'll select the wrapper give it the combo class of gradient and again change the right margin to 20 pixels okay so now if I preview perfect so we have the duotone we have duotone images and then we have view gradient so we have these two sections and it's all set alright so that is column three if we go into the tablet layout we can see those dote those sections look great for both for all the devices right and that's because we set it up in the flux box section alright so that is section or column three let's move on to adding the slider so we're gonna add the slider to column 1 so with column 1 selected I'll add an element I'll add a a component so I'll scroll down to components and I'll add a slider so for the slider I'm gonna set it to a position of absolute and full okay so again we didn't set the column 1 to a position of relative so let's go ahead and do that so that this slider is relative to column 1 and fills just a column 1 and then for the height of the slider I'm gonna say 100% or yet let me select the slider and yeah we'll give it the class named slider and for the height I'll set it to 100% so it fills the entire column and let's just add a few images so to add slides so here we're in the Navigator so we have the slider and the slides are in the mask so you can just open it there we have slide 1 so I'll select it give it the class name slide 1 go to backgrounds add a background image choose an image and I have this image here set it to cover position it in the center and I don't need it to be tiled okay and I'll add a second image so select slide to say slide - to add a background image choose image and I'll select this image here set it to cover position it in the center don't need it to be tiled alright so I'll add a few more slides and I might fast-forward through this process so to add a slide just make sure the slider or a slide is selected go to element settings then add slide so I'll click this three times so now we have slide 3 4 & 5 so select slide 3 say slide slide - 3 and yeah add a background ok so I'll just quickly do this oops yeah give this image cover just fit in the center don't need it to be tiled then slide 4 say slide - or add a background image choose image and I'll select this image here set it to cover don't need to be tiled and I'll Center it and slide five say slides - five and add image choose image and also like this image here set it to cover Center and don't need it to be tiled alright so we have all slides so if I preview I can go through the different slides and looks good I can change how the slides kind of feel by changing the animation type in the easing I'm not going to cover that right now we'll just continue with the tutorial so for the slide I don't want these buttons here at the bottom so I'll just select the slide NAB going to styles and for the display setting I'll set it to none so we don't see them so the next thing I want to do with in column one is add kind of this blue bottom here so we have these nice buttons so with column one selected I'll add a div block and I'll call it slide buttons BTN s for a short background or VG okay and for this I'll set the background color to blue chart coil and set the position to absolute and I'll say bottom so it goes to the bottom then we'll give it a specific height so I'll say 100 pixels in height and notice we can't see it and that's because the this background is behind the slider so to have it come in front I'll just work with the z-index and give it a high zine z-index of something like 99 and now that bottom piece comes to the front so my face is probably covering it here so I might edit it so my face isn't there but there we have the bottom section and now for the arrows I want them to fit in this section so I'll select the right arrow give it the class name right arrow and I'll go ahead and set the position to absolute it's already set to absolute and place it in the bottom right okay and I'll give it a height again of 100 pixels so it's the same as that background and we can't see it again because it's behind the background so I'm gonna set the C index of the right arrow to something higher than 99 so I'll save 101 and that arrow comes to the front so now select the left arrow give it the class name left arrow and set the height to 100 pixels and place it in the bottom left give it a z-index of 101 okay so if I preview those arrows are now in that background area all right so let's kind of style the arrows so there's a circle around them and and they're a bit smaller so I'll select the icon give it a width a height of 50 pixels by 50 pixels so a perfect circle and then I'll go down to the borders for the radius I'll say 50% so it becomes a perfect circle then for the border I'll say solid give it a width of 3 pixels and I'll make the border green so it's a circle and then I'll go to for the display setting I'll set it to flex justify:center align center and justify Center so that this icon is in the center and then we'll change the font size of the icon so I'll say something like 18 pixels or let me select it in here unless the width so the font size I'll say 18 pixels let's see if that's what it's set to here yeah 18 pixels and a line height of 20 all right perfect then we'll change the color of that arrow to green and we'll do the same for this icon so I think we can just apply the icon class to it so I can just say icon and perfect simple as that so because we already styled this and it had the we concede of class name we'll just a icon or we'll just an arrow icon arrow - icon so we just applied that class name - to the left arrow too and it gives it the same properties all right so I do want them to be closer to each other so let me see what I did here so there we go left arrow yes I gave him 20% margin so also like the left arrow and I'll say margin 20% from the left then the right arrow I'll say margin 20% from the right so that those arrows are closer together it's now a preview and we have those nice buttons for the slider all right and we're almost done with the layout let me just remove this border here on column 2 so for borders I'll say none and yeah our layout is looking good and yeah so looks good if we go to tablet that looks good too we have the slider and the two sections the mobile landscape looks pretty good as well and the mobile portrait we'll just change the font size all right so let's go ahead and add the menu really quick and we'll add the interaction for the menu so that this menu as we see we click it comes down and we have that nice menu so yeah the next section will be creating the menu all right so let me collapse all this here so to create the menu we're gonna put it in the body and it's going to be fixed so I'll select body I'll add an element I'll add a div block and I'll call this menu - wrapper I'll give it a position of fixed and set it to full so it'll fill the entire viewport and then for the background I'll set the background color to green and I'm also going to set the z-index to something higher than 101 because the slider yet has a a higher z index I'll set it to 199 for the menu wrapper so it's in front of everything so for this I'm just going to copy the text in here to save a bit of time so I'm gonna copy this layout text it command C to copy paste it in there and I'm also going to copy this X and paste it in there okay and we'll just copy this too and we'll paste it in there okay so I'm not gonna go through and write all this text just to save a bit of time but basically that's the menu you can add anything to the menu into this menu wrapper basically I added some text information about the layout and this X button it's just two lines set centered within a wrapper and then I rotated it so if I select the line you can go down to transforms and rotate it on the z-index to create the X alright so we have the menu so we want to create an interaction where when we click on the menu trigger the menu opens so I'm gonna select the menu wrapper for now I'm going to give it a display setting of none so we don't see it right so we can work with the site and the menus not interfering so we want when the user clicks on this menu trigger wrapper we want the menu to come down from the top yeah from the top to the bottom so I'll select a menu trigger wrapper I'll go into interactions here which says element trigger I'll click the plus and I'll mouse click or tap will select it here on first click will start in animation let me just delete this here well add a new timed animation and I'll give it the class name let's see we'll say menu open and then you open okay and when the menu opens I want to go ahead and select the menu wrapper because we want to affect the menu wrapper and initially I'm going to set it to move I'm gonna add a move time to action and on the Y I'm gonna move it up negative 100% so it goes off the canvas and it moves up a hundred percent so I'll say negative 100 percent and yeah I think that's all we need to do for that yeah negative 100 percent and then for timing set it as the initial state and then because the menu has a display setting of none the first thing we need to do is set the display setting back to flux so that that menu yeah so that the menu wrapper let me see if I did this right yes so that the menu wrapper comes back in and then it'll will make it move down so I had a new time to action with the menu wrapper selected on you time to action select hide show for the display setting I'll set it to flex and then we'll add another time to action that says move and we'll move it down to 0% so moves back down I'll give it an easing of ease out Expo and a duration of 0.5 is okay so now when I click the menu trigger that menu comes down alright and it looks good so I don't know why that close button is there but yeah we'll fix that so yeah if I improve you again if I click the menu trigger the menu comes down so we want to work on this X so let's go into the menu wrapper and I'm going to set the display setting to flex and let's move this this close button so let's see it also has an interaction so I'm just going to delete that the menu close button let's move it seems to be in the layout there let me just move it out yeah there we go it just needed to be moved out of the menu text wrapper so kind of losing my voice here because this videos getting kind of long but yeah I'll select the menu close button and we'll go into the interaction will add a new interaction I'll say mouse click or tap start an animation I'll duplicate the menu open so I'll click these three dots say duplicate and I'll select the menu open - and just rename it to menu close I don't need the initial state so I'll just delete it because we're just gonna have the menu close and for this the first thing I want to do is move the menu up so I'll just put it as the first time to action and I'll move it back to negative 100% and then for hide show will change the display setting back to none so it's hidden initially and when the time to action comes back in it'll display the menu again and have it move down okay so now when I click the menu trigger it opens when I click the close button it closes all right and just that simple so we've created the menu with the interaction if you have any questions about that let me know I know I moved kind of quick through all of that but just to save a bit of time for this example so now I can go back into the menu wrapper here in the Navigator and set the display setting back to none so we can work with the site and even while it's set to none here in the designer because in the time to action we have it we have a time to action setting the display setting back to flex and we don't need to worry about it so here I can open the menu again and it's all good okay and for this menu trigger I'm gonna go ahead and give it a different cursor so I'll select it and for the cursor I'll say pointer so now when I hover over this menu trigger and I click the user knows that they can click on this menu trigger alright looks good so the last thing is making sure that everything looks good for the different devices all right so for a tablet I'm happy with the way this looks I don't need to change anything it looks great I might maybe add some more margin from the left so here I'll select the logo text and say 40 from the left so it brings it in a bit more then we'll go to mobile landscape for this I'm going to change the size of the heading so I'll select it go into the font and let's see what I did here let me just set this to none yeah I think it was like 32 or 38 so we'll change the size to 38 and the line height to 48 I think that was what I did there or 46 okay 46 okay and then the paragraph text we left the same so yeah and let me change the margin to 20 here from the bottom to bring in the heading and this paragraph text that looks good I think I'm going to change the CTA text let's see if I did yeah so the call to action text will say 18 and the line height will say will say 18 as well so so that it's more lined with the bottom arrow there and yeah changes it for all of these two okay that looks good and then we get into mobile landscape so here we need to do quite a bit of work so here let's see what I did the paragraph is 16 and the heading is 28 okay so I'll select the heading the heading will say 28 and the line height say 38 I'm just right for saying the other site just to save a bit of time and then for the also for the column 2 or for the text wrapper we changed the pattern from Pat padding or the margin from 20% to 10% okay too because we don't have as much screen real estate so we just made that margin a bit smaller and then for the paragraph text rather than 18 we'll set it to 16 and the line height of 28 was it line height of 26 so I'll leave a a great kind of PDF book that I've recently about typography and you can go to the sites better web type and it's just a really great course by I think it's named ISM Matej Latin and he talks about line height and spacing when working with text I'm probably not following all the rules exactly but you know I'm kind of just using my eye here to see if the text is readable and if it's not too too long and with alright and if I'm worried about the text getting too long and width I can just use this option here within web flow and I can give this paragraph a specific width or this text wrapper specific width so it doesn't go beyond the specific width so I can select the text wrapper and give it a width of like 300 a max width of 320 pixels so no matter how large the viewport gets it doesn't go beyond a certain width okay but yeah that's just working with the type and then let's go back down here and I think I made this smaller - so yeah 16 and 20 so I'm just select it change the font size to 16 and the line height to 20 okay and the CTA wrapper let's see here so yeah let's see ta wrapper okay okay yep again yeah we want to give it a margin of 10% okay and the left 10% as well and yeah let's go yeah there we go I'll see if that looks good and I also set the text aligned to the right for the text for the smaller device so I'll say text align to the right all right that looks good and then for this I'm going to say 10% as well and for this I'm gonna say 10% from the left okay and yeah that looks good so it's all all this lines up from the left and the right and yeah so this changes as well because we applied the CTA wrapper has the same class and that looks good so yeah we just changed the text size for the different devices change the margin and the padding that that all of that is pretty kind of self-explanatory and it feel like I had to spend too much time with that or kind of go into a lot of detail basically I just looked at what looks good for each device yeah and there we have the layout the menu works if I preview the many works on each layout I've already styled this text in the in this example that I referenced so the text looks good on all the devices - all right so yeah can't believe I got through all that this is a fairly long class especially for YouTube but I thought or this is kind of my way of trying to merge those two worlds of kind of graphic design and making layouts in Photoshop or sketch or whatever program you use and converting it into an actual website you know it that gap is getting smaller and smaller especially with these programs like web flow that allow you to build without knowing code if you have any questions I know I covered a lot of topics really quick feel free to ask me in the comment section below oh yeah the last thing we want to do is link out these call to actions to actual pages so let's do that really quick so for the color combination I can just go to shape factory it's this link here I'll hit command C to copy going to element settings and just paste that link in there and then the dual tone images we have the link here so I'll go into the CTA just paste that in there and we have the gradient link this all hit command C to copy select the CTA wrapper and that's why we set the CTA wrapper to a link block so that we could link it out to something so hit command V let me delete a command V paste and there we go and also I want these to open in a new tab so the user doesn't navigate away from this layout alright so that's pretty much it so now I can publish see the selected domain to publish the site I can preview and everything works it looks good I can click to view duotone images I can view the color combination at shape Factory and I can view the gradient alright pretty cool and if I resize let me go ahead and just like this here I can resize the layout and it looks good for all devices here we have the slider and perfect so you would want to check this on different devices just to make sure that that it looks good on all the devices and make any tweaks necessary but yeah that's how we created this layout here this Photoshop layout in web flow and yeah I could link this out to I'm always finding little things here - web dev free com so we want to link out that text select it here and yeah link out to web dev free com so I'll publish and preview and yeah that looks out to webdev for you all right cool so yeah that is the layout next I'll just cover any final thoughts for this class all right so yeah we finished building the layout it was a very long class again there'll be a kind of little glossary in the description area below so you can skip to different sections but yeah it was a fun fun class I could even go with more things with kind of animating the slideshow and giving giving it different easing but not gonna go back to it at this point I will have another class I think I'm gonna try to do these every week I've already prepared the layout for next week and that's kind of an out-there layout but I think it'll be fun to build and web flow yeah if you have any questions about anything I went over this was kind of a simple topic of using two colors and using themes around those two colors to create this layout again this was inspired by the Skillshare class I'll leave the description below shout outs to Gil an amazing designer and just a really great way to showcase how to build really minimal layouts you know a lot of times we go to websites and they were just filled with a lot of stuff so by using this kind of method in this practice you can start working with type and spacing you know I'm not saying I'm like the greatest designer I'm still learning myself and that's why I want to do these classes and share this information with you I have used web flow a lot so I feel I have the technical aspect down but I want to kind of branch out into the door of the design aspect to create really amazing things for the web yeah so I'll leave links to different design resources different type resources and more information in the description area below so thanks for watching if you watch this entire class congratulations I can't believe I'm putting this out for free on YouTube it's kind of crazy but I just want to share this information so yeah thanks for watching and I'll see you and the next color layout and type series video thank you [Music] you

Channel: WebDev For You

Views: 9,661

Keywords: webflow, web flow, webdev for you, webflow tutorial, webflow video tutorial, webflow tutorial 2019, webflow for beginners, building a website from scratch in webflow, building a website from scratch, building a minimal website, website composition, website layout, flexbox in webflow, typography in web design, building a responsive website, building a website in webflow, responsive web design, unsplash, shapefactory, duotone images

Id: jUx7flTCa_I

Length: 67min 16sec (4036 seconds)

Published: Thu Feb 07 2019