How To Use Divi Flexbox Options To Create Amazing Layouts

now if I were to ask you to redesign this simple layout using Divi here's what you're probably going to do you would come over here and add a brand new section like that at a single column and then in here you would add an image like that and then you just place your image so I am going to use the same images as I have in my library okay so that's my first image and then the next step you would add another row so you'd click over here add to columns and in the first one you would add an image like that and this is the image you would use and then finally over here on the right you would add some text so let's go ahead and do that so here is my text module and selected okay pretty cool so at this stage you're probably saying okay that looks similar to what I've done here on top now what if I told you that this layout here on top was not designed using that way I used flexbox in Divi now the cool thing is I've created a really really cool resource and this is the link so if you come over here to diviuniversity.com forward slash flexbox here are all the commands all you have to do is to click to copy and that's pretty much it you'll go in and then you would enter the code so let's recreate this layout so I can show you exactly what this looks like but before I do that let me just show you that doing it the second way or in fact this way that I've just done is not ideal and here's why if I were to come back here to my wireframe view notice that my layout here on the top only has two images and the text module in one row do you see that and then over here on the bottom we have this row with one image we have another row with an image and text this is extra code being added onto your page so I really want you to think about flexbox as you're designing your website now at first it's going to look a bit daunting but when you practice you're going to realize that this is the best way of Designing now before we get started before I can show you how I managed to do this if you purchase Divi using my affiliate link I will give you access to my uh DV jumps at course the course that will teach you how to design professional looking websites with Divi and also I have a free course linked to that is in the video description below let's get started and let's design this all right so what we're going to do now is delete what we have here on the top in fact let's delete both of them okay because we don't really need that all right so what we need is to create one column just like that and then in here we're going to add two images so I'm going to search for my image module like that and let's add our image so let's start with that one and I'm just going to duplicate this because we are going to need two images here right so on this one here we're just going to change the image into a different one so let's go with that one there upload image save finally we're going to need a text text module now notice that all I'm doing here is adding DV modules okay so let's go ahead text right I'm just going to do a few changes here I'm just going to have this as a heading so that this looks you know a bit nicer okay there we go so now that we have these three items in a single column this is where now we can go in and Target that particular column which is this one right here I'm going to go in here go to Advanced custom CSS now this is where all the magic is going to happen so the first thing I'm going to do is to copy this code here called display Flex now that's very important you're going to use that every single time you want to use flexbox so if I do that notice what happens everything now is in a line and this is where the flexibility of uh flexbox comes in so you're now deciding which image needs to be bigger or smaller based on percentages and I'll show you what I mean by that all right so now that these are all in the same line what we're going to need is a command called Flex wrap okay so what we're doing is we're wrapping everything within a specific confinement like that okay so let's go ahead and add the code there we go so now everything is pretty much back to how it was before but that's not the case because I can individually go into each and every item here and give it a specific size so I'm going to save this for now so let's start with the first one here so this one I want this to fit in the whole width so we're going to give this a width of 50 so I'm going to come over here to sizing so on the width here I'm going to say sorry 100 what am I talking about okay so let's give this a hundred percent and Save now the next one here let's give this 45 so I'm going to go in design sizing and then over here 45 and I'll tell you why I'm going to uh give this 45 all right so we are almost there so the text also needs to take up 45 so I'm Gonna Save that come over here to the text design sizing and again 45 percent there we go so everything is pretty much in place and this is without using any extra columns look at that pretty cool so let's go ahead and take a look at the code and again all we have is one row and these are three modules in just this one row let's go ahead and save this so you're probably thinking what does this look like in mobile view well let's take a look if I go into mobile view you can see now everything is pretty much laid out correctly but we have a really cool Advantage when we use flexbox so let's say I want the text on the bottom to be on the top in this view so what we do now is we go back like that we go into on column advanced custom CSS all right so here's what we do the code we're going to need here is uh column reverse so row reverse column reverse this one here I'm going to copy that and then I'm going to paste it look at that so now my text is right at the top and it's just using my column reverse it just reverses everything like that now I can see here I need some gaps you know between my content here well that's very easy to fix we can either do it here or we can go to this individual module and add the size there so what I normally do is I'll just come all the way down here column Gap copy and back over here we just paste it like that so this is going to give us spacing on everything so let's just go with 20. look at that so now everything is laid out correctly so this code here I'm just going to copy it and now let's go to our phone View and that looks fine anyway so there's no need for me to go in and paste it okay so that's pretty cool so back over here we just need to make sure that we remove the direction if we don't need it on this View and Save like that okay so back now on our view that's what this look like that's what it looks like so this is a very very easy way to start using flexbox so there you have it this is flexbox in Divi go ahead try it out I'll leave a link to uh all of that again in the video description below until next time thanks for watching I'll see you in the next one take care

Channel: SiteKrafter

Views: 5,876

Keywords: Augustine mak, divi 4.0 templates, Divi 4.0 template, Carflows divi, wordpress funnels, online courses, create online courses, online course business, best website them builder, how to build websites for beginners, wordpress websites, how to build wordpress websites, how to build websites from scratch, how to build wordpress websites from scratch, how to create a website from scratch, divi theme builder, how to create a wordpress website for beginners, how to make money online

Id: yMaENw6PenQ

Length: 8min 32sec (512 seconds)

Published: Wed Jul 12 2023