How to Use the Elementor Container?
The first thing to do is make sure your copy of Elementor is up to date. If you look for the functionality in your backend and you can’t find it, it’s probably because you haven’t updated Elementor or because the feature hasn’t rolled out to you just yet. However, as of late 2023, all Elementor users should be able to activate the Flexbox Container feature.
Note that the feature is available for the free and premium Elementor users alike.
After updating your copy of Elementor, head over to your Dashboard menu and, under Elementor, click on Settings.
You’ll notice a brand new tab there, called Features.
In there, you’ll find a selection of experiments and features, divided into Ongoing Experiments and Stable Features. You’ll find various experiments under different statuses (alpha, beta…) that you can toggle on and try out.
Scroll down to Stable Features and look for Flexbox Container. It will probably be activated by default, but make sure to check anyway.
Save your changes and go create a new page or post.
When you first start editing, you’ll notice a new element in your left-hand side menu, called Container. You don’t need to drag and drop it into your work canvas. Instead, you can simply click on the plus sign that will automatically add a new container to your page.
You will now be prompted to select the structure of your container – the direction in which the content will be arranged, as well as the columns (which are, in fact, other containers, not columns, but let’s not complicate things for now). You can also drag the container from the left and drop it where you want it.
Now this is the part where we can really appreciate the flexibility of these containers. The same interface, the same canvas basically, allows you to edit different parts of your layout in an efficient and flexible way. If you click on the six dots above the largest container, you get to edit that particular container (the parent container). You can specify the width and height, the direction of items, justify and align the items the way you want, and so on.
You can do the same with the child containers, too, by clicking on the rectangle in the upper left corner of each container, which will bring up the edit screen for that particular container.
Finally, you can add more nested containers within containers by clicking on the plus sign.
And, you can also move the edges of the containers left or right to adjust their arrangement within the main container in a what-you-see-is-what-you-get way, without having to adjust the values manually.
When you’ve set the layout, it’s time to add the widgets. We won’t get into details here since it’s the same process as adding widgets to columns. If you need a quick reminder on this, check out our Comprehensive Elementor tutorial for beginners.
After adding your widgets, you can go ahead and tweak the layout and the style of your container. To access the Edit Container panel, click on the six dots above the container. The process is the same as for what we previously called Edit Section.
Under Layout, you can set the content width, arrange the items, set their direction, align them and so on. And to edit each of the inner containers, simply click on the rectangle in their upper left corner. To edit the content itself, click on the pencil icon in the upper right corner.
At this point, it’s worth explaining what the Direction and Align Items options do.
Under Direction, you’ll notice you can set your items to behave as Row (horizontal left to right), Column (vertical up to down), Reversed Row (horizontal right to left) and Reversed Column (vertical down to up). When opting for either of the column settings, all the inner containers will behave as different columns.
Under Align Items, you can set your container element at the start point or in the center. It can also be set at the end, which means all the inner containers will be on the bottom. The stretch option allows the inner containers to take up any extra space. Note that these are only applicable if the direction you’ve set is Row.
If you choose Column for the direction, the start and center values will behave as a row, and with the end value, the containers will shift to the right. If you opt for scratch, the containers will take up any space on the left.
