How to Design a Fluid Hero Section in Divi

[Music] [Music] [Music] do [Music] well hello divi nation welcome to a brand new divi use case live stream where each week we show you how to add new design and functionality to your divi websites and in this live stream tutorial today we're going to be showing you how you can create a fluid hero section for your divi website using some fluid design principles that are a little bit different from your traditional responsive design techniques and don't forget to check the video description for more info on this live stream including a link to the blog post that goes along with it so let's not waste any time and let's jump in and get started all right so welcome everyone i really do appreciate you joining us today and feel free to let us know where you're from say hello in the comments in the chat here i'm just gonna check and make sure give me a thumbs up if you can hear me okay and that the lot and that the stream is coming in good for you guys all right all right so still trickling in here so we're just going to plug along here and still waiting for my thumbs up looks like the stream is taking a little bit to get through to you guys so i'm just going to pause for a moment let you guys come in as you can see in the background here is a little preview of what we're going to be doing today and this is the oh thank you don for the thumbs up hello scott welcome we are rocking and rolling now we have uh if you're just joining us as you're coming in today we're going to be designing a fluid hero section as you can see here in the background this is a design that uses some fluid design techniques that really are really cool when once you learn uh the you know the technique behind it really allows you to create some really uh nice fluid design to your uh page so that it stays consistent on all browsers just to give you kind of a preview of what it can do this is as you can see i can shrink my browser uh window size here on this example let's see i don't want to do that messing up my okay let's see bring that back all right now if you watch me adjust the window here once it gets to this it's actually at 1700 as the max width once it gets there you can see everything scales nice and fluidly right it the design all stays in place and it doesn't break to different lines as you can see the text the button even the little border at the top stays put and as we get kind of close to your mobile size or phone size there it all kind of stays in place and you can see that fluid design in at work to kind of scale things really smoothly really nicely that way you don't have to worry about updating uh the design and different break points stuff like that so it's really convenient tool once you have it all set up to have your design really consistent on all browser widths so um so we're going to be showing you how to do that let's check the chat here for a moment uh let's see pedro welcome scott thanks for the sum thumbs up suzanne uh susannah sorry uh welcome all right let's see uh newman welcome great to see you let's see mb oh let's see uh newman please also guide divi slider responsive issue okay yeah so um maybe you can apply some of these uh techniques we're gonna be doing today to the slider as well all right let's keep cracking so i'm going to start with a a new page i know some of you are just joining us i do want to welcome you today we're showing you how to build a fluid hero section and we are going to create a new page here on the in the front end using the divi builder so what i'm going to do to get started is i'm not going to add a row or anything i'm just going to update the section here so i'm going to go to my section settings and i'm gonna add a background and it's just gonna be a background gradient um i'm pasting it in here just to speed things up but i'll show you what has been added so there's a left uh yellow i'm sorry yellow red color on the left gradient and there's a like a really dark gray almost black um color on the right and then i added a gradient direction of 45 degrees that gives us that nice angle there and then i put the start position to 30 percent so it's going to get right to about there and then the end position to zero that gives me that straight line so there's no blur and so once that's in place we're ready to go to the design tab so under my basically all i want to do for my section here under the design tab is take out my my default padding i'm going to set it to zero at the top and bottom get rid of that top and bottom padding because i want my module to sit at the very top here so i'll save that out let's go ahead and create our first row so i'm going to do a one column row inside the section and i'm not going to add my module yet i'm going to update the row settings so i'm going to go to my row settings under my design tab under the the sizing i'm going to a custom gutter width of one take out any margins or anything like that and then i'm going to set the width to unh 100 and i just click the button that knocked me out must be a little bit too excited today all right there we go 100 percent with and then we're going to do a max width of 1700 so um i don't the 1700 max width here is important because yes theoretically we could have it continue continually kind of a scale with the browser width especially like on really large screens like um 1920 with stuff stuff like that but i thought adding i think adding a max width to the design itself uh will help to make things consistent because things can get kind of unpredictable and crazy on really large monitors and things like that so set the max width to something like 1700 or whatever it is you want and i'll do a min height just because i want this to be full screen on desktop so i just do a min height of a hundred view eight vh that's going to make sure it spans the full viewport height so that my background will stay consistent and then we can change that on tablet we can set it to [Music] none and then on phone you can set it to none something like that okay what did i just do oh i set the set the height not the min height so let's take that out all right min height 100 view port height and then let's just keep it auto on uh tablet and mobile all right and let's come down to the spacing let's take out that top uh and bottom spacing of my row as well [Music] all right so let's continue on with our first module so our first thing we're going to do is create a text module this is going to be our heading so i'm going to do a text module and you can see that text is really wide because it's spanning the full width of my row there and i do want to add a custom h1 heading here and the only thing custom about it really is in the html i wrapped that period or that yeah that period there with a span tag that uh added a color to it so that's all i did there and you can see the uh blog post and i've linked it to the video description there if you want to check out the or grab that html for yourself the next thing i'm going to do before i do anything else i'm going to go to my advanced tab and here's the kind of the the key to creating this fluid design and this is our we're going to create a fluids hero section but it's going to be built upon all these modules that are going to have at the root of each of these modules a fluent fluent a fluid font size so that's the key here so we make the root font size fluid on each of these modules and then we style all the elements of the module using using the the m length unit the em length unit which is going to be relative to that font size that root font size on the module so that's if that's all confusing to you hopefully it'll make sense as we continue on but that's kind of the key here it's like a one-two punch you give it the module a root a fluid font size and then you style the module using em length units which will refer back or be relative to that font size and everything is going to kind of move all the sizing will kind of scale with one another perfectly so for this font size we're going to use uh the fluid font size we're going to use the clamp css function there and what this is gonna do let me let's see and you can see there i'm not sure if you can see but this is the um font size clamp and the 32 pixels is actually the um let's see if i can zoom in differently there you go the um 32 pixels is actually the minimum font size so that's what clamp does so it sets a min value disregard this little error there it's still going to work just ignore that the uh 32 pixels is the minimum font size here is a fluid font size the 4.1 vw and 70 pixels is the max font size so it's basically going to if you start on a desktop it's going to be you know the max it's going to stop at 70 pixels that's as large as the font size is going to get and then when it scales down let's say you're shrinking the browser it's going to kick in this 4.1 vw whenever it becomes that size and then it's going to stop at 32 pixels so the fluid aspect is really this one here the and that's because it's going to be relative to the viewport with um which is the width of your browser so let's uh get out of here for a moment and so that fluid font size okay is going to be important because once we go to our design tab and we go to our heading text and let's say we add a heading text size let's give it one m okay now you can see it's the m the e m is relative to the fluid font size or the root font size which we've added here so it's just referring back to that so if i let's go back to the heading text size here so if i added like 2 em it's going to get really large it's just going to you know size it according to em length units and then it will stay fluid but we're going to keep it at 1 em for the heading text size we can change the let's see the heading font let's just do monster it wherever that is and let's make it heavy and let's change the font the heading text color to white now for the header letter spacing if you do want to add letter spacing just go ahead and use the the em length unit and i put letters instead of zeros so that'll add the letter spacing you need using the em length unit that way it stays fluid again always use the em length unit for sizing elements uh within the module that refer back to the fluid font size uh heading line height um you see it's already using em length units so i can just bring it up to 1.2 all right that looks good um and again for let's say like spacing let's go to our spacing we can add 2 em for the top and bottom and even the left and right so that adds the padding i need using the em length unit uh that's a bit too much let's bring it down to one em for the all the way around and let's go ahead and add a border to this uh just to kind of remind you where we're going with this this is the um heading here but on this text module we're going to add a border that's this white border around here and let's go ahead and do that i'm going to add the border width which is going to be 1 m em you can see that border now is all the way around and so since it's 1 em uh you can know that referring back to our fluid text size the border now is going to have a max width of 70 pixels a fluid width of 4.1 vw and then a minimum width of 32 pixels just like our heading text so the border is going to be relative to that size as well let's give the border color a white color and then i'm going to hide it it's a cool design trick here just hide it on the or give it a transparent color on the left side and give it a transparent color on the bottom and that gives us that that nice kind of partial framing uh design element for our text all right i think yeah we're good let's do a max with i need to do a max width on my text element let's do that and i think i'm going to go with a let's go back to our sizing here and i can size this and give it a max width because i know it's going to scale so if i use uh let's say 13 em and you can play around and get the the size that you want but that looks about right i kind of want to make sure that it stays about 50 percent width of the entire browser width so 13 em is about right and let's go ahead and make it a line to the right there let me move this over and move it up a bit so it's outside of my face okay and then so that looks good let's see what else do i need to do um i think that's it for the the header uh we can save that out and just to kind of give you a little preview i'm just going to open it up in a new tab here and let's just move it just to show you what the responsive nature of this design is doing see as i shrink the browser with it's now on that 4.1 vw size which is relative to the browser width and then once it gets to the max it's going to be at 70 pixels and then it's going to go all the way down and it's going to stop at 32 pixels so that's the max or minimum 32 pixels all right i know i'm going quick hopefully i haven't ignored you too long if you are well just joining us i do want to welcome you today to today's debbie use case live stream uh today we're showing you how to build a fluid hero section indeed and if you want to check out more there's a link to the blog post that goes along with this tutorial in the the show notes in the video description check that out and we have created our our first fluid divi uh text module here with a heading in it and a border and our next step let me check the chats hi john i didn't want to ignore you um so i got a couple questions here um prim from bangladesh um let's see uh hey you want divvy's base uh want divvy's basic tutorial for start uh to start off with dibby yeah i mean i know uh we've kind of been hitting hard with some more advanced stuff lately using the divi builder and that's really in large part because we've covered a whole lot of wonderful um basic starter type designs in our blog so the and even in our documentation so if you haven't checked that out prim definitely do that just search in our blog for anything that you would want to learn um we probably have covered it uh the mb uh where's bj bj is he's still here uh he's going strong not here not in my house but wherever he lives he's still with us uh pedro em uh unite uh units are relative to font sizes yes so if you do a quick search there's an ultimate guide on our blog to using uh length units and it goes in a great description about what those are and and how to use them the em length unit is relative to the element's root font size so if your fonts the root font size is 12 pixels then one em is going to be 12 pixels good question yes so the the the em length of pedro asks uh so the em link length unit with the root font size is what gives everything the fluid design yes correct and uh hello claudio welcome glad you're here let's continue on so our next step now that we have our text heading here is to add a just a a design element if you look back in our our finished design you see that that red kind of um accent border here well i want to add that to my design but i also want to make sure that it scales fluidly with all the other elements so an easy way to do that is to simply duplicate this text module so i'm going to duplicate duplicate the text module and i'm going to update it so i'm going to take out my text i don't need it i just want that border right so i just want to go to my design tab go to my border uh let's see before i update the border colors and size and all that let's go to the actual size of the the module itself right now it's at 13 em let's split that in half so let's do i think i can do math so 6.5 em so that kind of puts it half the size as the uh this one here and let's give it a height i'll do um 3.25 that's kind of half of that and again using the em length unit and then i'm gonna go down to my border and now i want to change the color um let's make sure i got the right color here it's the same red paste it in there so now i got the color i need i just need to shrink it down so remember it's using the e-m length unit and it's and it's already remember it's it has my because i duplicated it it has the same root font size that fluid root font size so i can use it and make and it's going to definitely stay the same uh scale the same way with that heading text module up there so but this border size i want to bring it down let's do a 0.5 so half of the width 0.5 em and then now i need to position it and an easy way to do that is to give it an absolute position let's do that so i'm gonna do absolute position and that's gonna make it jump way over there and make the location top right and that's actually cool looking in and of itself oh that's weird uh the border no that's right it's because i scrolled down a little bit okay so that's a cool design in and of itself but if we want to kind of make sure it sits right on the inside of this border we need to give it a vertical offset and what length unit are we going to use you might ask the em length unit so 1 am so that it stays i know that that width of that board is 1 am so i just need to offset it by the same value on both the vertical and horizontal that's going to place it right where we need it 1 am 1 am on both all right that takes care of that next we'll do our a little sub title text we're going to do a new text module and let's move this over for now until we position it add some mock text in here and we're going to add a different root font size for this one because we're using body text which is kind of smaller in general we don't want it to get too big so we're not going to use the same fluid uh font size we're gonna add a different one so this one we're gonna use is going to again use the clamp function the css function and we're gonna add a minimum of 14 pixels a fluid or length unit of a vw length unit of 1.4 and then 24 pixels will be the max font size so now i go to my design tab and we can edit our text let's just do let's keep the default there we don't need to change that let's do a semi-bold though font weight give it a white color i need to make sure my text size is 1 em and then my line height it's let's just do 1.6 em and the max width for this we're going to add a max width to it let's go to our design tab let's do 19 am all right so that's about again we can get it exactly how we want it to look here and we can pretty much be sure that it's going to stay that way on all browser widths because you know it's about it's going to shrink in size and scale and size according to that fluid font size we gave it so max width of 19 am let's go ahead and give it some spacing we're going to do a margin at the top we're going to add 2am it brings it down a bit below that um wait i added it to the top sorry let's do it to the bottom and then on the left i'm going to do auto so that's going to make it kind of align to the right and on the right margin i'm going to add a 5 em that'll bring it away from the edge a bit all right so there you go let's save that out next we're gonna add a button so move this over again they have the button over here and we're going to add a new let's just add some button text here we're gonna you know seven day free trial add whatever you want though and then for the cust under my advanced tab under custom css for the main element i am going to add a new font size so this one is going to be more targeted to a button size so minimum font size of 20 a 2.35 vw and a 40 pixel max font size and once that's in place let's go to our design tab let's align our button to the right now we can move our settings mode over here there we go uh let's use some custom styles for button for the font color or the text color oh this is important uh just go ahead for the button text size don't add the 1em here just leave it alone so it inherits it by default i think if you add the 1em it's going to override or bypass that root font size for this module so just leave it alone and it'll work its magic the but the text color let's go ahead and add that red and let's do the background let's do a gradient so i'm going to do on the left i'm going to do a transparent and on the right i'm going to do white then i'm going to come down here and [Music] change my gradient direction to 45 degrees and we're going to start it at 25 and this is just cool design here not and then for the end position let's do zero and so now now i have that nice diagonal background gradient there i don't want to border with so i can take that out but if i did want a border i would use the em length unit to add that and just so you know the the this 25 you know that's that's also kind of a fluid design because it's going to be inheriting or based on the width of the button itself so as the button text shrinks which is using em length units the the size of the button will shrink as well and so this 25 will stay relative to the size of the button so everything is going to look consistent all right let's take out the border radius i don't need that i can add the button font let's just do monster again give it a heavy weight let's move this over and then let's see button font size oh let's do the italic that looks good and for the button icon let's just do this triangle and let's make sure that we can see it on all the all the time so only show icon on hover for button no and let's place it to the left there you go that's good uh let's add some space so the spacing of the buttons should by default use em length units but if you wanted to update it make sure you do use the em link units so like for example i'm going to use 0.2 em at the top and bottom and then on the left i'm going to use 1.5 em and on the right i'm going to do one pm all right i'm going to save that out let's really quick check the result on a live page so you can see now as i shrink it you can see everything scales nicely okay let's go all the way to our minimum you see everything kind of stays in place once we get to the minimum and it stays in place when we get to the maximum all right all right so uh real quick in the comments i see michael asks could you give us a link to the ultimate guide on em length units i'm assuming so um yeah sure let me let me give you that real quick or the uh sorry yeah just length units in general all right i gave you the link there and hello tim from florida welcome yes and uh ray thanks for asking um i will up this video will be uploaded and available in our youtube and facebook um pages so it'll be up you know some time uh after the live stream is done so good question all right let's continue on let's see okay so right now where we added our button um now we're going to add the last step which is that image to the left now uh i do have a one column row so and i do that because i want to make sure that i have room for everything and if i added a column there then it becomes 250 percent with columns and it kind of messes things up so i'm just going to keep it all in a nice wide one column layout and then to add my image let's go ahead and do that i'm going to add an image module here right underneath my button and let's go ahead and add the image here okay so there's my image probably can't see it very well because my head's in the way but the the image has been added now what i want to do is go to the design tab under my image alignment i'm going to keep it left but once we get to the mobile version let's get this out of the way i want to make sure that it's centered all right and let's go back let's under our sizing for our image let's do um well so that you can see it let's go over to the advanced tab and let's give it that absolute position that it needs so i'm just going to make it give it an absolute position that's going to automatically position it outside of the kind of flow of the document and position it at the top left of my of the column um or row which is what we want but on let's see on desktop and and desktop and tablet i want it absolute but once i get back to the the mobile version i don't want it i'm gonna go back to let's do relative that way it sits underneath the content and you can see it's too wide for my tablet view i'm going to fix that so let's go over to my design tab oh i forgot to do my vertical offset so under my position i gave it an absolute but you can see it's sitting right it's snug at the top there and on the left of my row so i'm gonna give it an offset um i mean i could if i wanted to just kind of give it an absolute position here or location there and it'll kind of just stay in place um which is fine for now but you could also like keep it at the top and use a a 30 v min length unit and that's going to be um again you can refer to that ultimate guide if you have any questions on what the vmin is and that's basically um going to take a the minimum width or height of the viewport with whichever is uh less so that's a bit confusing i know let's just use the centered left centered location for now all right and then for phone yeah it's going to go back to relative position so that's good all right so that's about it let's go ahead and save it out oh i i do need to give my uh image a max width that's what i forgot to do all right so going back i need to make sure that my sizing of my image all right back to the image max width is going to be 48 and that's because i don't want it to go you know into the other side of the page basically so i don't want it to span more than 50 of the width of the browser so just give it a max width of 48 pixel percent and on desktop and tablet and then back when we get to the let's do 48 again on tablet and then on phone let's do 70 because that's centered already so we're good and let's just so we have a little bit of padding on the left i'm just going to add four percent padding on the left side and that about does it and let's save it out and see what we have there's my image as i shrink it down everything kind of stays in place which is nice until we get to the bottom you can see that i need some more spacing below my button and between my image i can do that as well but there it is let's see if we have any questions before we wrap things up today all right so um uh let's see i missed this question from uh uh theo cara karis theocaris theocaris i'm not sure i pronounced your name sorry but uh what do you mean when you say fluid design sorry i missed the beginning okay so basically it is a good reminder fluid design scales or as i define it scales fluidly with the browser width and usually fluid design involves using percentage length units or vw length units and to really capture the design that we've done today we're using a combination of a fluid font size that we added to each of our modules and then we sized everything in that module using the em length unit which is going to be relative to that fluid font size so everything is going to scale fluidly as you shrink the browser as you can see the actual size of all of these elements elements are scaling with each other so that the design stays consistent so you don't need to worry about things breaking on different viewport widths that's a quick explanation i know it was a mouthful but all right and thanks for the link there tanya um let's see any other questions before we go uh greetings um thanks michael um fox k welcome from the netherlands all right i think we're good let's take a take a look at the final design one more time as i scale everything's going to be nice and fluid when i get to mobile and you can see when i get to like even smaller things start to kind of break a little bit but you can tweak it to whatever you want so hopefully we learn or you and i learned some new things with using fluid design using the uh the font size as the fluid font size as the root of each module and then sizing each element with the e-m-length unit okay i think we're done um all right uh thank you guys for tuning in that's all i have for you today uh give us a thumbs up if you like the video also make sure and subscribe to our blog newsletter our youtube channel and like us on facebook and don't forget to click to get those notifications that way we can let you know every time we have something new for you like another use case live stream like we did today and we look forward to seeing you again next week on tuesday 3 p.m eastern for another db use case live stream and we'll be seeing you guys in our next video thanks again for watching goodbye you

Channel: Elegant Themes

Views: 2,922

Keywords: divi tutorial, divi builder, divi 4.0, divi 4.0 tutorial, divi builder tutorial, divi theme tutorial, elegant themes

Id: oqURoKqdEJU

Length: 49min 35sec (2975 seconds)

Published: Tue Jul 27 2021