How To Use The NEW Elementor Container | Flexbox CSS

i released a video earlier this week about the 3.6 beta version of elementor and part of that was the new container element now a lot of people ask in the comment section if i create a video to show you how to get started using the container and that's exactly what this video is all about so the container element what exactly is it well previously we've been creating any kind of design with elementor we've been using sections and intersections and columns and rows all those kinds of things and while it's been a relatively easy way of working it does have one massive downside and that is the sheer amount of code that's generated just to put something as simple as a title inside a section onto your page well this is where the new container element which is using the flexbox model comes in it reduces the amount of code behind it but also has a massive knock-on effect that it gives us a much more flexible system for creating our designs now in this video today i'm going to give you a starting guide this is not going to be something that's going to go into huge amounts of detail to create really complex designs i'm going to take a practical example and show you how the majority of the tools that you're going to be using on a daily basis when you start working with the container element how they all work now before you start getting worried and think well what happens when the container element comes in or all my design is going to be out the window and i have to rebuild everything no you're not the simple fact is that the existing way of working with elemental which we'll call the legacy way will stay you can carry on working that way but you won't see those options available when you're creating new designs and also if you want to convert over from the existing way to the new container once this is released you'll have a convert option which allows you to convert a page or just different sections on a page i've covered this in its own dedicated video and i'll link that down in the description below okay so with all of that out of the way let's take a look at how we can get started using the container so what i'm going to do is we're going to go ahead and make sure that this is enabled now i've got the elementor dev version but you can have the elementor beta installed it'll do pretty much the same thing the main caveat here is do not use this feature on a live production site if you want to test this out on a demonstration server a test website something you don't mind messing up great live production sites do not use it that caveat the way let's go ahead into the elemental settings section and inside the settings we're going to make sure we go to the experiments tab and inside there we're going to scroll through until we find the option for container and make sure that's set to active for when you've done that and you hit the save option at the bottom you're good to go so now with that done let's go ahead and create a new page let's just call this container and let's just save our draft we'll open this at no with elementor to start working okay so this is the design let's get rid of that title at the top and let's actually get rid of all the elements on the page all those distractions so we'll set this to be the element of the canvas so we end up with just a blank document to work with okay i'm going to keep the navigate dropper on the right hand side because i want to show you various different things inside there which just makes it easier to see what i'm talking about now you take a look you can see we've got the container element now over on the left hand side with our widgets we've also lost the option to add a new section and also inner sections the container overrides all of that now let's go ahead and take a look if we open up one of the pre-designed templates we'll start with a block now at the time we're recording these are still using that original way of working create empty sizes not using the container so this is a good way for me to demonstrate the differences let's take this example let's insert this into our design and you can see now if we take a look at this on the right hand side of the navigator we've got the traditional section open that up and inside there we've now got multiple columns and inside each of those columns we've got various different widgets text images those kinds of things nothing you haven't already done and looking at a layout like this it's not overly complex but it does have a few challenges that require a little bit of a hacky way around to get it to lay out the way that you want using the flex model we can do this kind of thing much easier so we're going to do is we're going to remove this from here we'll delete it and we're going to create something very similar this will give me a good way of demonstrating how all these different features of the container works now we can go ahead and drag and drop a container element into our design and you can see if we do that we now get the container over the navigator on the right hand side and if you open that up it's completely empty there's nothing inside there right now let's get rid of that for now we can do to make things even easier is we can click to add a new container in this has replaced that original way of working we select that and you can see now we get what looks a very similar kind of layer set of tools to what we had with the sections but we have some more complex designs so what we've got the single section and the single dual columns and triple columns and those kinds of things we also have these more intricate designs which we can use as a starting point for now we're going to leave those as they are but what i'm going to do is i'm going to select this three column layout we're going to select that and now you take a look on the right hand side you can see we've still got the container but if we open that up we now have three containers nested inside that parent container to make life easier let's rename the parent container to exactly that parent that's going to mean that you can see exactly what's going in just a little bit easier okay so with the parent set up and everything laid out the way that we want let's take a look at what's changed on the left hand side now if you saw the earlier videos on where i covered this probably about three months ago things have changed since then so if you looked at that video and you're looking at this and you're thinking this isn't quite the same paul let me show you what's changed we now have the container element over the left-hand side we've also got this new tab called items so the container is very similar to what you have with the sections you can set things up to be boxed or full width you can adjust the width the minimum height set the overflow the html tag that's going to be used all those kinds of things the items is where the magic kind of happens now though if we open this up you can see we now have new options available inside you over what we would have had with the sections we've got the direction the align items the justify content and the elements gap i'm going to take a look at those now in order before we do though let's go back to our container and let's just make this a little bit higher and you'll see why in a moment we need to be able to have some horizontal and vertical space to be able to see what's going on so i'm going to set this to something like 900 pixels high and you'll notice that what happens is each of our containers now occupies the full height of that entire parent container and this is quite useful to see because that's the entire amount of space that we've got to play with inside there now when we've got any of these available to us we can select them and now we can edit just that container that sits inside the parent a nested container this is great because now we can do is we can adjust the width of this so you can see this is set to 33 and a third because these are equal columns but if we wanted to we can easily come in and start adjusting that and you'll see the other two will compensate for it so we can set that to be 60 for example so now the first column is taking up a 60 width of the overall 100 available meaning that the other two columns have 20 each but if you wanted to you could easily select any of those columns and adjust the figures accordingly let's just reset that to what it was so now we've got equal columns to work with so we can do now let's go ahead and drop something into these so we can see what's going to happen when we change things up we'll do is we're going to keep it really simple we're going to drop in an image we'll just select this and we'll just set an image to work with so i'm going to just grab this image i'll duplicate this two times i will position those in the respective columns and just quickly change those images for something else so we have now is we've got a parent container and inside there we've got three individual nested containers and inside each one of those containers we have an image widget so we've got a good starting point so let's go ahead and make sure that our parent container is selected with that selected we're going to go and take a look at the items tab because this is now where we can start to see how things work first of all let's take a look at the direction you can see at the moment this is set to be a row and what a row does is it basically aligns everything horizontally so now we've got these three columns and the content is lined up side by side if we switch this over to a column it'll stack them vertically so now they stack on top of each other which is more what you would have seen in the original way of working where everything whenever you added a new widget it would always go on top so this immediately makes the whole process of doing things like laying things out just much easier we've also got the option for reversed row and reverse column so if we go back to row you can see that the umbrella picture is the first one and the guy stood by the bridge or whatever that kind of building thing is is the last one but if we choose reverse row it flips those around now to be the opposite way around same thing goes we choose the column you can see the umbrella is the first one we choose to reverse that it now flips those the opposite way now your mileage may vary as to whether you want to use these but the benefit of this comes in when you start looking at the fact you can set these up to be different based upon the different devices so set this back to your row let's go into desktop and you'll see that's now set to be a row if we change this over and go to tablet view and we set this to be row reversed we've reversed it so now if we go back into desktop it's the original order if we switch things over into tablet view it's the reversed order so you can get quite creative with your layouts and your designs inside you using these kinds of tools so there's a lot of use cases for why this could be beneficial let's uncheck that and then go back to the default and switch things back into our desktop view okay so now we've seen how the row works and how we can set reverse rows and reverse columns the align items does exactly the same suggests it allows us to choose how we align them inside this particular parent container so we can see at the moment everything is aligned at the top which is called flex start now you'll notice that there's nothing selected in these aligned items but that doesn't mean anything the flex start is the first option is the default option so the first icon you'll see in these whether it's the direction the align items or the justify where there's nothing selected the first item is the default item just to bear that in mind so if we choose flex start nothing will happen because it's already using that default value which is flex center it now positions them in the center of the parent container which is flex end it sets to the bottom and if we do the stretch nothing will really happen because we don't have any space to allow these to stretch so that's not really going to have much of a change on you and it kind of looks in this example exactly the same with the flex start so now if we switch this over to the column you'll see everything now reverses so we no longer have these being going across the horizontal line we now have them going vertically so at the moment you can see that our flex start means that it butts up to the left hand side if we set this to be flex center it's now the center if we set this to be flex end you can see it's the end and the same thing goes the flex stretch isn't going to do anything because we have no extra space so let's take a look at how the justify content works next what we're going to do first of all is to give us a little bit of breathing space here so what i'm going to do is i'm going to make each of these images just a little bit smaller and you'll see why in a moment this isn't important this just means for the amount of screen space that i've got it just makes my life a little easier so we'll set these to be 300 pixels and we do exactly the same so it's going to copy that from there and we'll paste that style and we'll paste that style on there let's go back to our parent container and let's just set this to be a column okay so we still don't have a huge room at the bottom so what i'm going to do is i'm going to come to the container and i'm going to make the minimum height even higher just so we can see that we've got some space and breathing room so you can see this blue line is the bottom of our container so with that being chosen let's go back to our items and this time we can choose the options for our justify content so if we choose this to be justified flex start it sits at the top so you won't see any difference if we say center it now centers this vertically so you can see we've got space at the bottom space at the top flex end pushes everything to the bottom but what's more important are these three final options space between will put equal space between the items but nothing at the top and the bottom of the container just the space around we'll put equal space top and bottom so it gives you breathing room all the way around and then you've got space evenly which as his name would suggest it will give you even spacing between each of the different elements whether they're widgets or internal containers so you can see that we can set these up we can combine them together and we can align everything the way that we want if we switch this over to a row you can see now the options are slightly different everything kind of flips and reverses so i hope that makes sense to what's going on next up we've got the elements gap now at the moment you can see there's zero gap but because we've got these laid out we've got explicit sizes on our images it's already a natural gap based upon things but let's just make sure that you can see what i'm talking about let's set the width on this to be a little smaller so everything now butts up a little bit closer to each other now we can do is we can come in here and we can use this to put spacing around any of the widgets any of the elements inside our design whether they inserted images and widgets and so on or if they're containers that are nested inside the parent container so hope that makes a little bit of sense so you've got lots of options now to how you lay things out let's set that back to its default values and let's go back to our container let's set this down to 100 so we've got some breathing space around everything okay so now that we've seen how to do this you've also got the options then for your overflow and your html tag so when you create any of your containers you can select them and you can set the relevant html tag and obviously if you're setting up things like using this to create your headers and footers set your html tag to be the relevant header footer main and so on now one feature inside you is actually quite useful if we select for example this image and we'll select its container we select it we can go in and we can set this to be an a tag so now what that means is that entire area becomes clickable so when you've had the options before to create clickable sections as opposed to a clickable uh widget this will allow you to do it very easily so all you need to do there is simply drop in your link if you want to set any link options like opening a new window for example or no follow you can do that inside here as well let's just quickly publish that and i can demonstrate this to show you what i'm talking about just click to preview and now you can see this entire container is clickable whereas the other ones are not so you can create designs you might have an entire advert or entire complex layout that you want the entire thing to be clickable where you could just set the container for that to be clickable and everything inside it is a clickable item so pretty cool and really useful in a lot of different scenarios let's just remove that from there and just set that back to be default for now okay so we've seen how to get started with some of the basics let's take this another step further by taking a look at how we start to recreate that layout so the first thing i'm going to do is just go ahead set the background color on this so we're going to come into our styles set the background to be black and we're going to make sure that everything else is reset back to its original value so there we are now we've reset everything back to its starting point we're ready to start taking a look at those options how to build something like this out so we're going to do is we're going to make sure that we can see how we can work with the different containers that are nested inside a container because each one of these has its own set of options and then inside there every one of the widgets have their own set of options that can all interact with the flexbox so let's first of all take a look at this nested container and let me demonstrate what i'm talking about let's select it let's go to the items and all those options are available so currently this is being treated like a column so if we go ahead and we add something like a heading in you can see that positions it underneath or above depending upon where we want to stack this and it's treated like a column if we go back and select that container one more time go to our items and choose to set it as a row you can see now it puts them side by side so it already gives us more creative flexibility we can reverse these we have a reverse row so it'll do exactly his name suggest but you'll notice that it doesn't have any impact upon the parent container or any of the other nested containers inside there if you want to reverse the column we can do that as well you can do all of this as well based upon the type of device you're viewing you know so fully responsive designs so if you find you have layouts that you need to switch things around you can use these reverse columns and reverse rows to get created to make sure everything looks good on all kinds of devices again just another one of those ways of making life just a little easier let's set this back to be a column now we've also got the options then to align things now obviously the alignment's not going to make any difference on this because this is taking up the full width of this particular container however the justified content options will so for example if we say space evenly you can see now we get even space in between these actual widgets that are displayed inside this section we come over to a different section for example this last one and we can choose a different set of options so we could say we wanted this to be aligned to the bottom and now you can see we can start to create that same kind of look and feel without messing around too much it's all much more visual in how we can set things up and you can still use margins and padding and spacing and all those kinds of things if you want to all those options are still available to you okay now before i go any further with this and we start to actually refine the design and put all the elements together there's one more thing i want to show you let's just reset this first column to make sure that everything is set up i keep referring to as a column this container i should be saying just for clarity okay so now we've got those let's set this back to be a row so we can put things side by side we're going to do now is we're going to select this little text widget we'll select that i'm going to advanced bear in mind we don't have the container selected we just have the widget you'll see we now have some extra options underneath the advanced section for alignment order size and so on so the align self will affect the alignment inside the container of only that specific widget so for example if i wanted the image to stay at the top but i wanted this text inside that container to sit at the bottom i can choose flex end and now that sits at the bottom so these are the kinds of things that would have been more complicated to do previously with css and all those kind of things the flexbox model with the container makes it so much easier to work with let's set that back to what it was you've also then got options for the order of things so you can change the order of various different things and this can work on an item you know a widget or it can work on a container so for example if we choose this one and we say we want to set this order to be first you can see that now positions it first inside there if you want to be lost you can see or end it'll go the last but you can also if you've got multiple different items inside you you can go ahead and insert your own custom values so you could have three images and you could change the order of those very easily and again this is all controllable across all the different responsive designs so you can get as creative as you want with different kinds of layouts different kinds of positioning all those kinds of things pretty cool you can also go ahead and create custom order so if you use the last option customize it to your heart's content to set up exactly as you want you've also then got options for sizing now this isn't a particularly great example for how you can use this but you can use these options to make things get bigger or smaller by using the grow or the shrink or you can create your own custom flex grow or flex shrink options again globally or based upon the different responsive designs let me just give you a quick example of how that flex grow kind of works which here's the image because it's a much more visual example select that and again you can see we've got the same advanced options inside here so everywhere has these advanced options to work with the flexbox model so it's really cool so we can do is we can come into our size and we can say we want to make this bigger flex grow and boom you can see it now becomes bigger flex shrink puts it back or like i said you can create your own custom flex grow this is great if you want to create layouts for things like uh pricing matrixes or for example you you've got sort of like multiple columns and you wanted one to be bigger without a mess about with going in and setting up physical sizes in percentages for the different containers you've got lots of options and like i say the flex model just makes that whole process a lot easier let's remove that so you've got nothing going on there i think set back to what it was and we'll also go ahead and set this back to be a column and there we go we're almost there let's go ahead and adjust a few elements inside you let's grab this heading position that above our image and what we're going to do is just make sure we've got this selected go to our items let's go ahead and change this to be a different color i set this to be white we'll adjust the size on this a little bit so it occupies a little bit more space there we go and we're going to do is we're going to come in we're just going to grab a text editor we'll drop that underneath there and we'll do exactly the same thing over on this side okay so we've now got the basic parts of the design layer that we took a look at earlier so now we can do is we can start to create things and lay things out so we can select this entire container and we can make changes that or we can just grab any of the elements inside it and make changes so for example with this image we're going to select this we're going to add a little bit of padding around it we're also going to come into the transform options choose hover and we're going to choose the option for scale and we're going to set this to just scale up to about one percent bigger or one one tenth bigger you see now when we mouse over we get the effect that's in the actual sample that we're working with so now what i can do is i can simply copy that from there and we can just paste that same effect to each of these others so paste our styles now we're going to do is going to select this first one and we're going to just add in a little bit of spacing around this so again we'll do 25 on the top 25 right 25 left there we go and we'll do exactly the same on this one on the right hand side as well so here's the basics of our design put together now we can go ahead select this in in a container we'll select that coming to our item section we'll set this to be aligned to the center we leave this one at the top and we're going to do exactly the same for this one we're going to select this entire container come into our items and we're going to set this to be aligned to the bottom as well and you can see this kind of gives us that similar effect and if you want to you want to adjust anything on there you can do just that but now what we've created using the flexbox model in a much quicker fashion is the same kind of layer with no intersections less code less bloat all those kinds of things have kind of been stripped out to make life a lot easier we've got full control over all the different kind of responsive modes that we want but that's just a basic overview of how to get started using the new container element in the forthcoming release of elementor hopefully this will give you some confidence to get stuck in and start experimenting yourself but please just remember that if you do you only do this on a test site not on a live production site any comments questions or feedback leave those in the comment section below all applicable links are in the description my name is paul c this is wp test until next time take [Music] you

Channel: WPTuts

Views: 63,409

Keywords: WPTuts, elementor container, elementor container element, elementor container tutorial, elementor flex container, elementor container widget, elementor flexbox container

Id: zCPnxa76Zmg

Length: 23min 56sec (1436 seconds)

Published: Fri Mar 11 2022