Flexbox Containers
The first thing you will probably notice about the flexbox containers is that they don’t have any columns. They also replaced inners sections and sections all together, this means that each of those items are now all containers. You might also notice that the color scheme has changed, Elementor is now using a darker dark mode and pink as it’s main color instead of the previous blue.
Container Settings and Features
Let’s take a look at the container settings. Here we have a container with a heading and an image in it. In the layout settings for the container we have a new section called “items”. In this section there are some new settings. These new settings include: Direction, Justify Content, Align Items, Gap between elements, and wrap. The Direction settings will set how your section’s items are laid out within the section. Clicking the left facing arrow will make them align side by side, this is how you would set up a 2 column section the way they used to be in the old version. The Justify Content will determine how the content lays vertically so you can set them to space between to align items within to top and bottom simultaneously. The Align Items will align things horizontally within the container. Gap between elements is a new feature that allows you to adjust how much space is between each item within your container. It is important to set this to 0 if you are having issues with spacing.
Wrap will determine whether or not items within the container will break or resize themselves to fit within. Another great feature about the new containers is that you can nest as many as you want within each other. This allows you to create many more design styles because you can have columns next to rows.
Another new thing that the container system allows for is linking an entire column. In the Additional Options section you can set the entire container to be an HTML Tag. One of the most useful functions for this is setting it to a(link), you can then add a link that will work for the entire container when clicked. One note on this, if there are any links in the container, it will break. This includes buttons, even if there aren’t any links attached. In the Additional Options there is also the Overflow option which was available in sections before but not columns. Now you can nest as many containers within each other and set the overflow for each.
New Elementor Possibilities
Overall the new containers system is an adjustment to make but once the basics are understood, there are so many new possibilities that can be achieved.
