We often talk about our love for Elementor. Well, containers are just one more reason. Elementor containers are a better way to organize page layouts than sections and columns. Containers were released in Elementor 3.6. As of Elementor 3.10, containers are still officially in Beta as stable experiments. Elementor is beginning to roll out features built on containers, like container-based website assets, including website kits, templates, and blocks, so we don’t think containers are going anywhere. Due to how embedded into Elementor containers are now, we believe you can safely start using containers on new website projects. There might be some minor updates to how containers work, but containers themselves are not going anywhere!
Why care about containers?
Elementor has traditionally used a rows (sections) and columns approach to page layout. While using essentially a grid approach is conceptually straightforward, it limits the flexibility of how items can be arranged or rearranged. Additionally, a lot of nested HTML is required to create sections and columns. In general, the more HTML elements are on a page, the poorer the performance of that page and the longer the page takes to be downloaded from the server.
Using containers is more straightforward than sections and columns, containers use less markup on the front end, and containers use CSS flexbox, a web standard. Using an existing web standard for page layout instead of Elementor rolling their own solution with sections and columns makes containers a logical choice for page layout in Elementor.
The flexibility and modularity containers bring to the table are difficult to explain without trying them yourself. Containers allow way more design choices and improve the HTML layout of all pages.
One of the interesting things about containers is that you can use the same HTML markup to arrange items in multiple ways. This allows for the creation of reusable pieces. For example, items in a container can be arranged either horizontally or vertically by simply updating a CSS rule while keeping the HTML markup unchanged.
In Elementor, containers, whether simple or with other containers nested inside, can be saved as templates.
How do Elementor containers work?
Elementor containers are built on the CSS Flexbox, a standards-compliant, widely supported mechanism for arranging elements on an HTML page.
Elementor containers have essentially two separate levels of control. Using CSS rules, you can control the layout of the items inside a container as a single group, or you can pick an individual item in a container and modify its alignment.
How can I try out containers?
Before you give containers a go on your website, you can try out Elementor’s container playground. The playground is an Elementor instance with containers turned on that is spun just for you to play with. The playground has a series of interactive lessons to work through that’ll help you understand what is possible to do with containers. Once you’re ready to try containers on your own site, simply toggle on the experiment at Elementor > Settings > Experiments > Flexbox Container.
Sections vs Containers: An Example
Let’s do something that often happens during the design process. We’ll iterate on a design. We’ll see how easy it is to iterate with containers versus sections.
We’ll start with containers. Let’s say we want to create 4 stacked titles. With sections, the 4 titles would all generally be added to one column. Now, if we want to place all the titles in the same row, we would have to add columns and move the titles to separate columns.
Adding more titles would require adding more columns. Switching back and forth between ordering the titles vertically, horizontally, or in reverse is not straightforward.
Now, if we use containers, we would simply create one container and add 4 titles to it. This would create the titles vertically stacked by default. To arrange the title horizontally, the direction can be simply changed from the default vertical to horizontal. 
No new widgets have to be added. To add new titles is a matter of adding the titles to the existing container. No other widgets are needed. It’s easy to reverse the direction in which the titles are ordered and it’s easy to pull a title to the end or beginning. You can even set whether you want the titles to wrap, which can make responsive designs easier to work with.
Finally, if we compare the amount of markup needed when arranging these titles all in a row, sections require four nested elements, while containers only use two.
Four divs to add a title within a column in a section.
Just two divs to add a title in a container.
Can I Switch to Containers?
If you turn on the containers experiment in your Elementor settings, you’re site won’t change at all. The sections and columns of your site will stay as is. However, as you add new elements to your site, they’ll be put into containers. This backward compatibility allows an easy transition from sections and columns to containers in most cases.
Of course, I would recommend testing things out on a staging site first, and once you see that containers are not causing problems, start using containers on production.
Recommended Reading
Looking for more on the use of containers? Check out some additional information from Elementor.
