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 or updated 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 → Widgets structure with a single, flexible element. A container can hold widgets directly, or it can hold other containers nested inside. This makes layouts simpler and faster to work with.
What changed from the old system?
In the older Elementor layout system, every page had three layers:
- Section (full-width row)
- Column (vertical slice inside the row)
- Widget (the actual content)
Containers replace all three with a single element. You can nest containers inside containers to create any layout.
Old system
- Section contains columns
- Columns contain widgets
- Can only arrange things left-to-right inside a section
Container system
- Containers contain widgets (and other containers)
- Can arrange things horizontally OR vertically
- 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
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, you will see a blue border appear. The blue handle label will say Container.
If you look at the Navigator panel, you will see all elements listed in a tree. Containers appear as collapsible nodes, with their child widgets listed inside.
Editing inside a container
Editing a container works the same way as editing a section:
Click the container 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 widget library in the left panel into the container on the canvas.
To add a new container inside an existing one, drag a container from the widget library into the parent container. This creates nested layouts.
Container settings
When you select a container, you will see three tabs in the left panel:
- Layout — direction (row or column), alignment, wrapping
- Style — background color, border, shadow, padding
- Advanced — motion effects, custom CSS, device visibility
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 Navigator panel 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
This nesting can go several levels deep. For complex pages, the Navigator panel is the best way to understand the structure.
Common questions
Related guides
- Sections, columns & widgets explained
- How to add a new section
- Working with columns
- Using the Navigator to find elements
- A tour of the Elementor interface
Need a hand?