Containers (the modern layout) explained

Understand Elementor's Flexbox Container system — the modern replacement for sections and columns on newer sites.

Newer websites built with Elementor use a layout system called Containers. If your site was built recently, you may see "Container" labels in your editor instead of "Section" and "Column." This guide explains what Containers are and how to work with them.

Quick summary

Containers replace the old Sections → Columns structure with a single, flexible element. A container can hold widgets directly, or it can hold other containers nested inside. This makes layouts more flexible and quicker to work with.

What changed from the old system?

In the older Elementor layout system, every page had three layers:

Section (a horizontal row)
Column (vertical slice inside the row)
Widget (the actual content)

Containers replace the first two layers (sections and columns, plus the old Inner Section) with a single element. Widgets still hold the actual content. You can nest containers inside containers to create any layout.

Old system

Section contains columns
Columns contain widgets
Columns sit side by side and always fill the full width of the section
Inside a column, widgets stack top to bottom by default

Container system

Containers contain widgets (and other containers)
You choose whether items line up horizontally or vertically
Nested containers don't have to add up to the full width
More flexible, simpler structure

What is a Container?

A container is a flexible box that can hold widgets and other containers. You can control:

Direction — whether its children stack horizontally (side-by-side) or vertically (top-to-bottom)
Alignment — how children are spaced and positioned
Size — how wide or tall the container is
Background — color, image, or gradient behind its contents

There are two kinds: Flexbox containers, for free-form layouts, and Grid containers, for even rows and columns.

Most containers you work with will already be set up correctly by whoever built your site. You will mainly be clicking into them to edit the widgets inside.

How to identify containers in the editor

When you hover over a container on the canvas, a blue tab appears above it. The tab has a settings icon that opens the container's settings, and a plus sign for adding a new container above it.

If you open the Structure window (formerly called the Navigator), you will see all elements listed in a tree. Containers can be expanded or collapsed to show the widgets inside them.

Editing inside a container

Editing a container works the same way as editing a section:

Click the settings icon in the container's tab to select it. The left panel shows the container's settings.

To edit a widget inside the container, click the widget directly. The left panel switches to that widget's settings.

To add a widget, drag it from the left panel into the container on the canvas. If the panel is showing settings, click the + (Add Element) icon in the top bar to see the list of widgets.

To add a new container inside an existing one, drag a Container from the left panel into the parent container, or right-click the parent and choose Add New Container. This creates nested layouts.

Container settings

When you select a container, you will see three tabs in the left panel:

Layout — width and minimum height, direction (row or column), alignment, the gap between items, wrapping
Style — background, background overlay, border and box shadow, shape dividers
Advanced — margin and padding, motion effects, device visibility, custom CSS (custom CSS needs an Elementor Pro plan above Essential)

For day-to-day editing, you will rarely need to change container settings. Focus on the widgets inside.

Don't delete containers accidentally

If you delete a container, everything inside it is deleted too — all the widgets and any nested containers. Always double-check what is selected before you delete. Use the Structure window to see exactly what is inside.

Nested containers

You can place containers inside containers to build complex layouts. For example:

An outer container holds two inner containers side by side
The left inner container holds a heading and paragraph
The right inner container holds an image

Elementor recommends using as few containers as possible, because every extra container makes the page a little less efficient. For complex pages, the Structure window is the best way to understand the structure.

Common questions

My site uses Sections — does it need to be converted to Containers?

No. Elementor lets you keep working with sections. If your site has sections, you can leave them as they are, convert them to containers, or add new containers alongside them. If Chykalophia built your site with sections, there is no need to change anything. Converting a section to containers is one-way, so talk to us before you try it. Containers are used on newer builds.

Can I mix sections and containers on the same page?

Yes. Elementor says there is no problem placing sections and containers on the same page. When containers are turned on, any new layout elements you add are containers anyway. Even so, we suggest sticking with one system per page where you can, because a single system is easier to edit and maintain.

How do I add a new container to a page?

Drag a Container from the left panel onto the canvas, or click the + icon on the canvas and choose Flexbox or Grid. To add one directly above an existing container, hover over it and click the plus sign in the tab that appears.

The container settings look different from what I expected — why?

Elementor has been updated significantly over time. Newer versions also offer a new generation of elements (Editor V4) that use two tabs, General and Style, instead of three. The exact labels and options may vary depending on which version of Elementor is installed on your site. If something looks unfamiliar, contact us for guidance.

Need a hand?

If you're stuck, email support@chykalophia.com and we'll help. Include your website address and a screenshot if you can.