Elementor Flex Container and How to Use Them - Elementor Wordpress Tutorial - Tips and Advice

If you've updated to Elementor 3.6, you'll have seen the New Container Feature that replaces Sections and Columns.

I'll cover off how to use it and to better understand the settings.

00:00 Intro
01:14 Activate Flex Containers
01:38 Impact on Existing Sections
04:05 New Container Layout
07:31 New Container Build
09:58 Understanding Row Direction
11:05 Understanding Column Direction
11:48 Align Items in a Column
12:48 Align Items in a Row
12:59 Overview of Align for Columns and Rows
13:37 Justify Content
16:23 Adding an Image
17:06 Elements Align and Elements Order
19:19 Add another Container inside the Parent Container
21:58 Elements Gap
22:38 Containers Side by Side
24:09 Wrapping Items and Containers
26:38 Align Content
27:57 Container Structures provided for you
29:01 Conclusion

Elementor Flex Container and How to Use Them - Elementor Wordpress Tutorial - Tips and Advice

Indeed we're affiliated to them, but it helps to pay for resources to keep creating ace content for you :)

Equipment Used:

Music used:
Track: Will You Be Mine (Remix)
Music provided by Audio Library Plus

-- Of course, we're affiliated to them, but it helps to pay for resources to keep creating ace content for you :)

PPPS: We only build with Elementor Pro

[bobbypalmer]

Thanks for yet another well presented video, Imran. Your enthusiasm is infectious and you're a great communicator.

[aymonshik]

very clear and straightforward, saved me a lot of time, and definitely helped, thanks, bro.

[angelausytube]

Hey mate, I really enjoy your videos. Please keep up the good work. Regards from Turkiye

[Xanthi_S]

I haven't activated it yet, so at 5:12 my mind exploded. Now I know what I will be testing tomorrow at work

[andonisr]

Nice video!
At about the 25th minute, my settings wouldn't 'wrap the 2 containers side by side (I guess different versions by now of Elementor).
So, I eliminated the 2nd container (containing the icon), and just dropped it in the 1st container to achieve the 3 widget - row - design!
I guess that's cool too..!
Thank you!!!

[sulymanhammed]

Great work. I like it and I hope it will help a lot in the development.

[Xanthi_S]

I'm such a noob with flex so I'm taking notes! I do use Crocoblock however, and I see they have a flex option and I use it occasionally. But yeah, still a total Noob! So thank you for this.

[xsietex]

is it just me or every time you try to add a background overlay on a container it doesnt work?

[StreetFamzz]

Would appreciate if you let us know you put the image in a container at 23:38. I was confused why mine turned out differently but other than that great video learned a lot.

[lulugoh]

I've been struggling for an hour to put another container side by side with an existing container, and now I realise that we need to set the same line arrow at 22:40 before adding a new container. Thank you for your tutorial!

[KariposTheOne]

The Flexbox is great, but some Plug-ins like dynamic visibility are not compatible with the container right now

[dominmax]

Great explanation, thanks! I wonder how and when to use shrink and grow element option...

[salestequg]

Nice video. It seems, that you need more containers now to build that structure, that you could have built with sections. Does this not increase the DOM size? For example at 19:00 you used an extra container to align the Picture below the Header Text and the Button. Back when using Sections, I would have set the width of the Header Text and the Button to 50% each and then set the width of the picture to 100%. I would be happy to see a video where you explain a efficient use of containers to reduce the DOM size.

[KevsGuide]

some of my pages have gone wacko. people on the elementor FB group are saying we shouldn't be using containers on live site.

i tried turning the container off and my container pages went blank

[ajitjadhav]

Hello, I have container in that I have 6 container in a row and now I want to show 2 container side by side on mobile view how can i do it

[Castorelo]

One important thing - a convert feature is not actually converting it into containers, by rather adding containers on top of the previous structure. So for example if you had 2 sections with 2 columns in each and 2 widgets in each column, and you convert it, in the editor you will see 2 containers and then subcontainers. However, if you copy this converted container, you will realize that in fact a structure is: Section -> Column -> Container -> 2x subcontainers. So basically it is adding a lot of code. Load times are increasing and the results in GTMetrix are going down.

The best solution I found was to create a structure using Containers from scratch, and then only copying widgets from under a column (you don't have to do it one by one - hold ctrl and then pick the widgets you want to copy), click ctrl + c, then click on the desired container and click ctrl +v. This way at least you will keep widgets settings and styling.

The results are amazing - I got 99% for performance and 95% for structure (with caching though, but it wasn't ideally optimised) for the mainpage of the project im working on for a client.

Though there are some small glitches and incompatibilities with some external plugins, nothing major, very rare cases.

[thepurpleufo]

Thanks for trying to explain this...but it looks to me that this is a test to see how crazy someone is. Meaning that if someone checks this out, and thinks it's a good way to work, that person is crazy. This might be Elementor's last gasp.

[gautambedi]

Hi mate, I have one question so if we use container does it help the website to be more responsive or what?
Like I can achiever the same results with the columns than why do we exactly need it.

Really sorry if my question sounds stupid but I'm just curious
like I can achiever the same results with the columns than why do we exactly need it.

[GeorgeWebDevCy]

Nice explanation makes it simple for people that don't know flexbox. All builders need this yesterday :)

[David-zprx]

You should be a doctor you just cured my headache!!! you da best!