Elementor has made some big changes. You can now use Containers, which allow you to use flexbox and grid, two native CSS methods for laying out elements in relation to each other.

In the video below, Cameron from Emberly will give you a crash course in how containers work, and how they are superior to the old sections.

Meet Containers

Containers have recently been released in Elementor, a game-changing feature that is transforming how we build websites.

Containers offer a more intuitive and powerful approach to web design, replacing the older sections and columns structure with a system grounded in CSS concepts like Flexbox and Grid. Here’s why we’re excited about this shift—and why you should be too.

What Are Containers?

Containers in Elementor are a new method of structuring layouts that align closely with how CSS works. They replace sections and columns, offering web designers greater versatility, responsiveness, and control. With containers, you can visually manipulate layouts using Flexbox and Grid, two CSS techniques designed for modern web development.

Instead of adding layers upon layers of settings and spacers, containers streamline the process, making layouts more efficient and intuitive. They enable you to design with precision while learning foundational CSS concepts, giving you more freedom and options for creativity.

The Advantages of Containers

1. True Responsiveness

Flexbox and Grid allow for seamless adjustments across screen sizes. Want an image to be on the left side of your layout on desktop but move to the top on mobile? With containers, this is as simple as changing the direction of flex flow. No need for duplicate sections or hidden elements—just clean, responsive design.

2. Cleaner Code and Faster Sites

Containers reduce the need for extra padding, spacers, and margin tricks. This not only speeds up the design process but also results in cleaner, more efficient code. By eliminating unnecessary layers, websites built with containers load faster and perform better.

3. Enhanced Design Flexibility

Containers empower you to:

• Use flexible gaps to control spacing without relying on hard-coded padding.
• Set minimum heights and vertical alignment effortlessly.
• Combine Flexbox and Grid layouts for advanced, customized designs.

Whether you’re building a simple page or a complex site, the flexibility of containers opens up a world of design possibilities.

A Quick Comparison: Sections vs. Containers

In the old sections-and-columns approach, creating layouts often required guesswork and workarounds:

• Adding padding and spacers to create gaps.
• Creating duplicate sections for mobile and desktop designs.
• Wrestling with inconsistent alignments.

With containers, you simply use Flexbox or Grid to define the layout. For example:

• Flexbox: Align elements in rows or columns and control their flow and spacing.
• Grid: Create advanced layouts with precise column and row control.

These tools provide built-in options for direction, alignment, and spacing, making it easier to design layouts that are both functional and visually appealing.

Building the Future with Containers

The Emberly team has begun the process of transitioning existing sites built with sections to the new container methodology. It’s a significant shift, but one that sets the stage for the future of web design.

We’re especially excited about the consistency and efficiency this change brings. Containers make it easier to maintain design standards across a site, troubleshoot layout issues, and adapt to new web trends.

Got questions about containers? Reach out to our team.