Elementor Container vs Section: Here’s Everything You Need to Know

What Is an Elementor Flexbox Container?

With the update of Elementor 3.6, Flexbox containers are a powerful feature introduced in Elementor’s page builder. Based on the CSS Flexbox model, CSS Flexbox or Flexible Box Layout, is a modern web layout system developed with CSS 3 that’s designed for optimal performance and responsive design. It ensures your layouts adjust seamlessly to different devices and screen sizes.

If you’re familiar with the traditional sections-column layout, you know it can be tricky to manage multiple layouts and make sure they’re responsive. Although we have options like block, table, inline layouts, and more, making them work smoothly across different devices can be challenging.

However, Flexbox changes the game by allowing endless nesting of containers within containers, opening up a world of possibilities for unique layouts and designs. Think of these containers as the new, more flexible sections. They offer so many ways you can do alignment, padding, positioning, and more, at both the individual and collective levels.

What can you do with the Flexbox Containers?

Flexbox containers in Elementor have a variety of practical applications, making web design more intuitive and responsive:

1. Versatile sections: Whether it’s an intro, a hero section, or a call to action, containers bring a new level of flexibility to these website segments. You can easily add images, text, and interactive buttons while carefully adjusting the direction, alignment, and space of your content.
2. Dynamic card layouts: Flexbox containers excel at creating card layouts due to their ability to arrange multiple items in rows and columns. This setup gives you precise control over how items align, their span, and how they wrap around each other. With Elementor’s nested containers (nest means you can insert one or more blocks within another block), you can populate each card with diverse content widgets for a rich, engaging layout.
3. Innovative hero image galleries: The unlimited nesting capability of Flexbox containers is perfect for assembling image galleries with a clean flow, whether horizontal or vertical. This flexibility allows you to adjust spacing, image sizing, and add additional elements like text or buttons to enhance the visual appeal.
4. Efficient theme builder templates: Utilizing containers for theme element templates—such as headers, footers, or individual pages—streamlines the design process. These containers help create and save foundational layouts, making page creation faster and ensuring responsive design across different devices.
5. Centering elements with ease: Centering elements vertically within a section used to be burdensome. Now, with Flexbox containers, this task is easier. Simply adjusting alignment and justification settings lets you perfectly center content within a container, enhancing the design’s balance and aesthetics.

Difference between old Sections vs. new Elementor Flex Containers

Understanding the differences between the new flexbox containers and the old sections can improve your experience with web design:

1. Technical Aspects

• Sections in Elementor serve as the building blocks, offering a structured way to arrange elements such as widgets, images, and text. These can be further divided into columns for organizing web page elements.
• Flexbox Containers, on the other hand, introduce a dynamic and adaptive approach. Unlike sections with their rigid grid, containers allow for nesting within one another, offering unparalleled flexibility. Widgets in sections span the full width, while in containers, they align inline, allowing for an unrestricted number of elements in a parent container. As you add more elements, the container intelligently adjusts its layout to accommodate them.

2. Visual Differences

• The user interface with Flexbox containers in Elementor largely remains familiar, yet it brings subtle but impactful changes. The Navigator feature, for example, now categorizes elements under containers rather than divisions or sections. Adding elements involves selecting a container and its direction, rather than choosing a section and deciding on the column count. This new system introduces container-specific settings such as direction, alignment, justification, element gap, and wrap options.

3. Performance Implications

• Traditional Elementor sections utilize a “block” display property, stacking new sections or widgets vertically by default. To arrange elements side by side, additional divisions and Document Object Models (DOMs) are necessary, which can slow down site performance. The DOM makes websites interactive and dynamic. Without it, web pages would be static and couldn’t respond to your actions.                   
• Flexbox Containers use a “flex” display property, enabling the horizontal or vertical arrangement of elements within a single container without the need for extra divisions. This streamlined approach results in simpler code, faster page load times, and an overall smoother performance, especially for designs with complex layouts and numerous sub-sections.

By understanding these key differences between Elementor containers and sections, designers can make informed decisions to optimize their site’s structure, visual appeal, and performance.

Advantages of Using Elementor Flexbox Containers

Going for Flexbox containers instead of traditional block layouts brings numerous advantages to web design. Here are some of the key benefits:

1. Enhanced layout control

Flexbox containers provide precise control over the arrangement and positioning of content on your pages. Whether you’re aiming for horizontal or vertical layouts, adjusting content direction, alignment, padding, and width is straightforward, both for individual elements and across the site.

2. Responsive design made easy

Designed with mobile devices in mind, Flexbox ensures your layouts are responsive across all screen sizes, from desktops to tablets and smartphones. This adaptability guarantees that your content is always accessible and user-friendly, regardless of the device.

3. Streamlined code

Unlike the block model, which can lead to complex and heavy Document Object Models (DOM) when creating multiple sections or horizontal layouts, Flexbox allows for a cleaner and more efficient code structure. This results in faster loading times and improved performance on a variety of devices.

4. Limitless nesting capabilities

One of the main limits of traditional layouts was their limited nesting options. Flexbox revolutionizes this by enabling endless nesting of containers within containers, creating complex layouts without cluttering your code with excessive DOM elements.

5. Clickable containers

Previously, only individual widgets within a section could be made clickable. Flexbox containers introduce the ability to hyperlink an entire section, significantly enhancing user experience. This means users can easily navigate your site by clicking on large, intuitive sections rather than searching for smaller clickable elements.

By leveraging Flexbox containers, web designers can achieve more flexible, responsive, and clean designs, offering a better overall user experience and simplifying the development process.

How to Use Elementor Flexbox Containers (Step-by-Step)

Step 1. Enable the Flexbox Container

To begin using Flexbox in Elementor, the initial step is to turn it on.

Start by going to the Elementor settings via your WordPress dashboard. Next, click the Settings then go to Features.Here, scroll until you find the Flexbox container option. Then, choose “Active” from the drop-down menu to enable it. Don’t forget to save your changes before proceeding.

If you’re working on a new website, you’ll find that the Flexbox container feature is already activated by default.

Enable Flexbox container in Elementor settings > features > Flexbox Container

Step 2. Create your new page

To begin, let’s create a new page as usual. Head over to the Pages section, choose “All Pages,” and then click on “Add New.”

Create a new page: Pages > All Pages > Add New.

Step 3. Open Elementor

Once you’re in the WordPress dashboard, you’ll see the page builder interface. Start by naming your new page. After that, select “Edit with Elementor” to dive into using Flexbox containers.

Name your page, then select ‘Edit with Elementor’

Step 4. Add a new container

You’ll be greeted by the familiar Elementor page builder interface. From here, you can easily add a new container by dragging and dropping one from the sidebar. Alternatively, click the “+” icon and choose the layout structure you prefer.

Use Elementor to add a container: drag from the sidebar or click ‘+’.

Step 5. Edit your containers

After adding a container, a wide range of customization settings become available to you. You have the flexibility to adjust various aspects such as the container’s type, width, height, direction, and alignment, among others. If you don’t know what these aspects mean, here are some short explanations:

• Type: This is the kind of content or widget you’re adding to your page, like a text box, image, or button.
• Width: This is how wide your content or section stretches across the page.
• Height: This is how tall your content or section is from top to bottom.
• Direction: This tells us which way your content is organized, like vertically (up and down) or horizontally (side to side).
• Alignment: This adjusts where your content sits on the page, like in the center, to the left, or to the right.

Customize container settings: width, height, alignment, etc

Step 6. Design your page by adding widgets

Placing widgets into containers is straightforward. Simply select the widget you want from the Elements tab, then drag and drop it onto the “+” icon inside the container.

Add widgets to containers: drag from Elements tab to ‘+’ icon.

Step 7. Customize the widgets you added

Just as you can adjust global container settings, you have the ability to edit the settings for content within a container. This includes customizing the direction, alignment, justification, gap, wrap, and more for your content elements.

Step 8. Publish your page

You have the flexibility to create multiple containers, duplicate them, and rearrange their positions as needed. Continue adding elements following these steps. When your design is complete, hit the “Publish” button to make your webpage live. For a sneak peek of how your Flexbox page looks and functions, you can also click on the “Preview” button before publishing.

How To Convert a Section Based Elementor Page to a Flexbox Container?

Step 1. Choose the section you want to convert

To convert sections to containers, click on the six dots located at the top of the section. 

Convert sections to containers: click six dots at section top

Step 2. Click the convert button

After selecting a section, look for the “CONVERT” button within the Layout tab. Click this button to change the section into a container.

Convert section to container: Click the ‘CONVERT’ button in the Layout tab.

Step 3. Update your layout

After the conversion process finishes, you’ll notice two versions of the section you selected: the original section will be on top, and the newly converted container will be at the bottom. Remove the original section and click “Update” to save your new layout. Follow these steps for each section you want to transform into a container.

Remove original section after conversion, click ‘Update’ to save

Frequently Asked Questions

Can I use Elementor Flexbox Containers with any WordPress theme?

Absolutely, Elementor Flexbox containers work with all WordPress themes. For an optimal experience, consider using the Nexter WP Theme, known for its full compatibility with Flexbox containers. Simply activate Flexbox containers from the Elementor settings, and you’ll find them ready to use in the page builder during your next session.

How can I make my Elementor Flexbox Containers responsive on different screen sizes?

Elementor Flexbox containers offer numerous features to make your webpage content adapt seamlessly across various screen sizes. You have the flexibility to set the direction of container content, choosing between rows or columns for how it’s displayed. Additionally, you can align content both horizontally and vertically, and determine the specific points at which content should wrap for each element. Furthermore, you have the capability to toggle widgets on or off based on the device being used.

Are Elementor Flexbox Containers compatible with all major web browsers?

Elementor Flexbox containers work smoothly with all widely used web browsers, such as Chrome, Edge, Safari, and Firefox.

Skip the time-consuming learning with professional help

And there we have it! You just learned Elementor’s Flexbox Containers and how they stack up against traditional Sections. It’s clear that with  these new Containers, Elementor has once again raised the bar for web design flexibility, responsiveness, and creative freedom.

But learning every new update on your own can be time-consuming and overwhelming, especially with the pace at which technology advances. Our website support team at 1dea is always up-to-date with the latest trends and updates, making sure your website or project benefits from the newest features without you having to spend hours learning them yourself. Use your time to streamline your workflow, keep your project cutting-edge, and dedicate your precious time to growing your business or refining your craft. Don’t let the constant cycle of updates slow you down. Contact us today!