Elementor Container Tutorial: A Step-by-Step Guide

elementor's new flexbox container are now becoming a popular alternative to standard intersections containers allow you to quickly create web page layouts much easier than typical intersections this enables you to control how your content is displayed and streamline your Web building workflow by using flexbox containers you can improve page speed through linear code gain finer control over responsiveness and easily create more complex layouts you can also achieve better design optimization and Define more complex layouts when you use flexbox containers this is because they aren't constrained by columns and rows which gives you more control over your layout if you guys are new to Elementor you guys have probably seen this message that's because they plan to phase out intersections and replace it with the flexbox container so what's the main difference between intersections versus flexbox containers number one responsiveness you can Define how you want your content to be displayed across specific devices screen sizes and which order they're displayed using containers enables you to avoid sacking hidden elements across platform form types and improve the overall user experience number two layout control you can achieve better design optimization and Define more complex layouts when you use containers this is because they aren't constrained by columns and rows which gives you better control over your layouts number three page speed you can increase your page loading speed by using containers for page design containers improve page speed by minimizing the number of dividers or devs used for each section intersections often contain more dividers unlike flexbox containers so let's go in detail and explain all the options with the flexbox containers alright so here is a page that I quickly created using Elementor now let me demonstrate the old version of Elementor versus the new version of Elementor using the new flexbox containers so here we have the sliding page you know it's just a it's a normal landing page right and I want to drag a button here but I want to add it to the right side so if I were to take this button right here and try to drop it you guys will see that I can only either add it below or above it making it a little limited on how I can add elements to my websites the new flexbox container changes that and gives you a little bit more flexibility all right now here's the new Elementor flexbox containers now let's say for instance I wanted to achieve that same result where I would just take a button right now you guys can see that if I were to take the butts in that it has the same thing right where I can only add it above or below the button however there is the container layout which allows me to drag this container and now I can add in the elements I want to add inside this container so I'll go ahead and just duplicate this really quick and I'll drag and drop these into the Container here now with the new Elementor flexbox container we can now control all the elements inside of the flexbox for example here we have the direction I want the direction to be horizontal and I want to put these in the center you can see that we can use these controls right here to position these evenly and you can also style these any which way you want you can also add gaps in between Elements which was not able to do before so as you can tell you do have a little bit more control using the new Elementor flexbox containers let me give you another example so here's another example here we have these three columns right now let's say for instance I wanted to align these items inside of this column with the old version of Elementor it was a little tricky for example I'll try to click on the edit column section and here we have some options where I want to make it middle right but if I want to put it in the center you guys will see that's where the problem starts I would have to go to every element and align these manually but there's a lot of responsive problems when doing that the new flexbox container fixes that here is a website with the new flexbox container and if I were to click on the container here you guys can see I have a lot more control over what goes on with the elements inside the container so I can Center this you know I can uh you know they have a bunch of little design options here but if I want to put it in the center like that you can see that I can do that and then I can use these and combine these so as you guys can tell you know we do have a lot more options and control over what goes on inside the containers let me give you guys one more example okay so here's the last example and then we'll move on with the tutorial so let's say for instance I wanted to take this element and I want to put it over here before I'd have to take this and then drag it over here and then with this element I would have to take it and drag it over there now I know that looks easy right but when you're building your website sometimes you might take an element and then drag it there and like oh you know what happened and then you try to drag it back like that and then sometimes you know the website would easily get broken right now I know that's a little bit of an exaggeration you don't have to do this anymore with the flexbox you can control all the elements inside the columns so here's the flex box and let's say for instance I wanted to actually rearrange these right so here we have the direction so instead of horizontal I'll say you know let me see what this looks like reversed and then I can also add in you know space here and then I can control all of the elements right here using the justify content and align items I know that doesn't look like much but when you're building your website the small things are kind of the big things so now that you guys have a good understanding of the difference between the old version of Elementor versus the new flexbox container let's go back to the tutorial and design the website alright so in this part of the video I'm going to give you guys more practice using the flexbox container now in this part I'm going to give you guys a few different examples and just show you how to create specific sections using the new Elementor flexbox container so here we have two different columns right and we have a container within a container so let me show you all how to recreate this so over here let's go ahead and grab a two column row now for the first container we're going to throw in some heading text and then we're also going to throw in a text editor however I want to add in another container here so I'm going to drag and drop this container and we're going to put in two different buttons so button one and I'll just duplicate that for button two but I'm going to go ahead and change the color for this because I want to show you all the difference right I want you guys to get confused on which buttons which there we go and then on the right side we're going to throw out an image okay let's grab an image here and let's put it with this this gentleman here so we have the elements in place now we need to use the flex box to dictate and control where these elements go so for example here I'm going to click on this first one and I want to make sure that this is centered okay and also I want to make sure that this is Center in the middle right now notice how only this text goes but these ones don't these don't go because they're already controlled by another flexbox container and the text editor actually acts independently it's one of the only few elements that act independently because if you click on the elements and go to style it actually has the own alignment right here so uh yeah it does ACT Independence now we're going to click on the next one here and I just want to change the direction and you can also change the position right between Center to the end to space around and all these other options right here so I'll just leave it at Center and then of course we throw in a little bit of space here and there you go so now you'll see that we have completely recreated this section using the flexbox containers it's a pretty simple example so let's go to the next one so next I'll be showing you how to create a grid layout for your images notice here how we have these images and these images are spread all the way to the end of the page right here and this was all done using flexbox so let me show you guys how I quickly did this so let's go ahead and make a new section and we're just going to create one section here one directional row and we're just going to drag in the image right here so image and then we'll change the image to this one right here and we're going to add in one more image and then we'll use this guy right here now there is one caveat with using this strategy the caveat is these images must be the same size if they are a little different what's going to happen here is the images will actually look a little distorted and give you a more masonry look for example let me just go ahead and upload one that's not the same size just to show you guys notice here how this image is a little bit larger than the other ones so if you want like a really nice clear layout they will have to be the same size so going back to our original example going to now duplicate this and we're also going to duplicate this so now you guys can see that we have these four Images but there is still work to do so I'll click on edit container here now for the gap between elements I want to select this as zero and just remember you guys can also reverse this layout as well but let's change it back to horizontal now you can see here how there's a lot of space here and what I want to do is I want to reduce the space now you guys might notice that there is space here on the left and the right side so all we have to do here is change this to full width and that's it so now you guys will see that it stretches all the way across to the website and we have just a little bit of space here on the bottom and the top right here and also the side so all you got to do is go to the advanced just put zero and there you go so now you'll see that there's no space and there's also no space on the left side or on the right side or the top or the bottom that's just a cool trick you guys can use if you want to like Implement images that spread across your website all right so next I'll show you guys how to recreate this specific section here on the left side we have an image and then we have these two blurbs and these two blurbs are contained within this container so I'll walk you guys through on how I did this so over here let's go ahead and go to a two column row and we're first going to grab an image all right and then I'll change the image here to this guy here then I'll grab an icon box so icon box drag that in there I'll quickly design this so now that I finished designing this element I'm quickly just going to go ahead and duplicate it once that's done I'm going to click on the flex box here and I'm going to tell them I want this in a horizontal manner right next I want to go to the Align items and I want to put this in the center and just remember if you guys want to change the position of this like for example maybe you want to a b split tests and you want to put this image on the right side you can do that actually using this container here by just changing it to reversed and there you go so that's how you guys can create that section using the flexbox containers let's do another example all right so next let me show you guys how to create a landing page with the flexbox containers this is just a basic ordinary you know call to action so we have the title we have some description and then we just have a general button so let me show you all how to recreate this using the flexbox containers so let's go ahead and go to a new section here all right but this time we're going to select this one right here now we're just going to throw all these elements together we're just gonna throw them on there we're gonna throw in a heading then we're going to put in some text editor then we're just going to throw in a button there we go there it goes and with the power of video editing you guys can see I have now changed this to fit this scheme right here so I just changed the font and the colors I didn't really change anything of the position I have now changed the fonts and everything to match these other color schemes up here I just copied and paste the style that's all I did now let's make some more space on this container because you can see how this is too scrunched so first let's go ahead and go to this container right and we're going to change the minimum height now sometimes there's a bug with Elementor if you like type something in and you leave it sometimes you can tell that nothing happens right I don't know why this is the case you can see that uh I set it for 80. you guys will have to actually manually drag this in here and that's where it actually starts to work guys so uh yeah you know I'm just the middle guy so uh I'll report that bug to Elementor but um that's how you can adjust the minimum Heights the next thing that I want to do is you can see here that the direction is vertical right and I want to keep it vertical because if I change this it's going to you know look all distorted and stuff like that so here we go we have sets of vertical now I also want to Center this content and next we have align items and I want to align this in the center and there you go so now you'll see that this is perfectly aligned in the center of our landing page now I'm going to quickly add a little uh add a background here because this is really Bland really boring it's going out a quick little background image here okay and there is our background now there's a few things I want to sort of talk about just in case you want to change stuff right let's say for example you guys wanted to add another button now if you add another button here you're going to notice that it only goes below it right and there's no way on how you can align this so if you want to add another button all you got to do here is just add another container and within this container you're just going to put these buttons in the container here right there you go and then from here you're going to control these two buttons so just like we control this text you'll now control these two buttons so it's like you know what I want it horizontal and I also want it oops in the center right so that's how you can create uh that's now because many websites do use two buttons now also you guys might notice that this is a little bit too long right on the first example you'll see how it's a little bit tighter right so if it spreads across too much what we can do is we can change the width of this entire section so using these six dots up here we'll go to the layout now I'm going to say you know what I want to reduce the width here and you can keep reducing it until you sort of get an effect and style that you want right so I'll go ahead and just uh put it put it right to I don't know what's good there 800 right 800 is good and then if this looks a little weird you guys can change the alignments right so remember earlier I mentioned that sometimes you guys will have to manually change the alignment for the text we'll change that and we'll also go to the style and change that right there so that's how you can recreate a landing page so if you guys are building like a landing page or something and you want like just a traditional you know call to action header text that's how you guys would do it using the flexbox container so I hope that helped let's go on and go to the next example all right in this next example I'll be showing you guys how to use the Align contents now earlier in this video you've noticed that we've pretty much used the direction to justify content align items and then also like gap between elements but we haven't really been using the Align content there is some uses for this and I'll give you guys an example right here so you can see here how we can actually control these elements within this box so you'll see that there's a few different options right but most of you who are using this when you guys use this you probably saw that nothing was happening right so let me walk you through on how to use the wrap with the Align content all right so let's walk you guys through this so first I'll click on the plus and we're going to click the two column row and then we're going to start throwing in some elements but before I do that I want to make sure that this is a vertical just so they stack on top of each other all right so heading and then we'll throw in the text editor and then we're going to throw in the button below that next I want to add in some space so you guys notice that this is too tight right here right so I can't really even show you guys what we're going to be doing because we need to make this a little bit larger so for the edit container I want to make this a little bit larger right we'll just do like we'll do 500 pixels I think that's good now we're going to adjust the direction and then also the Align items so first I'm going to make this horizontal right so now we have these uh three elements they're they're kind of scrunched up looking weird and now we're going to align the items in the center and then I'm going to wrap it and when I wrap it it's now going to stack these elements in a specific style so now we have the Align content where we can go ahead and Center this we can use the flex starts P Flex end and these other various options so when I first use flexbox I'll be very honest I was pretty much dumbfounded on the Align content and it wasn't until I had to go through documentation and really learn how to use the Align content and then I'm going to wrap it and when I wrap it it's now going to stack these elements in a specific style so now we have the Align content where we can go ahead and Center this we can use the flex starts P Flex end and these other various options so when I first use flexbox I'll be very honest I was pretty much dumbfounded on the Align content and it wasn't until I had to go through documentation and really learn how to use the Align content thank you guys so much for watching if you guys do have any questions about the Elementor flexbox let me know in the comments below until then I'll see you guys in the next video take care

Channel: Darrel Wilson

Views: 17,718

Keywords: elementor flexbox container, elementor container tutorial, elementor container

Id: lelqx2No7xQ

Length: 17min 2sec (1022 seconds)

Published: Tue May 23 2023