Building A Website Header in Webflow | Animal Conservation UI | WebDev For You

[Music] hi and welcome to today's video tutorial before we get started I will go over the different tools and resources we will be using for this website the links to these resources can be found in the description area below the first resource is obviously web flow comm we will be using web flow today to build this website to me it is the best visual web development platform on the web if you are new to web flow I highly recommend the web flow university they cover everything about the program in this video tutorial I will be moving a bit quick through all the topics so if you are new to web flow I highly recommend going to the web flow University and checking out those videos first the next resource I will go over is the learn UI design course by Eric Kennedy if you are new to web development or design I highly recommend taking this course it lays the foundation for designing beautiful user interfaces so along with this course and web flow you will be building beautiful websites in no time the next resource I will go over is in bottle elements it is an amazing place to download really beautiful assets they do have a monthly subscription and a yearly subscription the images and background we will be using today are from Envato elements the last resource I will go over is web dev for ucomm this is where I provide a daily interactions that are built in web flow every weekday you can clone the daily interactions into your own projects for free I also have premium content templates and links to other web flow resources on my site again all the links for these resources can be found in the description area below hey what's up everyone this is John with web dev for you and today we are going to be rebuilding this website in web flow so if you saw the intro you've noticed the different aspects of this website it's more of like a header but it could make for an entire website there's enough functionality here on in this first section that you could just have this as a website as like a full viewport website on a desktop then for a tablet mobile landscape and mobile portrait you can kind of rearrange these elements to fit those devices but today we're just going to focus on the desktop version of the site where we have the content on the left we have the slider we have the the video here at the lightbox and we have this kind of design element here on the right and we have the menu here at the top we're not going to create this effect here that was actually created in After Effects and I will do a part two to this video where I create that animated logo and place place it into into web flow using body moving and Lahti so this logo here at the beginning was After Effects it's fairly simple but I'll showcase how to save it out and place it into web flow but yeah basically it's just a pretty simple website the fun thing about this website is that the text changes there's an animation to the text so as I go left and right with a slider the text kind of has this this animation to it where it appears from the bottom to the top and then the paragraph changes as well there's a few hover effects and there's a nice background to it so yeah the assets were from involved well and navato element and we are going to build this website and web flow so without further ado let's get started building it in web flow alright so I am gonna move a bit quick through this tutorial and let me just zoom in here into the interface just so we can see everything a bit better here I have the website and web flow I can just showcase it really quick it looks like this text is layered on top of each other so it does look a bit doesn't look right here but if you preview you notice the text is not like that so let's jump right in alright so I'm not gonna cover every little detail that I go over I'm not gonna say this is more of an advanced class but it's just it's just a class for you to see my process how I work with web flow and hopefully you can get some tips and tricks and yeah and just see how I build it so the first thing we start off with is the body so in the body I'm just gonna place a section so I'm gonna use the shortcut key command K to add elements in to web flow so I'm gonna add a section I'll hit enter and now we have that section I'm gonna use lowercase letters for for the the class names so here we have section and for this section I'm gonna set the height to 100 the H you could set the minimum height to 100 VH as well but I know I don't want any scrolling to the site so I'm just setting the height to 100 the H so again it is gonna be a header that's a hundred percent width or 100 viewport width and the height is 100 viewport height all right so for this section we're actually going to use grid so if you haven't messed with CSS grid yet I highly recommend it it's a super cool way to build out layouts and web flow so to make the section the display settings a grid we're just going to click on the grid option here grid lets you place items within rows and columns so I'm gonna click it and now we can set up the grid so we can set up how many columns we want and how many rows so I know for this website I just want three columns right the the left the left column the slider column and then the social media column so if we look at the site we have this here we have this and this okay so we want three columns so I'm just going to click the plus here to add another column and I'm gonna delete the the second row so we have three columns there I don't want any gap so I'm just gonna set 0 for the gap and perfect so we're working with the fraction unit which is a really nice way to be able to create grids and web flow so I'm gonna go ahead and visually see ya visually see how large or small I want to make each column so the last column I want it to be really small so I'll set it to 0.25 then the second column I'm gonna make it a bit smaller as well so something like 0.5 and then the third column I can even make it a bit bigger to be 1.25 and again I'm gonna reference this site because yeah just to see the different things so 1.75 1.25 and 0.25 yeah cuz I already built it so I can just reference it really quick 1.25 and I think I got exactly on a 1.75 1.25 so yeah it just depends you can just work with it so I'm gonna say one point two five and then one point seven five here alright so there we go we've got a nice grid layout for the section so I'll go ahead and add div blocks inside of each section so within section one I'm gonna go ahead and hit command K I'm gonna type in div for a div block and it already places it in there so this here this left navigator this is a bit new and web flow at the time of this recording where you can now pin the navigator to the left so that is just super important and super amazing that what flow added this because as I'm working on the site you can see the structure of the elements as I'm building it alright so we have this div block I'm gonna call it left wrapper so all the contents of here are going to go inside of the Left wrapper then for the second column I'll go ahead it man k I'll add a div block and let me place it here in the second column so I'm just click holding and dragging into this grid section and I'll call it and actually let me redo that I'll just delete that we actually want to add a slider in in here someone hit command K type in slider and select it and then I'll just click hold and drag and place in there and now we have the slider here so I'll rename it to slider and for the height I'll set it to 100% so it fills the entire grid cell there the grid section and then the last div section or grid section is the stripe part here so again I'll click on section and command K I'll add a div block I'll click hold and drag and place that div block right in there and I'll call this right wrapper okay so we have the left wrapper we have the slider and we have the right wrapper okay so let's go ahead and start filling in the content so I'll go ahead and start adding first I'll add the menu and then I'll add the content here so let's go ahead and do that I'll add another div block inside of the Left wrapper so I'll say div and I'll call this menu wrapper so this is where the menu will go and yeah we'll just leave it like that from now or actually I want a specific height to this menu wrapper so I'm gonna set it to 100 pixels in height so I know it fits yeah it just fits nicely in there okay so let's go ahead and add some text and some some link blocks or text links so for this yeah the way I want this to work I'll go ahead and add a text block or I can yeah take command K add a text block select it there and I'll just call this the that logo text or the text logo okay so the the name of this website is conserved so it's an animal conservation kind of website so I'm going to just type in co NS RV and I'll go ahead and style it within text so for this text I'm using próxima Nova from Adobe fonts and if you do have Creative Cloud you have access to Adobe fonts so I'll leave a link on how to link Adobe fonts into webflow but you know I went through the whole process of linking my my Adobe fonts to web flow and then I added Proxima Nova to this project so I'm going to go ahead and select it the font size or yeah the the font weight is black and then I think the font size let's see here the font size is 18 and the line height is 20 okay I'm gonna go back in here the font size is 18 line height 20 so for this menu wrapper I want everything to be in the center so I'm gonna go ahead and change the display setting to flex so flex lays lays out his child elements on a horizontal and vertical access so I'll go ahead and click there I want to align it in the center so it just gets centered and I'm also going to actually we can justify to the left for now so that's fine so we have the text conserve the next thing I want to do is add that line so if we look at the web site we have this line here so I'm just gonna go ahead take command K at a div block and I'm gonna call this menu line okay I'm gonna give it a height of 1 pixel and I'm gonna say the the sizing here because it is flexbox you can grow different elements inside of a flexbox wrapper so I'm gonna say growth possible so it just tries to fill the entire wrapper the entire flexbox wrapper and then for the background I'm gonna go ahead and set the background to black right so now we have this line it's right in there perfect okay so let's go ahead and add a few text links for the menu items so you know the command K type in text link and just places it right there perfect for this I'm just gonna say blog and then I command C and command V to paste so we have those two there will say blog and contact alright so obviously the spacing is a bit tight so let's go ahead and fix that so I'll select the menu line and I'll go ahead and add some left and right margin so I'll hold down alt that's the shortcut to add just left and right or top and bottom and we'll add 20 pixels of margin so there's some space between the lines and then for the link let's rename this I'll call this menu link I call it menu menu item link okay and then for contact will again call it menu item link and perfect so we obviously have to style that so let's go ahead and do that really quick so for the style I don't want any text decoration so there's no underline for the color I'll go ahead and change it to I'll go ahead and well yeah let's do three three three so it's not completely black and then let's add some right margin so maybe about ten there for the margin yeah and that looks pretty good and let's go ahead and set the font to próxima Nova and the default of the font weight to medium okay so yeah that was looking pretty good maybe we can add a bit more margin maybe twenty two to that and looks pretty good so there we have it one thing you can do because the Navigator is taking up more real estate within the designer you can just go to preview and you'll notice everything gets a bit wider or kind of expands because we now have more real estate so I'll be using the preview quite often just to get a better feel for how the site's looking alright so the other thing we noticed here is that there's no padding or margin to the left and right of the menu wrapper so for the padding I'll just add some here so I'll hold down alt and just add try that again and just add some padding to about 40 so everything it does so it doesn't touch the left and right of the site there so just like that we have a nice little menu obviously the site isn't too in-depth it just has a blog and contact to kind of inform users about animal conservation so that's fine so let's go ahead and add the content now so for that what I'll do is add a Content wrapper so I'll select the Left wrapper hit command K a dative block and I'll call this content wrapper okay and what I'll do for the left wrapper is I'll set the display setting to flex set it to vertical stretch and and just if I start so oh yeah it's a vertical align stretch and justify start okay so what this does is it places the menu on top and it places the content wrapper below it so I'll select the content wrapper and again for the sizing I'm going to say growth possible so it fills the entire available space within the Left wrapper alright so now we have this content wrapper and this is where we're gonna put the heading the subheading and the the paragraph okay so let's go in here and for this I'm gonna set the display setting of the content wrapper to horizontal justify:center and align Center so everything is placed nicely within the center of this content wrapper all right so I'll go ahead and add an h1 text so select the content wrapper hit command K say h1 or heading I'll say h1 and I'll go ahead and say let's see what I have here for the site the first one is making the connection so I'll say making the connection okay and yeah that looks good let's go ahead and style the text I'll say próxima Nova right here and I think it's próxima Nova black so it's like really bold let's go ahead and see it's bold sighs sixty line height seventy all right so it's bold here and sixty and seventy there and looks hit enter here so that it doesn't kind of spill into the next or actually what we can do oh that's better okay let me do that again okay all right so we have making the connection so hopefully as you're watching this you know if you work with Adobe XD or sketch you'll start to see the similarities between the interfaces or the different options so you see me working with text the only thing different is the web development concepts that I'm using right like placing things in wrappers the sizing flexbox and grid these are all what web development concepts that help you translate a sketch or XD prototype into web flow so yeah I think just you know what flow is just a super powerful tool to be able to just convert from those platforms into an actual website all right so let me just rename the class name here h1 heading and yeah it looks good making the connection so one thing that I like to do with content is I like to have a lot of white space right so like if I preview this here we notice that it goes across the entire content wrapper here on the Left I actually want like 20% white space on the left and the right of my content so for the content wrapper I'm gonna go to padding and I'm gonna say 20% from the left and 20% from the right okay so now if I preview we have some nice white space here within the left wrapper okay so so far so good it's looking pretty good so we have the h1 heading and there's a step I missed so let me go ahead and backtrack a bit before we add the the the h1 heading we want to place the h1 heading in in a wrapper in a wrapper so let me select the content wrapper hit command K I'll type in div so I'd a div block and I'm gonna I'm gonna call this heading wrapper okay and I'm gonna place the h1 heading inside of this heading wrapper okay so it looks the same but there is a wrapper around it now and what this allows me to do and also let me remove the the margin and from the bottom and the top here what what having the heading wrapper allows me to do is with the heading wrapper selected I can now go into overflow and set it to hidden so if you notice in the site here when I go to the next the next slides the the text is appearing but it's it's almost like a masking effect right so because they're in a wrapper and I'm kind of losing my voice here but because they're in a wrapper I'm setting the wrapper to an overflow of hidden and then the content appears out of the wrapper and this will make sense in it in a second so one thing I noticed that I didn't do let me delete delete this here so we actually have two headings inside inside of here and let me just double check that so we have heading okay yep so gotcha so we have two text blocks so if you notice this text appears and then this text appears as well so if you notice we have two headings appearing out of a an overflow hidden wrapper okay so we have making the connection let's see yeah so heading okay gotcha so what I'll do is I'll copy and paste the heading wrapper and let's see if I did that right so anyway okay gotcha all right cool so I'm just referencing it because there's a quite a few moving pieces to this so for the content wrapper we're gonna set it to a display setting of vertical so that things stack on top of each other okay so now here for the next setting I'll say making the connection okay and then for the heading wrapper let's see here heading wrapper and the heading so okay and let's do for the concert wrapper align left not Center so that these are aligned here the making be the connection here okay so now we have this heading and this heading okay alright so that looks pretty good and and I also want to name this slide one heading yeah for both of these this will help me as I'm building the slides to to know which one I'm working with alright so hopefully you're following along if you have any questions let me know but yeah I'll keep keep it moving okay so we have the heading wrapper and yeah now we want to add the subheading okay so the subheading is also going to go in a wrapper so I'll select the content wrapper hit command K add a div block and I'll call this subheading wrapper I'll set the overflow to hidden and then in here I'll add a heading and I'll set it to an h2 heading so it'll be a subheading and let's see what I have for the text here we have one add one animal at a time so let me just type that really quick one animal at a time and let's check out the the font so it's sixteen font size sixteen line height twenty and it's both okay so I'll say Proxima Fox with Nova size sixteen line height twenty okay and then the letter spacing is quite large here so letter spacing is six so we'll go ahead and say sex here for the letter spacing and just like that looks good and just to make sure we'll go ahead and say all caps here for the style to capitalize it alright looks good yes let me rename this here and I'll say slide one subheading and I'll go ahead and move the or for the margin I'll say forty and for the margin bottom I'll say forty as well I think that's what I did here so or maybe not so let's see each one wrapper paragraph okay so oh yeah h2 wrapper okay 2020 alrighty so let's go here and we'll set it to we'll set this to zero for the margin and the subheading wrapper we'll set it to 20 and 20 okay so I'm just working with the spacing here to add a bit more spacing there alright so now if the last thing we'll do is add the paragraph so I'll hit command K and add a paragraph okay that looks good we'll just leave the lorem ipsum for now and then for the font I'm gonna say próxima Nova again I'll reference this here so we say sixteen with line height of 26 we'll say sixteen line 826 that looks good and yeah I'm pretty happy with that let's go ahead and preview so we noticed this text is a bit too long I don't want it to really go past the heading the heading here so I'll just select the paragraph and I'll call this slide one paragraph here for the this paragraph and I'll set the width here to 400 pixels okay so that this paragraph doesn't extend beyond the heading here all right so we're almost there with the text so let's go ahead and add the button so I'll select the content wrapper a command K add a button and we just have a button in there and I'll just say learn more all right and that looks pretty good let me move the border radius okay it doesn't have one and I'll go ahead and grab the color we're using for this site so it's a lime green line lime green it's all selected and just paste it right in there okay we have that green and we'll style this button a bit more let me go ahead and change the text to próxima Nova and we'll say we'll say bold okay add a bit of letter spacing and maybe make it 18 a bit larger there okay maybe one for the letter spacing okay so we have making the connection and we'll go ahead and add some margin to the top of this button so it's not so close and bam so we have the content we will have to duplicate this because we're happy we're gonna have three slides but first I'm going to create the the first slide and then we'll add the other slides okay so let's go ahead and yeah and a few things I'll mention so if you notice I'm working a lot with alignment all these things you'll learn in the learn UI design course about alignment and placement of elements and working with typography so if you want to know more about the design aspect of what I'm doing definitely check out the learn UI design course alright so we have the content let's go ahead and add an image to slide one so so we have slide one I'll go ahead and rename it slide - one and to add a background image I'll go to the backgrounds click the plus choose an image and I'll choose the first image here of the elephant with this guy and I'll hit save cover so it covers the entire slide there and I'll just position it in the center and I don't need it to be tiled okay so now when I preview you have that image there perfect looks good so let's go ahead and add the content here and then we'll animate all these elements so here we have the right wrapper so in this wrapper we have a few little design elements so we have this block here we have this line and a few social media icons so I'll go ahead and hit command K and I'll add a div block for this div block I'll make it 75 pixels by 75 maybe 50 by 50 okay and then for the color sort of like the background color and yeah I'll select the screen here I actually saved it to the global swatches so I can access it and yeah and then for the right wrapper let's give it a display setting of flux and we'll say vertical will Center everything and we'll start at the top okay so now that block is there and that block of yet it's smaller maybe 35 pixels by 35 so this is where it's it's kind of good to reference the preview because if you notice everything gets a little bit condensed here and as I'm working with it in the designer but when I preview I think I can see a good representation of what the site is looking like okay so the next thing I'll add in the right wrapper by command K add a div block and I'll add a a line so I'll say for the width one pixel for the sizing I'll say grow if possible so it fills the available space and for the background I'll say black okay so we have that little decoration there of that line and for the line let me add some bottom top margin so I'll hold down alt I'll say like 20 pixels of bottom and top margin the next thing I want to add is the social media wrapper so I'll select the right wrapper and I'll say divs add a div block call this social media wrapper and in this wrapper I'm going to hat I'm going to add a link block so we can add some social media icons and I'll call this social media link block I like using link blocks for social media because it allows for more mouse space like if you just add a text link then the user has to hover over exactly over the icon but by placing the icon in the link block it gives more Mouse area for the user to click okay so we have the link block and inside the length block and hit command K and add a text block okay so we add a text block and I'll go ahead and go to font awesome calm and we'll go ahead and grab a few social media icons okay let me say Twitter so we'll go to Twitter here copy this and I'll hit click the copy yeah to copy the glyph and let's go back in here and I'll just paste that in there okay so right now it's just a square and let me let me rename the class to social media icon right now it's just a square so we actually have to go into the font and select F a brand so it's font awesome brands and I'll leave a link to a web flow article on how to install font awesome into web flow it's pretty easy you just download the the font the font set from fawn off so and then install it into web flow all right so we have the social media there and let me style the social media link block so I'll select it here or in the navigator I'll say none and then for the color I'll say yeah 3 3 3 3 okay I might change everything to black I don't usually like working with complete black because it's pretty dense on the site so like I'm just using a black with a bit more brightness to it so like it has 20 percent brightness so it doesn't look so dense especially on retina screens a black looks really really dense so I'm just making it a bit a bit lighter here that's not the case with the first one I did I actually used black but for this one I'm just gonna use a lighter variation of it alright so we have the Twitter icon that size looks okay 14 pixels line height of 20 so let me go ahead and just copy the social media link block I can select it down here or in the Navigator so I'll hit command C to copy and then I'll paste it three times I'll select the social media wrapper change the display setting to flex set it to vertical and perfect so we have it there and I'll just add maybe some margin like 10 pixels so there's some spacing between and let me add it to the link block not the social media icon so there we go so we have 10 pixels of spacing that looks good and I'll just go to font awesome so we have Twitter let's do Facebook yeah let's do this one here I'll copy the Unicode glyph and let's go back in here and I'll paste it in there and let's do one more let's do let's do let's do YouTube so we'll copy this to YouTube here copy the Unicode glyph and I'll paste that right in there okay so for the social media link blocks let's set a display setting of Flex and let's just Center everything so align Center and justify Center alright so now if I preview we have the social media icons there so again I want to add some padding to the bottom and top here of the right wrapper so I'll just go select the right wrapper and let's add some padding so let's do like 40 maybe so 40 and that looks pretty good the thing I'm looking for is a nice alignment between the the menu here and this block here the block maybe could be moved up a bit but well we'll get to that in a second and maybe not 40 for the bottom maybe 20 pixels for the bottom okay yeah looks pretty good let's see and this line here should be one pixel in this line one pixel okay yeah one pixel all right yeah it's looking looking pretty good you have the social media icons we have kind of this little decoration here so the other thing we noticed is we have kind of this topographic background it just adds a bit more style to the site so let's go ahead and add that really quick so the way that I did that is I selected the body and I just added another div Block in the body so I'm gonna say or yeah hit command K I mean yes like the body and command K and I'll add another div block and I'll call this topographic background and let's set the position for this div block to absolute and full right so by setting it to a position of absolute or we could actually do fixed so stays fixed within the browser right because it's this is this website is just filling the browser so I'll set it to fixed and for the background I'll add a background I'll choose an image and I have this topographic background here again I got this from Envato element I'll set it to cover so it covers that space and Center so we just have it centered and I don't need it to be tiled and perfect so as you can see that background is really really dark and it's it's conflicting with all the content on the site so we just want to set the opacity so right now I'll just go down to opacity and set the opacity to something like 5 or 10% so let's try 10 percent 10 percent is pretty good it's still kind of distracting I just want it to be barely visible so I'll set it to like 5 percent and at 5 percent I'm okay with that like the user can see it and it just adds a bit of style to and and a bit more feel to the site like it's just a bit more style to it yeah so so far it's looking good now that we have our elements oh the last thing I want to do is I want to style these these icons here or the the left and right slider so we have these arrows here I want to place these arrows here at the bottom so if we look at the preview we have these arrows here at the bottom so I'll go ahead and select the the left arrow I just left select it in the navigator here so we have the slider and then we have the left arrow and the right arrow I'll select the left arrow and I'm going to give it a specific width and height right so I'm going to say 100 pixels 500 pixels okay I'm going to set the background to 2 black and I'm gonna put set the position to absolute for the left arrow and place it in the bottom left so it goes in the bottom left and then for the margin I'm gonna say negative 100 pixels so it moves a hundred pixels to the left right and it'll place it nice and flush with the left side of the slider so for the right arrow I'll select it select the right arrow again I'll set it to 100 pixels by hundred pixels set the background to two black and I'll position it in the lower left as well and just like that we have those two arrows at the bottom pretty pretty simple so now if I click I can go through the different slides just like that alright so yeah so far so good I think we have a lot of the components that we need for the site so let's go ahead and and create the animation so what I want to occur is that when the slide comes in I want the the slide text to appear and when the slide goes out I want the slide text to go down so let's go ahead and quickly animate everything okay and let's let me change the position of the background if you can't select elements it's because let me whoops let's go back in here yeah okay yeah what I want the slider there okay so we want the body let me place the topographic background behind this section so I can select the elements which I still can't do so let me set the topographic background the Z indexed 2 to 0 and the section let me set the Z index to - one so where is it here the position let me set it to relative alright perfect so I just needed to change the positioning of the section so that it comes to the front so I said it's a relative and now in the designer I can select the element alright cool so when working with a slider let me just open it here when working with the slider you do have the option to animate elements as the slider comes in and out so in interactions let me select let me select slide 1 and I'll go to interactions I'll select the element trigger and then we have this option here that says slider change so I'll go ahead and select that so when the slider is in view I want the heading text and the subheading text to appear and I want the paragraph to fade in so when the slider is in view I'm going to start an animation I'm going to click the + and I'm gonna say D - or slide 1 and so slide one end okay so when it comes in or will animate everything so I'll select the slide one heading I'll say move and I'm gonna move it down on the y-axis a hundred percent right so we don't see it and because the the heading wrapper has an overflow of hidden we don't see it outside of that wrapper and then for the timing I'm going to set it as the initial state and perfect now I'll do the same thing for the slide one subheading so I'll say move move it down a hundred percent and I'll set it as the initial state perfect and then for the paragraph I'll set the opacity to 0% and I'll set it as the initial state so if I preview we don't see anything so those are the initial States so now I want those states to reappear so I'll select the slide one heading I'll say move and I'll move it back to 0% on the y-axis let's set the easing to ease out quad the duration of 0.35 and we'll add a delay of 0.35 so the reason I'm adding a delay is because it'll give it some time it'll give the previous slide some time to animate out and then this one will animate in so this will make a bit more sense in a second okay then I'll select the slide one subheading I'll save move move it on the Y to 0% and I'll just place it right there so slide one subheading set the easing TVs out quad and a duration of 0.35 okay then for the paragraph we'll set the opacity to to 100% say ease out quad duration of 3.5 click hold and drag to started with the other elements it's not when I preview these elements come in just like that all right so that's all we had to do for this animation so let me close this here and then when the slider slider is out of view I'm going to start in animation and I'll duplicate slide one in so also you duplicate click it here and then I'll say slide one out all right so here we have it I'm just gonna use the initial state so I can select these two states here and then I'll just select in the initial States and I'll uncheck set as initial state and now everything will go back to the initial state and I'll set the timing to 0.35 here and I'll say ease out quad if you select multiple time two actions you can adjust the timing and easing and delay for multiple elements so this is an example yeah so when we go out of the slide the headings will move down the subheading moves down and the paragraph goes back to an opacity of 0% so it comes in then when we go out everything disappears all right so we have the animation so now let's add two more slides so let me go into the slider right in here go into a slider let me close this and we have slide 2 so I'll rename this to slide - - and for the background I'll add a new background choose an image and we'll choose this one here set it to cover position it in the center and I don't need it to be tiled I might work with the positioning a bit just to get the the position of the image really nice but for now we'll just say Center ok so we have the second slide and now we want to copy the subheadings alright so this is this is a really interesting part of the tutorial because now we're gonna add another div block within the heading wrapper so notice what happens here right because we want content that matches this image so we're adding different content so I'm gonna select a heading wrapper I'm gonna select slide 1 heading I'm gonna hit command C to copy and command V to paste so notice what happened there right the text goes below each other I want the text to be on top of each other so the way to do that is first we need to set the heading wrapper to a position of relative so for the position I'll say relative and then for the heading that I copied I'm gonna select it I'm gonna say duplicate class and I'm gonna call this slide - heading and for the slide - heading I'm also going to set the position to absolute and full okay so the slide - heading is here at the top so if I double click there's actually two headings but they have the same text so if I double click I'm going to type in into the and then I'll do the same thing here for this heading hit command C to copy paste it in the heading wrapper duplicate the class or actually I can remove the class and I'll say slide to heading and just apply the slide to heading there and I'll say into the jungle okay so if I go into slide one heading and I set the display setting to none let's see here yes let me see here we actually need the slide one heading because and I think yeah let me set the position to relative there just we can work with the z-index the reason that all the text disappears if we set the slide one heading to a display setting of none is because the slide one heading is setting the width and height for the wrapper there so that is a bit kind of an advanced thing you'll probably learn that as you work more with web flow but because the slide one heading because yeah because there's no width and height to the wrapper it's inheriting the width and height from the content inside of it and if element is positioned set to a position of absolute it doesn't create that width and height it either needs to be set to static or relative so so I'd want to set the relative and then we're using that width and height that it's creating to place the slide two heading in that width and height but yeah it looks a bit jumbled but just know that we'll fix that as we add the animation alright so same thing with slide one subheading we'll select select it it command C to copy and paste it in the subheading wrapper I'll duplicate the class and I'll say slide to subheading okay and then I'll set the position to absolute and full okay and again we need to set the subheading wrapper to a position of relative so that the absolute position text is relative to the subheading wrapper and not relative to some other element alright that's a mouthful I know I went over a lot I'll be happy to kind of explain that in a bit more detail if you have any questions okay so the subtext here is learning more every day let me just select the slide to subheading and I'll say learning or everyday everyday okay so we'll have to work with that because yeah it doesn't span oh yeah for the subheading rapper let's uh set the width like 500 pixels okay so it's a bit a bit larger and it fits there okay so into the jungle learning more every day perfect and then for the paragraph yeah for the paragraph I'll hit command C and we actually want to place this paragraph in a paragraph wrapper so let's go ahead and do that select the section or the content wrapper command K add a div block and we'll say a paragraph wrapper okay I'll place this right up here and place the paragraph inside of the wrapper okay it looks good again I'll set the position for the first paragraph to relative it command C to copy pasted into the paragraph wrapper duplicate the class and I'll say slide to paragraph okay set it to absolute and position:relative paragraph okay absolute and full and set it to relative here okay all right so slide to paragraph I'll just delete some text to make it a bit different in vain so now if I preview we have the text here okay so hopefully you're following along I know it's a lot because everything is on top of each other but it's just a matter of work you know placing elements in the wrappers and setting the second and third content to a position of absolute and making sure the wrapper has a position of relative okay cool so we have the slide two paragraph so now let's animate it let's animate all of this content so I'll go to slide two here in the slider go into the interactions for element trigger click the plus I'll say slider change when the slider is in view I'll start in animation I'm gonna go ahead and duplicate the slide 1 in so I'll say duplicate and just make sure I'm recording here okay all right cool so yeah just make sure I'm recording because this video is pretty long so okay so we have slide 1 and so I'll click it here and I'm gonna rename it to slide 2 and so all we have to do here is change the change the targets so rather than a slide 2 heading I'm going to right click change target and I'll select the slide 2 heading slide one setting subheading right click change target click on slide 2 oh wait no right click change target click on slide 2 subheading here I'll right-click change target click on slide 2 paragraph and the same here right click change target slide 2 heading right click change target right click slide 2 subheading right click change target slide 2 paragraph so just like that we have into the jungle and we have to add the slide out to animation so let me close this here going to start an animation I'll duplicate the slide 2 slide 2 in click it here and I'll say slide 2 out again I'll just delete this here and select it uncheck set as initial state change the duration to 0.35 and say ease out quad all right so into the jungle comes in and then it goes out and then we have making the connection so cool we were having we're creating a really nice sight some animation it's some nice content for the user user to digest and they can click on learn more to learn more about the site if you did want a different button for each for each section or each content you could just fade out the button like we're doing the paragraph but we'll just leave the button like that for now and let's add the last slide so we'll get some good practice here okay so just taking a bit of a breath because uh yeah it's getting pretty long here but let's let's go ahead and finish it up here oh yeah so let's go back into the site here and perfect so slide to heading let me close this here and what I'll do now is just copy the slide two heading paste it in the heading wrapper and oops let me undo that slide two heading I'm gonna say duplicate class and I'm gonna call this slide three heading and let's see what did we do for the last slide we said one leopard at a time so one leopard yeah so we'll have to work on that one Leopard and then we'll copy the heading here paste it in the second heading wrapper and remove the class and say slide three heading and we'll say one leopard at a time okay there all right so slide three heading let me just give it a bit more width maybe 400 500 all right yeah okay so what we'll fix this in a second let me set it to auto okay one leopard yeah we'll fix that in a second all right so let's go into the subheading it can make it copy paste that in there duplicate the class say slide three subheading and so leopard helping endangered leopards okay so let's type that in helping endangered leopards okay cool and then the paragraph Thank You merci pasted duplicate the class and I'll say slide three paragraph and I'll just delete some text here from the slide three paragraph and should be on the top there okay I'll just copy and paste this down a bit more content okay looks good one leopard alright okay so we have all the content and let's yeah let's add the animation now so this will help us see the content a bit better because now everything is overlapping so let's go ahead into the slider and now hi community to copy and paste or I can just yeah select the slider going to the element settings and add a slide okay so now we have slide three I'll double click call it slide three select it okay rename the slider you want to rename slide three okay I'll say slide three okay go into interactions add a slider change interaction slider and view start an animation I'll go ahead and duplicate the slide one again select it and I'll call this slide three in and I'll just change the targets right-click change target select the slide three heading right click and change target slide three heading right click change target slide three paragraph right click change targets like three heading right click Change target slide three subheading right kliff change target slide three paragraph okay so now we can see everything a bit better so slide three subheading yeah that should okay all right it's like three heading paragraph okay let's keep it moving something's not working correctly but that's the fun of web design and development always kind of troubleshooting things here so we have slide three n so I'll go ahead and duplicate this class and I'll select it and I'll call it slide three out I'll delete all of this change the initial state so it's not the initial state duration point three five and the easing to ease out quad okay and let's take a look so not sure why that's still there all right so this is some good troubleshooting practice so slide three heading let's see slide heading wrapper slide three subheading let's go to the interaction here oh I got it okay so this is slide three out it should be slide 3 in so kind of messed that up there yeah so for the animation in it should be slider and view a slide three N and then slide three out I accidentally selected it there and it's still not working so let's see what we're doing slide 3 n oh here I selected heading instead of subheading so I'll change target and select the subheading okay that should do it perfect okay so we just have to make sure we're selecting the correct things so now for the slide three heading here at the top yeah for the slide three heading let me close this here it's not it's not fully going across so let me set the heading wrapper to a width of 400 pixels maybe 500 yeah okay all right 500 okay cool well that's really interesting let me go back in here slide 3 in I think your subheading paragraph okay okay let me go ahead and preview cuz I'm not quite sure why it's doing that so let's preview and let's zoom in here okay 175 okay so click looks good and yeah so we're missing something so let me go back to this like three select the slide three out yes the same thing change target and change it to sub sub heading three okay so getting here okay now everything should work fine so there we go one animal at a time and perfect okay so the last thing we need to do is add the image to slide three so let's go into slide three go down into the image background choose image and I'll select this leopard here set it to cover position it in the center and I don't need it to be tiled all right yeah so that's pretty much it we're almost done with this website here and looks good and the last thing we'll do here is we'll remove the slider nav so I'll select it here at the bottom for the display setting I'll save done let me let me close the navigator here so I just close this we have a bit more real estate here within the designer yeah the last thing I want to do is let's see yeah add the light box here for the video okay so let's do that really quick I'll go ahead and select the slider so let me open the navigator again I'll select the slider and hit command K I'll add a light box click light box and let's set the slider to a position oh it's already set to a position of relative so we want the light box to be in the slider and let me see if it's in the slider yeah okay so I'll place it at the top I'll set the width and height to 200 pixels by 200 pixels and here let me let me try something here for the heading we change the heading wrapper to a width of auto for now nope that's not doing it just like the slider okay I'm just trying to get some more review of the slider let me set the that's not working okay all right so let's keep it moving I'm just trying to get some more real estate here within web flow but yeah let's keep moving here I'm gonna set the position to absolute for the lightbox link and place it in the lower right and yeah I'll go ahead and delete the image I don't need that image I'm gonna add a background choose the image and I'll choose this line here set it to cover position it in the center and I don't need it to be tiled so the position let's see slider should be in the front let me try bringing it to the bottom here no see here I was just looking we're gonna set it to relative okay it's at their position absolute okay we should see it so let me set the z-index here to something like nine nine okay alright so there we go and I'll change the width the height to 100 so the width is 200 pixels and then I'll add some bottom margin of 20 and some right margin of 20 all right so that looks pretty good and let me set it to the width to 150 so it's not so large yeah I'm trying to get that left wrapper a bit smaller so we can see the slider as we're working with it so maybe 100 okay I'm just gonna do that for now so we can see the slider so all I did and I'll just recap because you couldn't really see it for the lightbox link I placed it within the slider I gave it a higher Z index set it to a position of absolute and placed it in the bottom right before it was set to like relative so it's at the top but I want it to be absolute so I can put it here at the bottom yeah and then I'll give it a color overlay so I'll select the color select the green and set the Alpha to something like 60% okay and I'll also add another image I'll choose an image I'll add the play icon set it to cover position in the center and actually I'll just set it to custom and give it a specific width and height of like maybe 35 by 35 and I don't need it to be tiled and there we have that nice play button alright so far so good we have the lightbox link there so for this tutorial here I'm using a youtube link from from forget his name but I'll find it in a second so let me go here and for the media I'm going to say video and paste it right in there and I'll say save let me publish just so I can get the guys name I'll preview so that when we click wait a second here find the right one and okay preview yeah so let's okay yeah publish to select the domain preview okay that's right yeah so I click and it's by Kevin Richardson the lion whisperer he has a really cool YouTube channel about helping out lions which I really like and I think if it's kind of this theme of the animal conservation okay so let's just recap let me go back in here and let me select the content wrapper or the the left wrapper and remove the hundred pixels so it goes back to normal okay so I'll preview and perfect so we have the text so I go through each one into the jungle one leopard at a time let's go ahead back into the heading wrapper set the width to 500 pixels okay publish and yeah there we go making the connection into the jungle one leopard at a time okay and it's all animated looks good you can click the play button play the video one thing you'll notice is that this is green and that isn't a default thing in the lightbox I actually added some custom code right in here where it's the style tags and then dot W lightbox backdrop the background and then I set the background to that green with an opacity of 0.9 so we have a backdrop that matches the site so we have the video and looks good alright so we're getting there the last thing we're gonna do is add some hover States to this button this video and the social media icons so I'll select this button go to States go to hover and I'll go to the color and I'll just adjust the brightness to maybe something like maybe 50% looks okay might be a bit dark but we'll just go with that then for the lightbox link as well we'll go to the hover State and we'll change the backdrop color or the yeah the backdrop brightness to 50 so when we hover we just get like a darker state and and then we also want to go to the social media icons so again I'm gonna set the wrapper back to 100 it's also like the social media icon for the hover State select hover and change the color to the lime-green okay I'll go back to States I'll select the left wrapper and remove the width so I'm just adjusting the width so we can see other elements in the designer okay so now we have the darker hover state for the video and the button and then the social media icons also turn green when you hover if you want some easing to these hover states you can just select the element with the hover state make sure it's in the normal state and go down to transitions click the plus and then you can do something like background color and then change the duration you can do something like 350 and I can say something like he's out quad to match the easing of the entire the entire site now when I preview it subtly turns green rather than kind of an abrupt green okay so I think we're just about done the last thing I'm going to do is going to the slider go into element settings and then for the easing I'm going to set it to ease out quad just to match the the easing of the entire site and the duration of 500 milliseconds is okay so the easing of the slide coming in matches the easing of the text coming in okay so we have the button we have the menu appear with the links and we have the play button okay there so as you as you can see here in the preview of web flow it's black and that's because the code doesn't go into effect until we publish it to a live site so I'll go ahead and preview and yeah so now when I click it's green very nice okay so let me see if there's anything else I'd like to cover here we have the yeah the play buttons that looks good or the the slider of left and right arrow you can adjust the size of these arrows simply by going into web flow selecting the icon and then changing the size here within the typography section like there's something like 32 to make them a bit smaller all right so I think we're nearing the end of this tutorial hopefully you enjoyed it I love working with web flow so it's really fun for me to to build things like this and yeah I'm just kind of working with with different elements and things like that so again the images are from in bottle elements the typography that the font is from Adobe fonts it's próxima Nova and yeah so the last thing that I'll Showcase is I'm not going to showcase it in this video tutorial there's going to be a follow up where I create this animation here and after-effects and then I use body movement and Lahti to place it into the site and then I add a backdrop that appears and then goes up in web flow so we're pretty much done we're done here with this tutorial if you have any questions let me know I'd be happy to answer them I do have a slack channel as well where we can discuss more in depth these tutorials and the daily interactions that I post at web dev for you comm so yeah hopefully you enjoyed it I think that's pretty much it let's go ahead and review the the layout here within the navigator so let me make it a bit larger so we started with the section set it to grid we have a left wrapper the slider and the right wrapper and in the left wrapper we have the menu wrapper up here we set it to a height of 100 then we have the text logo the menu line and the menu item links then we have the content wrapper has a display setting of center center flex or left and center we have the two heading wrappers with an overflow of hidden and then we have the headings inside of each heading wrapper we have the subheading subheading wrapper with an overflow of hidden and then we have the subheadings in there and then we have the paragraph wrapper with it doesn't have any overflow but we have the paragraphs in there and then we have the button here and I'll just rename this to get the button okay then we have the slider we have in the mask we have slide 1 2 & 3 they all have an interaction to effect the headings and the subheading in the paragraph so we have a slide in and slide out they do have a delay for the slide end to point 3035 so that the slide out animation has time to to complete and then we adjusted the the arrows within the slider we place it in the lower-left added a negative 100 margin to the left arrow okay and then we have the right wrapper with let me just call this here green square and call this here vertical line so we have the vertical line yeah the green square the vertical line this will show a metre wrapper with the social media link blocks and the social media icons okay and then you can look out those icons to anything you'd like alright so yeah this is part one for the video part 2 will be the after effects animation and then adding it in to the site via Lahti cool yeah thanks for watching I know this is a fairly long video I'm not gonna do any editing so like if you know if I've messed up in a few places you're just gonna have to see where I messed up but hopefully you get some insight into how I fix the things for this I'm not sure I would leave the slide heading to your width of 500 pixels I might work with the padding so that I don't have to set a specific width for the heading for the paragraph I did set a specific width but either way this this works for the desktop version but usually I don't like setting kind of like a width I like the the text to kind of set the width for the headings but for the paragraph I do want a specific width so I set it to a width of 400 pixels and just so it doesn't go too far there alright so I think that's it let me preview one more time and yeah get to go cool yeah if you liked this video definitely gives it give it a thumbs up you know all this content is free so you know if you like any of the resources I mentioned below I do I am an affiliate with all those resources so with learn UI design with with web flow and with envato elements so I am an affiliate with all those so if you like these videos those links do help support my creation process I highly recommend learn UI design a lot of these concepts these design comps concepts that I used for this video are from that that course and just going through the course and doing all the assignments and homework so yeah have fun building and web flow I think it it is the most powerful visual web development platform on the web and I'm just super excited to be sharing this information and content obviously this is just a header it's not a full website but hopefully this gives you some insight into creating a full a full website I do have templates I webbed up for you calm where you can see full full page websites with different pages but I like these headers just to practice design and and practice development and in web flow so yeah thanks for watching I think that's it for this video if you have any questions feel free to leave in the comment section below if you'd like to discuss this further become a member of the web dev for you slack and we can discuss there thanks everyone thanks for watching and I'll see you in the next video tutorial thank you [Music]

Channel: WebDev For You

Views: 6,113

Keywords: webflow, web flow, webdev for you, webflow tutorial, webflow video tutorial, webflow tutorial 2019, webflow for beginners, webflow grid, webflow flexbox, webflow slider, ui design tutorial, ui design trend, ui design webflow, ui design tips, ui design process, ui design software, ui design course, learn ui design, learn ui design course, ui design for beginners, ui design concepts, ui design complete tutorial, website header

Id: VFBVh9FqDdA

Length: 76min 11sec (4571 seconds)

Published: Wed May 15 2019