How to Use Containers (If Elementor Flexbox is On)

What Are Containers?

Containers are Elementor’s modern layout system based on CSS Flexbox. Containers replace Sections and Columns, allowing a more streamlined and powerful approach to page design.

Key Features

• More flexible layouts
• Fewer nested structures (better performance)
• Full Flexbox alignment controls
• Better responsive design capabilities

Why Use Flexbox Containers?

Flexbox containers offer several advantages over the traditional Section + Column system:

• Faster page load due to reduced HTML structure
• More layout freedom (horizontal or vertical stacking)
• Precise alignment control for complex layouts
• Cleaner responsive behavior

Container Structure Overview

Containers allow flexible, nested layouts. Your pages will consist of:

1. Parent Container — top-level wrapper
2. Inner Containers — used for layout grouping
3. Widgets — content added inside containers

Instead of sections and columns, layout direction and alignment are handled by Flexbox settings.

How to Add Containers

Add a Parent Container

1. Click the + icon in the Elementor canvas.
2. Select a Container.
3. Choose a pre-set structure or start with a blank container.

Add Child Containers

• Right-click inside a container → Add New Container.
• Or drag a Container widget from the left panel.

Add Widgets

Drag widgets inside any container to add text, images, buttons, etc.

Flex Direction Explained

The Direction setting controls whether items stack horizontally or vertically.

Flex Direction Options

• Row – items side-by-side horizontally
• Column – items stacked vertically
• Row Reverse – reversed horizontal layout
• Column Reverse – reversed vertical layout

Example: A hero with text on the left and image on the right uses Row.

Alignment & Justification

Justify Content

Controls spacing along the main axis:

• Start
• Center
• Space Between
• Space Around
• End

Align Items

Controls alignment across the main axis:

• Start
• Center
• Stretch
• End

Gap

Add spacing between items without using margins.

Nesting Containers

You can nest containers to create flexible layouts such as multi-column feature blocks or split hero sections.

Examples

• Parent container (row) → 2 inner containers (columns-style layout)
• Parent container (column) → stacked content sections
• Grid-created container groups for advanced layouts

Styling Containers

Containers have advanced styling options similar to sections.

Common Styling Controls

• Background color or gradient
• Background image with overlay
• Padding and margin
• Border and border radius
• Box shadows
• Custom width (px, %, vw)
• Horizontal or vertical gap spacing

Responsive Controls for Flexbox Containers

Flexbox makes responsive layout adjustments easier.

Key Responsive Tools

• Switch direction on mobile (Row → Column)
• Reverse order (Column Reverse)
• Device-specific gap settings
• Device-specific margin/padding
• Hide/show containers per device

Activity: Build a Hero Layout Using Containers

Create a simple hero section using Flexbox Containers with the following requirements:

1. Create a parent container with Row direction.
2. Add two inner containers:
   • Left: text and a button
   • Right: an image
3. Set the parent container’s height to a minimum of 600px.
4. Add a background color or image to the parent container.
5. Use Align Items: Center to vertically center the content.
6. Switch to mobile view and set direction to Column.

Assignment: Upload a screenshot of your container-based hero layout.

Best Practices for Container Layouts

• Use fewer containers for cleaner markup and faster load times.
• Use Gap for spacing instead of random margins.
• Use responsive direction changes to optimize layouts on mobile.
• Stick to consistent padding values across containers.
• Name your containers in the Navigator for easier editing.
• Use global colors and typography for consistent branding.