Elementor Containers

Working with Elementor Containers, the right way.

I’ve seen that many people are afraid to use containers and still think about it because “it’s an experiment”.

I have used it from the very first moment, and after one or two Elementor updates I can say that it is totally safe to use it but, in the right way.

What is Elementor?

Famous for its user-friendly drag-and-drop interface, which enables even individuals without coding skills to effortlessly construct websites, Elementor is a popular website builder for WordPress CMS. However to finish a professional website design, various abilities and knowledge are required.

A support team is available to assist users with any queries or problems they might encounter, and Elementor is frequently updated with new features. I should probably mention that the support for Elementor is not the best in the world, making it challenging to develop a good website design without the devoted assistance of a web designer or web design business, or by spending a lot of time looking for orientation and solutions. In general, Elementor is regarded by many users as a useful and simple website construction tool.

What is Elementor Container?

Check Elementor Container definition.

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. Elementor Container widget is a way to apply the same order, positioning, and size settings on a group of items that are confined within the same container. These items can either be other containers placed inside the parent container, or widgets.

Elementor Containers are a flexible way to organize items in a column or a row. It’s efficient, dynamic, and responsive. It replaces the outdated and rigid section-column layouts. Elementor is the best website builder in the world today, and we ai4k.eu are perhaps one of the only webdesign Oslo agencies that use it today.

As containers are a new lean layout structure feature in Elementor, they allow you to achieve pixel-perfect responsive designs and highly advanced layouts, quickly and with a much slimmer markup, which reduces the DOM output and improves performance significantly.

Additionally, you can improve the user experience by making the entire Container clickable by adding a link to it. 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.

Containers rule

Elementor Containers are changing or disrupting everything in a good way I think. 

  • All tutorials or video tutorials on Youtube for example that show the use of Elementor using Columns and Sections will be outdated and lose traffic.
  • Websites designed with Elementor, soon or later should be updated to Containers.
  • The sub-market of third-party add-ons or plugins created to work exclusively with Elementor will lose ground.

Elementor Containers are so powerful and simple to use that definitely this will be another hit to the third-party plugins, following the pending task of the performance toll they put on Elementor or on the website.

When Containers will be out of Beta status?

I guess they are waiting for some compatibility issues with other software, but not for functionality itself. 

Check more related content on
Website design

How to work with Containers

I did a video explaining how to work with Containers. Resuming these are the step-by-step instructions on how to work with Elementor Containers:

  1. Set the “experiment” active.
  2. Be sure that you have defined the site width in the layout configuration.
  3. In a new empty post drop a container.
  4. Define Boxed and 100% width.
  5. In advanced, define some padding left and right at least, to avoid the site edges.
  6. In that container drop another container, nested.
  7. Define Full Width and 100% in this nested container.
  8. Drop in the internal container the element you want to use.

Need a website that converts?

ai4k web kit

Web Kit

Elementor Pro + Kits

Website Plans

Kick Off your online business today!