Design Blog

How to work with Elementor’s new Flexbox Containers

The latest release from Elementor, has converted sections, inner sections, and columns to one element called “Containers”. As of right now, this is still an optional feature but it is coming soon. There are a few new things that will take some getting used to about these containers and this guide will help you get started.

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.

Elementor's flexbox container nesting

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. 

Elementor's flexbox containers

Recent Posts

The Importance of Protecting your Intellectual Property

June 20, 2024

The cease and desist letters seem to be a frequent occurrence and many businesses small and large are struggling to...
Change Text Color on Container Hover in Elementor

March 29, 2024

When it comes to designing in Elementor, there are many different possibilities straight out of the box. However, sometimes you...

Contact Us

Let's start the conversation

"*" indicates required fields

Name*
This field is for validation purposes and should be left unchanged.

Contact Us

Let's start the conversation

"*" indicates required fields

Name*
This field is for validation purposes and should be left unchanged.