Everything You Need to Know About the Elementor Container
If you’ve recently updated your copy of the Elementor page builder, you may have noticed a few changes, among which is a new widget called Container. Perhaps you’ve only just mastered Elementor and you’re freaking out that this new feature is something that will make everything you know obsolete, but don’t worry. The new Elementor Container is just a new and improved way of laying out pages in WordPress, and an easier one, too. In this article, we’re going through everything you need to know to master this new feature.
Here’s what we’ll discuss:
Qode Themes: Top Picks
View Collection
The Elementor Container is a new functionality or element based on the concept of CSS Flexboxes. Flexbox is a CSS layout model for web pages that allows the elements within a box to be laid out automatically according to the viewport size and type. It’s an interface item in which the elements can align in relation to each other along the vertical and horizontal axes.
Elementor adopted this concept and developed an element called Container with the goal of making it more efficient for the users to design their pages.
The Container basically replaces sections and columns, as well as inner columns. One container is one section, and its inner layout replaces the columns you would add to an element. You get to pick the layout or create your own, thanks to the underlying flexbox concept.
The purpose of an Elementor Container is to hold other elements – these can be widgets (titles, images, paragraphs, sliders, whatever) or other containers.
The containers within containers are called “nested” or “child” containers and they basically work as Russian nesting dolls.
Elementor Container was initially been introduced as a test feature, and after quite positive feedback from the users, it has been introduced as a stable feature, along with Additional Custom Breakpoints, Optimized DOM Output, and several others.
If Elementor chose to introduce a new functionality and modify the old way of designing page layout, it obviously had a couple of very good reasons. The containers are meant to facilitate designing page elements and entire pages, especially for users who don’t want to dabble with CSS and want to handle everything from the front end in their page builder, and it offers a couple other advantages, too:
-
Containers reduce the number of inner sections and columns used. This means less code in the back end, which, in turn, means better site performance and faster page loading.
-
The purpose of flexbox containers is to make the sections responsive by aligning all the elements within them depending on the viewport. The elements shift and scale up and down dynamically, and for the user, this means less worrying about how the page will behave on different screen sizes. Sure, they’ll still have to check a few responsivity settings on the page level, but responsiveness is now more flexible and more efficient.
-
Inner sections can be clunky and adding a section within a section used to get a bit frustrating. With Elementor Container, you no longer need inner sections. You simply place a container within a container and customize each one the way you want. The flexbox functionality makes sure nested containers fit well and work well with each other. Not to mention that, before, we were limited to one inner section per section. Now, we can add as many nested containers as we want.
-
Containers also offer greater freedom and flexibility in designing sections. You can set the direction in which the elements will be arranged, their alignment, order, length, and placement.
-
After you’ve created a complex container with a number of inner containers within it, each containing its own widgets, you can easily save it and reuse it for other purposes, which is a massive time-saver.
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.
Wrapping It Up
The best way to master these new flexible options and new behavior is to create a sandbox or a test page and play around with the containers. Try nesting several of them and adjusting the values to see how the output will perform. You’ll soon realize that Elementor Container offers a whole new level of customizability and flexibility to the way you design your pages and with a little practice you’ll quickly master this great new Elementor feature.
