How to Use Elementor Flexbox Container in 6 Simple Steps

Have you tried the new  Elementor Flexbox Container feature?

Well, the buzz is it’s a great addition to make your website more optimized for all devices and make your site load faster.

How? 

Well, the new flex container works in a little different way (both front end and backend) than the previous sections/inner section. And these new and different ways of working are what does the magic.

In this blog, you will learn about the new options Elementor Flexbox Container brings to the table to build a responsive website and follow a complete Elementor Flexbox Container tutorial to create modern layouts using flexbox elementor features.

So keep reading…

What is an Elementor Flexbox Container?

Elementor Flexbox Container brings all the CSS Flexbox facilities to your Elementor editor and helps users create advanced responsive layouts using a modern flexbox container system. With the new addition, you can easily create advanced layouts to ensure that web pages look great on all devices irrespective of size.

Note: CSS flexbox container like the name suggests provides you advanced flexibility to create device responsive design. Before the introduction of flexbox, it was rather complicated to create responsive design using multiple layout modes like Block, Inline, Table, and Position. But with flexbox containers, you no longer need multiple layout modes.

And when it comes to the Elementor flexbox container, you won’t have to use sections anymore. You can add widgets within a container without any section. This nested container Elementor structure gives you more flexibility than traditional sections and columns.

Once you add widgets and containers, you can control the distribution of widgets within the container along with the layout for each device. Besides, you get separate customization settings for each container (even containers within a container). This empowers you with the best flexibility to make your design device responsive. 

Difference Between New Elementor Flex Containers and Sections

Understanding Elementor section vs container layouts is important because containers provide lighter code structure, better responsiveness, and more design flexibility compared to older sections.

. Well, there are quite a few differences. These are some key differences :

• You can add widgets to containers with Elementor flexbox whereas with sections you need to add columns and then add widgets to it.
• In the flex container, the widget width is inline by default whereas, with column section structure, the widget width is full width by default.
• Earlier, you could add only one inner section inside a section, but with the latest flex containers, you can add as many containers as you want.
• With the column-section structure, you could change the widget direction using column, or inline positioning. Now with the latest flex container, you can change the widget direction using Column, Row, Column Reverse, or Row Reverse.
• In the column section structure, Reverse Column or Duplicate Sections were used to make web pages responsive. In the latest flex container method, you can use a Custom order of widgets or Containers for each device.
• The alignment options in the section/column structure are Left, Center, and Right. On the other hand, with flex containers, you get alignment options such as flex-start, flex-center, and flex-End.

Now, you must be thinking about how these changes can benefit you. To learn more about that, move to the next section.

Advantages of using Elementor Flexbox container

A lot of research is done before a new feature is added to a plugin to ensure the feature is useful to the customers. The same goes with the Elementor flex container. This Elementor feature has been added because it will benefit the users to a great extent.

Here are some of the advantages that you will enjoy if you use the Elementor flexbox container:

• Since section and inner section will be replaced with flex containers, you can build more optimized websites.
• Flexbox will reduce the number of Elementor Flexbox columns and inner sections. As a result, less code will be produced in the backend. And less DOM will result in better speed for your WordPress site.
• Flexbox container settings will empower you to build device-responsive websites with more flexibility than before.
• Now you can hyperlink a complete section. Earlier you could only hyperlink widgets.
• If you were unhappy earlier because you could only add one inner section in a section, then the flex container is for you. With flex container, you can add containers within the container indefinitely.

How to Use Elementor Flexbox Container In 6 Steps

Follow the steps below to learn how to use Elementor Flexbox container on your website to get a more optimized look. The process consists of 6 easy steps:

Step 1: Activate Flexbox Container in Elementor Experiments

First, you need to enable the Elementor Flexbox Container feature to start using Elementor containers inside the editor.

For that, navigate to Elementor ⇒ Settings from the WordPress dashboard. Now move to the Experiments tab and scroll down to find the ‘Flexbox Container’ option.

After you find the option choose Active from the dropdown menu to enable flexbox container elementor support on your website. Finally, scroll down to the bottom and click on “Save Changes” to save the status.

Step 2: Create a New Page

After activating the flex container, it’s time to create a new page so you can use this feature. This is the starting point for any beginner following an Elementor container tutorial or learning how to use Elementor’s flexbox containers effectively.

For that, Navigate to Pages ⇒ All Pages and then click on Add New. Now, provide a title, and click on Edit with Elementor.

Step 3: Add a Container

Now, instead of a section, you need to add container layouts using the new Elementor container flexbox system. If you are wondering how to add a container in Elementor, simply click the plus icon and select your preferred structure.

Note: If you notice the structure in the navigator, you will find that the structure is actually a container that has other containers in it rather than columns. You can also drag and drop a single container from the menu on the left. 

You can customize many options for the container such as

• Container width: You can choose container width as Boxed or full width.
• Width: If you choose Boxed as container width, then the width will be 928Px. On the other hand, if you choose Full Width, then container width will be 100% of the viewport width. However, you can change both the width values.
• Overflow: You can choose overflow value as Default, hidden, or auto. Advanced users often use Elementor container overflow hidden settings to improve animation and scrolling effects.
• HTML tag: You can also create an Elementor container link by assigning clickable HTML tags. You get options such as div, header, footer, main, article, section, etc. There is a new addition of a tag.

Note:  You also get many options under “Items” (more on than later). Moreover, you can customize all the settings above for each inner container as well.

Step 4: Add Widgets

The process of adding widgets is the same as the column section structure. You need to search for the widget then and drag widgets directly into the Elementor-widget-container area inside each container. This makes Elementor widget container management easier compared to older section-based layouts.

For example, I am going to add one heading, one video, and one social share icon.

Step 5: Customize Container Contents 

The Flexbox controls are the core of Flexbox WordPress layouts inside Elementor. For this, edit the container. Then, go to Layout on the left panel and expand the Items option. Here are the options you get to play with:

• Directions: The default direction is row. However, you get four options such as Row, Column, Reversed Row, and Reversed Column. If you choose the column or reversed column then all the containers within the main container will show up as different Elementor flexbox columns.

Note: If you choose a column then, you need to adjust the width of the inner containers.

• Align Containers: You can set the alignment as Flex Start, center, flex-end, and Scratch. Flex starts place your container element from the start point, and with a Flex center value you can place the items in the center. On the other hand, with Flex end, you can display all the inner containers on the bottom. And with the stretch option, the inner containers will take up any extra space if allocated. All these will be applicable if you choose direction as a row.

On the other hand, if you choose the direction as a column, then the flex-start and center values will work the same as the row. But with the flex-end, the containers will be shifted to the right and with scratch, it will take up any space on the left.

• Justify Content:  You get six options to justify content: flex start, center, flex end, space between, space around, and space evenly. Space between will add the same space between each of the items. However, it will not add any space on the top or bottom of the items.

The space around option will add space on both the top and bottom of each container. And the space evenly option will add the same space around all the widgets and inner containers.

• Elements Gap:  You can use this option to add space between elements (widgets and inner sections).

• Wrap: Choose No Wrap to put all the items in a single line and Wrap to let the contents flow in multiple lines.

Step 6: Publish & Preview

You can repeat step 4 to customize all your container settings. Once you are done with the customization, click on the publish button to publish the page. Then, you can click on the preview button to see your page with the new flex container structure.

How to Convert Section-based Elementor Page to Flexbox Container

Converting section/column based structure to the new Elementor Flex container is super easy. You can do this by following the 4 simple steps shown below:

Step 1: Select the Section you Want to Convert

You need to convert each section separately. So, first, select the section you want to convert. You can click on the Six dots to select a section or select a section from the navigator (you can find the option in the bottom-left corner).

Step 2: Click on Convert to Make the Conversion

Now to convert, on the left panel, you will find a Convert to Container option under the layout. Click on the CONVERT button.

Step 3: Delete the Previous Section

After the conversion process is complete, you will find two versions of the same section. One is section-based and another one is container-based. The version on the top is section-based. Delete the previous/ Original version.

Step 4: Update and Preview

You can repeat steps 1 to step 3 for all the sections of your page. Once you are done with converting all the sections into WordPress Flexbox container layout, click on the update button to save. Now you can click on the preview button to see the same page but with a container layout.

Can You Create Horizontal and Vertical Flexbox Container in Elementor?

Yes, Elementor supports creating horizontal and vertical flexbox containers in less than a few seconds. Just you need to select the six dots of the Elementor container and select the horizontal or vertical direction from the layout tab. Thus you can make your flexbox container without a hitch.

Can You Use Elementor Add-on Features with the New Flexbox Container?

Yes. You absolutely can. 

You can use ElementsKit- the Ultimate Addon for Elementor to add additional widgets and other features to the Elementor page builder. This Elementor addon is 100% compatible with the new Flexbox container of Elementor.

You can use the same process of converting any Elementor section to Container layout (shown in the above section) to convert ElementsKit sections/pages. 

ElementsKit comes with 90+ advanced widgets, 20+ modules, and 1,000+ professional templates. It extends the Elementor page builder with multilevel mega menus, custom headers & footers, versatile content elements, and trendy animations like liquid glass or parallax to build powerful WordPress websites. You can easily create a complete website using the ElementsKit premade template in just a few minutes.

Here is an example you can see how smoothly ElementsKit premade pages get converted to Elementor Flexbox Container.

FAQs

What is the difference between flexbox vs grid Elementor layouts?

Flexbox is a one-direction layout that allows you arrange items in a row or column. Whereas, Elementor grid is a two-dimentional layout where you can arrange items both in columns or rows at the same time.

Why Elementor flexbox container not showing?

Elementor flexbox container might not show due to plugin conflict, browser cache, outdated Elementor version, disabled flexbox container, etc. So, if you encounter such error, check and resolve the issue related to it.

How to reduce space between container in Elementor?

You can reduce space between Elementor container by adjusting padding and margin settings. Besides, you can also edit column gaps and container layout controls to reduce space between containers in Elementor.

Wrap up

I am sure now you realize why there is so much around this new addition of Elementor. Elementor Flex container is truly a blessing to all the WordPress website builders who were looking for ways to make websites more optimized, faster and responsive irrespective of device size.

And the icing on the cake is you can turn your previously created website into a Container-based optimized website in no time. However, the flex container is still in the experimental mode. So, it’s not recommended to use it on a live website till it’s published as an active feature

Till then, feel free to play with the Elementor flex container on your staging site. And do try out ElementsKit to get more flexibility to design an amazing-looking website that holds your customer’s attention and elevates your website’s success.