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

What are Dark Patterns and Unethical Web Design

January 18, 2024

Bad web design still dominates the internet and outdated websites that are not mobile-friendly continue to display in search results....
Best Real Estate Website Design Examples

December 26, 2023

A list of the best-designed real estate websites for 2024 includes sites that marry outstanding visuals and functionality. Real Estate...

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.