Container Overview

With the container element you can now harness the power of flexbox CSS. The primary goal behind flex is to provide the ability to alter each items’ width, height, and order, to best fill the available space of the container. This feature will replace the current section, column, and inner section functionality of the Elementor editor.

Flexbox Containers are first being introduced as an Alpha experiment, and should be used with caution, and not on a live website. 

We recommend setting up a sandbox website on your local machine or development server. This will let you learn how to best use the Container in your designs without any worry about messing up your current live environment.

Meet The Container 

1. The Container
2. What is the Container
3. What does the Container do
   1. Improve Performance with Containers
      1. Container Performance – A Closer Look
4. Container FAQ and Troubleshooting

Container and Widget UI

1. Flexbox Settings Overview
   1. Container Layout Tab Settings
   2. Container Style Tab Settings
   3. Container Advanced Tab Settings
2. Advanced Container Knowledge
   1. Advanced Widget Settings: Order
   2. Advanced Widget Settings: Size

Using Containers

1. Using Containers
2. Adding Containers
3. Adjusting the Container’s Size and Behavior
4. Styling the Container
5. Adjusting the Contained Elements
6. Complex layouts using the Container
7. Responsive Design Using Containers

Containers How To’s

Basics

1. Basic Layouts using the Container
   1. Creating an Intro Container
   2. Creating a Hero Container
   3. Creating a Call to Action Container
   4. Creating a Services Container
   5. Creating an Image Gallery Container
   6. Making a Container clickable
   7. Converting existing Sections to Containers

Containers And The Theme Builder

1. Creating a Header Template with the Container
2. Creating a Footer Template with the Container
3. Creating a Single Page Template with Containers