How to use 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.

Elementor 

Elementor is a popular page builder plugin for WordPress. Here are some key things to know about Elementor:

Drag-and-Drop Interface

Elementor has an intuitive drag-and-drop interface that allows you to build pages visually without any coding knowledge.

Sections and Widgets

The basic building blocks are Sections which contain Widgets like text, images, buttons, forms etc. Widgets can be arranged in rows and columns.

Today, Elementor Containers are intended to replace Columns and Sections as a default feature for new Elementor versions.

Extensive Widget Library

It comes with a wide range of basic and advanced widgets to design any type of page or website section.

Responsive Design

Elements can be set to behave differently on different screen sizes for an adaptive and responsive design.

Template System

Frequently used sections can be saved as reusable templates and globally inserted.

Kits

Pre-defined design called Kits can be applied for consistency across your site.

Customization

Extensive options to customize widgets, typography, colors, spacing etc to control every design aspect.

Speed Optimization

It generates optimized code for faster pages and SEO-friendly structures.

Regular Updates

Active development keeps adding new features and widgets. Used on millions of sites worldwide.

FREE and Premium

Free version allows basic page building. Paid Pro version adds more features for agencies and large sites.

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 allow the user performr Elementor advanced techniques. Let’s see:

Elementor Advanced Techniques with Containers

You can perform Elementor advanced techniques using Elementor Containers:

  1. Use containers to break out of the standard row/column grid system for more flexible layouts. You can freely position and size elements within a container.

  2. Nest containers within other containers to create complex multi-layered layout structures not possible with sections alone.

  3. Add multiple widgets, sections, or other elements inside a single container and manage them as a single reusable block.

  4. Use container background, padding and borders to visually separate logical groups of content.

  5. Apply styling like custom CSS to a container to selectively target only its child elements.

  6. Make container sizing and positioning fully responsive using the Type, Width, and Padding controls.

  7. Enable the container to shrink-wrap its content by disabling fixed width.

  8. Animate elements inside containers using the Transform controls for transition effects.

  9. Slice up a full-width image, video, or banner into tiled containers across the entire row.

  10. Overlay or absolutely position elements within containers to create parallax or layered effects.

  11. Build complex slider and carousel structures by nesting containers holding slide content.

  12. Apply container styles conditionally based on breakpoints for adaptive designs.

  13. Use multiple containers or widgets inside containers to implement dynamic tabbed, toggled or accordion styles.

Elementor Containers vs Sections and Columns

Here are some key advantages of using Elementor Containers over Sections and Columns:

Flexibility

Containers provide more flexibility than sections and columns since they are not restricted by a predefined grid system. You can freely position and size containers without worrying about rows or columns.

Nesting

Nested containers: Elementor allow flexible layouts within containers. This is not possible with the standard section/column structure. You can create complex nested layouts by adding containers within containers. Learn more about Nested Containers.

Breaking Grid Constraints

With containers, you are not limited by the standard 12 column grid as with sections/columns. You can create layouts that don’t follow the standard grid by grouping elements freely within containers.

Repositioning Elements

It is easier to reposition elements within a container compared to sections/columns that are locked to rows. You get more control over element placement.

Dynamic Sizing

The size and placement of containers can be made dynamic and responsive more easily compared to sections/columns that use fixed sized rows/columns.

Group Elements Logically

Containers allow you to logically group related elements together without worrying about grids. This results in cleaner and more organized code structure.

Isolated Styling

You can apply custom styles exclusively to elements within a container without affecting other sections. This isolation is not possible with standard sections/columns.

So in summary, containers provide more flexibility, control and design options compared to the regimented section/column structure in Elementor.

How to use Elementor 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 (old versions, now is by default)
  2. Be sure that you have defined the site width in the layout configuration.
  3. In a new empty post or page 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.

Your external container will be like this:

EXTERNAL ELEMENTOR CONTAINER EXTERNAL ELEMENTOR CONTAINER ADVANCED

The internal container will be like this:

INTERNAL ELEMENTOR CONTAINERINTERNAL ELEMENTOR CONTAINER ADVANCED

 

Learn more about Elementor in Elementor Containers the right way, and How to change Elementor.

Do you wish to start using Elementor Containers on your new website? Try our product ai4k WebKit, includes Elementor Pro License and 10 Elementor Kits.

Need a website that converts?

ai4k web kit

Web Kit

Elementor Pro + Kits

Website Plans

Start your Online Business now!