How The Elementor Flexbox Container Works - A Complete Guide

if you decide to use the flexbox container to design your website you're going to be assured of websites that load faster design complex layouts and also better responsive controls so in this video I'm going to show you how to use the new flexbox container in Elementor so here's the old way you would design websites so if you click on this plus button you get the structure here these are all your columns so you would say okay you know what let's go for a single column here and then if you click here you can also add in inner sections so this is how you would structure all your content so let's start adding a few items in here so let's say you add a bit of text in here and then over to the right you add an image so you can just drag and drop it like that and then over here in this big section here we can go in and perhaps increase the size so let's go to fit to screen the process of adding all our elements is quite straightforward but it has a lot of limitations if I wanted to add another button here next to this button that's a bit tricky because uh let's first of all delete this one here so I can show you what I mean so now that this one is gone your thoughts will be you know what why don't we drag this intersection here and add it here but we can't add it it only goes below this inner section here so we can't really add intersections in this design here and this is my first little limitation but of course there are other limitations that you come through as you're designing with sections and columns it's time now to try the new flexbox container in Elementor so now when we come to flexbox here's the thing so it's similar because if I drag and drop here or if I just click on this plus button we notice that this looks very familiar but the Telltale sign that this is different is these arrows here because when you design using flexbox it's all about alignment and Direction so those two things you need to bear in mind as you're designing this alignment and Direction so I'm going to do a similar design to what we've just done so I'm going to drag another container and drop it in here so now we have a container inside a container so if I right click here I can duplicate it so now I have two containers so what I can do now is I can start adding all my content so let's add uh text we can add our description text please note the drag and drop system is still the same and remember we also had an image to the right so let's add our image it's time to see how the flexbox directions affects our design so at the moment everything is going down this is how we chose that and you can see that by taking a look here so now we want to change the direction so I'm going to say that and now the direction has changed so everything is going that way but we're not done yet because we need to go in and add our buttons so if I come back and say add my button now if I did that my button is going to go in there and let's say I add my other button like that if I try to align these this wouldn't really work because I need my own container in order for me to control the direction so this is where I need to go in and delete that and show you how I'll be able to achieve that let's delete that so now I'm going to drag a container and drop it in here now this is something that we couldn't do in the old way of Designing our site so this time I can now go to my button and drop it in there so I'm going to drag drop it in here I can either duplicate this like that so now that I have my own container which I can see by hovering over here if I click that I have to look for my direction and here it is Boom now my buttons are next to each other now while I have this selected I also have other controls so as you choose your direction here it comes with your justify content so let's say I want my buttons to have space in between I'll just do that and now they are now separate from each other I can choose this now this will have some space around them and I can also choose that so down there a bit closer together or you can just have them centered just like that and now they're closer together now do you see how much I have more control in designing this as compared to the other way or the old way of Designing our site so this is fantastic so I want to leave this as it is but we also have one thing that we need to do here and that is we want this stuff here all centered right so to achieve that you have to go now to the bigger container because this is what is this is what has the inner stuff inside so the bigger container has the rules to what happens inside so if I click here now I can now say Okay I want everything centered so this is my online item so if I click on that now it's centered so if you need to adjust the height of this you can just come over here and this is where you can say minimum height you can set it as VH and then you can just drag your slider and as you're dragging your slider here you notice that everything is all centered now I know you're excited that we're able to build this layout without using columns this is the design we're trying to achieve in the next example so I'm going to start off by clicking here on this plus button and we're going to go with the first option so notice that our direction is facing down next on add my elements so in this example I'm going to add some images so I'm going to go ahead and do that click over here choose my image from the library and click on insert so I know I'm going to have two more images I'm going to right click duplicate right click duplicate now I can just go in here and change the image so this one here is going to be that insert media I'm going to scroll down and then finally I'm going to change this image here two maybe this one here okay great I'm gonna insert now that I have my three images you notice that there are one on top of the other but that's not the layout we need so how do we rearrange that so remember in flexbox we use Direction and Alignment so I'm going to click here on the main container so you need to click here on the main container now notice that the direction here is facing down so what we need is to go to the right so if I do that notice that all my images now are in a straight line so that's how easy it is now if you want to reverse this and maybe you want the bag over here to the right all you have to do is to click there and now the bag is over here to the right so to finalize this design let's give this a bit of breathing space so I'm going to click here on the container and then I'm going to now go to my minimum height set it to VH and I'm going to set this to 80 of the viewport next I need to Center all this so I'm going to now come over here to Center and now everything is all centered if I need to add a background color I can just come again over here to my section go to style and then click over here on classic and this is how I can add my color so I'm just going to go with something quite dark another way to understand the flexbox container is to imagine that you have a box in this box you can put in anything you want and you can also arrange things the way you want so in this case you can now decide whether you want to have one on top of the other or you want to have things next to each other you also have the ability to align things vertically or horizontally now if we take this a step further you can have boxes within boxes and this box within boxes also have the same rules with the concept of boxes within boxes let's try another example so here's what we're going to design so I'm going to drag and drop my first container here and then I'm going to start adding my content so this is going to be a heading next I'm going to add my description text just below my heading so the next step now is to add another container within the first container so I'm going to drag and drop it here so if you take a look over here we have our first container here I mean you can call this a pattern container and this is a child so the child container here is going to have its own elements in there so let's go ahead and do that so I'm going to come over here and the first thing I'm going to add is an image so let's go ahead and add our image all these containers have their own way of controlling the information in it so if I come over here to my first container and notice that I'm here on my first one I can align things centered like that now I want to come over here to this second container and again if I click here this has its own rules so what I'm going to do here is I'm going to add another container in here just to make it super complicated and very fun to work with so again I'm going to click here drag and drop my container like that so notice that we have a container an image and a container in this second one here I know it's going to get confusing but check this out what I can do now is I'm going to go into this container here which has the bag and the other container so take a look here so with that selected now I want my content to be horizontal so if I do that now I have my bag on the left and then over here on the right I have another container where I can add my content in there so let's start doing that so over here let's add an icon box so I'm going to search for it and then just drag and drop it now I can go in and change my icon in there so let's say that one needs to be I'm just going to choose random icons here it doesn't really matter what icon I'm using this is just for example purposes okay so now that I have this I can have a few of these so let's get rid of our Navigator here we don't really need that so I'm going to duplicate this a few times so I'm going to right click duplicate this right click duplicate it okay so now I have three but I don't want them one on top of the other now notice that this container here has its own rules so if I come in here I can decide okay I want to have this horizontal so now my content in here is now horizontal so now I can go in and customize this so let's say I just want to have two of these let's delete one of these and then change the icon I'm going to come over here and the icon I'm going to go with is this one okay so now we have two icons and this is now our content so I was able to add my heading here which I'm going to go in and change and hit update and I also want to give this a bit of a breeding space so I'm going to come over here and increase my minimum height so let's go with 80. but notice that everything is stuck at the top here I want everything centered in here so to achieve that I'm going to come over here to justify content and then choose Center so now everything is all centered now I can even increase this to about a hundred percent if I need more breathing space in fact you know what let's go with 94. after spending a bit of time playing around with the flexbox container I can tell you that I was really surprised that you can build complex layouts so this new way of designing websites is going to make your websites faster and you're also going to achieve more complex layouts all right let me know what you think in the comments box below until next time thanks for watching and I'll see you in the next one take care

Channel: SiteKrafter

Views: 23,355

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: GNkUEK9Y3yk

Length: 11min 17sec (677 seconds)

Published: Sat Dec 17 2022