Elementor Flexbox Container Tutorial | Use It The RIGHT WAY!

[@Jim.Hummel]

Fantastic, Informative, and Detailed. This is the gold standard of video production that you do so very well. You pass along a vibe of confidence so that I feel that I can solve problems on my own which is the whole point of quality education. Thanks a million, Paul !!!!!

[@muhammadsaadmansoor7777]

you sir , in just 5 minutes, solved a problem i have been having for days in flexbox. Liked And Subscribed

[@careofthespartans7538]

I have seen many KZbinr’s talk about containers but non explained it like you did. Thank you

[@bjroci9857]

Absolutely brilliantly presented, I've spend hours with some other tutorials and been frustrated by their presentation, yours is so concise, to the point and I am learning fast! Thank you Paul!

[@Webcoreinteractive]

One of the best channels the presents the info clearly. No fluff. Straight to the point. Btw i could not get the aline auto to work like in sections. You solved that in two minutes.

[@dewolf.digital]

Absolutely Brilliant Paul - All i needed to know to start moving my sites over to flexbox containers.

[@4Mulator]

I just started building a new site with flexbox container and can honestly say, not going back to the old version! Learned something new today too! Thank you Paul!

[@dougpopejoy9605]

I appreciate that you covered how flexbox works with responsive design. thx

[@andrea6789]

You're such a gift Paul. Thank you so much for these perfect videos. I learn so much from you.

[@AbuIbnu-y7h]

Excellent introduction. Clear and to the point. Thanks!

[@golddrake6378]

Thank you for taking the time and effort to make this tutorial.

[@WPTuts]

No worries!

[@adrianlightfoot7341]

Brilliant Tutorial, well laid out description, a bit of a learning process ahead.

[@WPTuts]

Glad it was helpful!

[@JCConrad]

...learning to embrace Flexbox while I'm using Elementor. Thanks for the GREAT examples!

[@greggillespie4943]

Yes @jim hummel spot on. Paul, you are the best. Everyone can learn from you on this production. Thank you.

[@Malcyt99]

I love your videos, I'm not a developer but have managed to build a production site using your youtube videos on elementor and various plugins...... Thanks, Paul keep up the good work

[@jaoortega]

Another great one Paul C! Thanks for making this tutorial intuitive yet simple.

[@web-atelier]

Thanks nice video, at 21:45 you can also use the flex propertie flex-wrap: wrap so now the items should wrap.

[@MichaelSpackman]

Great video Paul. You kept it simple and educational. Thank you!

[@alanshaw7365]

Wow, a lot to take in will probably need to run video a few times but thank you for your comprehensive explanations.

[@74solla]

Great video, thank you so much. Now I try to get rid of all my superfluous nested containers, I made befor watching this outstanding video! ^^

[@ericj810]

At first I couldn't wrap my head around it, after plating with the containers on a test site and watching these videos I can now use containers to the full. I love this new system. Flex wrap and grow are a life saver. I was able to duplicate any design I seen and with very few containers on the page, way less then sections. Im ready to move on to live site with them. I think they are safe to acrivate on live sites now?

[@mbuguakaringa]

You explain so well. Thanks!

[@d.w.5144]

Thanks al lot Paul. Great Video, for me as a beginner in web design, every video helps me a lot. Greetings from Germany

[@yd3941]

Fantastic teaching!

[@genewilson81]

Thank you Paul! Very well explained and demonstrated! Another great tutorial.

[@WPTuts]

Glad you enjoyed it

[@Atulwebdesigner]

Thanks for the video, Paul. Useful.

[@QuaverloveStudio]

Before I start watching, that t-shirt is a KILLER! Now on with the show.

[@waltervos8537]

Thank you for this very informative tutorial!

[@franciscoperez-by3hh]

Thank you very much Paul, excellent tutorial.

[@theunifiedfield.]

Always clearly explained and well thought out. Many thanks for your help!

[@maddicryer4354]

Thank you so much Paul. This video has really given me confidence to keep learning Elementor Containers. I hope that it will become the norm sooner rather than later! 🙏

[@SampathIyengar]

This is Brilliant so well done !

[@warblog6165]

Resisting change to flex box but recognising I have to-bite the bullet I found this vid so so instructive - thanks very much

[@Marvelteecee23]

Very helpful, flexbox has always been my go to with HTML, CSS. Now being able to do it quite easily inside Elementor is awesome, thanks again Paul C...i appreciate it.

[@shoesngbayan]

Very informative. Thank you.

[@thebusinessexitacademy]

Thanks - Great explanation for a new user !

[@meshglider]

Thank You, Grow and stretch boxes as well as a few other things were a mystery to me. Sorted!!!

[@wpglob-wordpresstutorials]

As always very understandable format and content. Thank you for your fast updates and valuable content.

[@WPTuts]

My pleasure!

[@QuaverloveStudio]

Excellent! I had tried the converter tool on a previously built website and did not like the outcome. It actually reduces dramatically your ability to 'fine tune'. Great tutorial, Paul. Well explained! Certainly built my confidence!

[@zondigitalservices]

Thank you!

[@antonio0000x]

Excellent! Thank you!

[@spydergs07]

The Container function is a game changer for Elementor!

[@ekot0419]

Thank you very much for the lesson. I was scratching my head the entire night wondering why I can't align 2 containers within 1 container which is also inside the biggest container. And now I know that I did it all wrong!! Right before I built my page. Thank you.

[@Mike-ny6sf]

Just found you and have subscribe and clicked the like button. I really like your presentation style--so clear and orderly and straight forward. Very easy to follow. You explain things so well and cover each item thoroughly. Thank you for your efforts to produce excellent content.

[@RebeccaPerryLasVegas]

this is awesome, why am I just now learning about containers? ughhh, I'm on the late freight. Thank you for this. We're about to start a redesign of of our company sites and this is perfect. Thank you for the great tutorials.

[@sergeychalkov4]

Thanks for the great content! In me experience with Containers they all work fine, but there may be some rare unexpected quirks. For example when you paste a copied container from another page it may turn to columns and sections, or the "Convert" button may appear without any reason. Also, some elements are not yet fully supporting the flexbox alignment features... this all is hard to trace, but in general everything seems to work.

[@bartomiejbabecki5209]

i'm so mad. I'm in 3/4 complete huge, REALLY HUGE site, where i had to make all know elementor tricks, duplicating widgets with dynamic visibility, custom CSS, etc. so it looks good on all devices... AND NOW, JUST NOW they made this, witch solves almost all problems and could save litterally hours of hard work. I love this container blocks and hate it at the same time because of timing.

[@madsklitgaard]

Really loved the tutorial. At 5:55 you mention another tutorial "Getting Started Elementor Container" being linked in the description, but I can't find it anywhere?

[@WPTuts]

Here you go: kzbin.info/www/bejne/sHSzn6uXbJuNo8k

[@elevateyourcreativeness]

This was yet another amazing video tut Paul! Great to see Elementor trying to play catch-up with the container element. My question is, with all the dev teams they have, why is both the container element and a significant query loop builder is taking so long to release as a stable update to their current product! Glad to see their improvements with some of the dynamic data packs, but shouldn’t the focus be on the very things that will truly enhance the correct layout and building process that should be standardized?

[@vladimirm3271]

Thank you! And if we wanted to put a description under the logo, would we still have to make a separate container for them?

[@humanskill]

Great presentation! I really enjoy your presenting style and always learn something new. Keep up the great work!

[@WPTuts]

Thank you very much!

[@jdy98p]

Since it's still in alpha, would you recommend using containers on new sites/pages?

[@emailjough]

I recently built an entire client site using containers. I knew I was taking a risk. It went well (I greatly prefer building with containers vs sections/columns) but there were cases where Elementor addons, like JetElements, had some widgets that would not work properly inside Containers. So beware. And once you turn containers on, you can no longer add traditional sections/columns - they're gone. So I couldnt use the old sections/containers in places where widgets wouldnt work with containers. Had to find a different widget solution.

[@johnpowell1955]

Thank you :)

[@gordonbrownlee4436]

Thanks Paul, this looks like it's the way to go in Elementor.

[@Who.Said.Photography]

Thanks, Paul - tons of great info in the video. 👍

[@WPTuts]

Very welcome

[@jcarlin596]

Very useful tutorial Paul.

[@BestMLMDXN]

Dear Sir, Very Good Evening. Container is an awesome feature to be rolled out. Thank God , Elementor is coming up with innovative ideas. It seems Elementor is listening to users. You explain so well that complicated functions and steps becomes easy to understand and apply. I hope you will be coming up with more informative videos. Keep yourself safe and healthy. With warm regards, Yours student, Vivek Kumar ( Dehri On Sone, Rohtas, Bihar, India )

[@Joe-fn9mi]

18:51 - This is part that I don't quite understand with flex boxes. How everything is pushed hard up to the sides in Tablet and mobile view. Surely there should be some space by default? I know the fix is easy, as you did, by adding some pixels to the left and right padding of the elements or containers. But this doesn't feel right to me. The spacing should be consistent throughout the site. What if I want to change the spacing... then id have to go through thousands of elements to change it. With the old column set up, there was a 15px space by default. And to get rid of it, you'd have to go into the padding of the column and set it to zero. I feel like this should be the way Containers work? Or am I miss understanding something...

[@andredewit6424]

Thanks, this was very usefull.

[@RickAltman]

This is an outstanding video and I am inspired to use Containers the way that the universe of geeks intended for them to be used. I do have one question that was not addressed in this video: what if I want to create a two-column layout in which an image and a line of text are to be stacked and aligned to the left side and then a third element aligned to the right side. If it is one element on each side, I can readily see how I can do that with just one container, but the presence of three items -- two in the first column and one in the second -- makes this less clear. Can this be done with a single container or is it better if I create two containers?

[@excel4u2]

You are Great, Thanks

[@RowlandAgacheta]

Paul is on the class of his own

[@jonimillar]

I have been struggling with this as well, because I was using a heading, then a text, then a button, which necessitates using inner containers if I wanted those stacked and an image or something beside. The use of CTA is a huge tip because then… no inner containers needed! The one thing I am still frustrated with is when I have two containers side by side, and I want a 1/3, 2/3 situation so one is wider. If I drag the columns to do this, they look good on desktop but when I go to tablet view, the right column is off the page. I know I can wrap it but there’s plenty of space on tablet for two columns but I’ve tried everything and can’t get it to work. Even if everything inside is just set to default, no extra padding etc to be pushing it off the edge.

[@olesturm262]

Where can I find the video you refer to at 5:53?

[@alan-muscat]

Much appreciated.

[@inlumina_punctro]

At 12:37 When you set negative margins to hero container, why is it that it covers the logo, but not the navigation menu? Aren't they-the logo and the navigation menu in the same ”layer” container ?

[@ericj810]

I been playing with it on the elementor playground site. Its tricky but im starting to understand it quickly. Had trouble stacking button widgets but getting there with it. I wish i kept the sandbox site up, but its a very kool feature, I can see the potential and less request made per page.

[@rebelinc]

Why not use wrap for the mobil cta?

[@JonSmithchannel]

Nice video thank you. Im always torn about how much time to spend on desktop layouts as so much traffic is mobile.

[@flowmaintenance]

Thanks For This Video, I'll practice this a bit right now. Would you recommend using this right now for live projects?

[@WPTuts]

Not at this stage, no. It’s still in Alpha and has some issues.

[@stevesloan5935]

Nice video. You delivered helpful insights in a well-organized way. What are the caveats of using containers to design production sites as of the current Elementor version? I'd like to see more use cases/design examples that take advantage of containers to minimize the generated code.

[@AndresBurbano]

Great! Thank you.

[@WPTuts]

You are welcome!

[@rafikiAli]

"Paul C" for the win! TY!

[@darreng-g]

Great video, very informative will be starting with Elementor soon. When does does this feature go live?

[@bbontubecentral1]

Can you show us how to add pages in the nav menu? Are you building this in Wordpress or in Elementor? Do you have a link that covers this? Thank you

[@DimitriosMaroulis1987]

Really nice examples and tutorial. And this video was uploaded a year ago! I am a little worried because I need to rebuild a business listing website with Elementor containers and I will use this video as an example. :)

[@Teuser737]

You sound pretty enthusiastic Paul. Is there any data of a comparison in speed between the old and the new way setting up a page?

[@WPTuts]

Speed difference will really be down to the way the page is designed and it’s complexity really. Looking at the code generated, there’s about a 30% reduction, so that should definitely help to reduce page load times.

[@erich1998]

The flexbox is the BEST thing they've done with elementor.

[@UKFR]

Useful video, thanks. This should make certain types of layout easier and reduce code. Like many Elementor users I love the features but not the bloat.

[@WPTuts]

Yes, you are right

[@kaybecking2244]

Should we already use containers on production sites or wait till it is out of experimental?

[@WPTuts]

Personally, I wouldn't use them while in the Alpha stage. Maybe when it comes to beta, it will be a little more robust.

[@mo3azsport222]

Good Job 👍

[@kahchon87]

I'm having a problem, I can't set 2 container (in a row) to 50% width for each container with margin on the side, if I add margin to the left or right, the container will become stacked instead of next to each other in the same row (with Wrap turned on at the parent container)... to make it side by side, I have to reduce the container width to less than 50% in order to compensate the margin that I have added to the child container... quite annoying... Do you have such problem?

[@morizanova]

Smart structure tips using Call to Action ! Would you share with us another widget from elementor which possibly simplify our container structures instead using other widgets?

[@mediadesign8231]

I tested the Performance of the one-page page for the 2nd time, got 96, amazing. 😁

[@adied7725]

Paul, quick question... Why stack conent in mobile view ? when a majority of mobile conent are swiped left or right.. I world love to know the best way to set that up using the new containers?, please

[@pierrecastermans873]

Thanks a lot for all your fantastic tutoriels...! I really learn a lot with you! I've got a very stupid question :( : What's the name of the police you use for your first header on this video? I tried to find it but without any success...

[@estudetrade]

Incrível! Ainda mais CC em português! Parabéns!

[@thenewyorkean]

thanks mate, was searching for the "container".. Elementor apparently has grown so much in size that even not that recent "functions" like flexbox, they take time to incorporate. Being a more code-savvy wannabe user, I'm testing the Breakdance builder actually

[@LoriSatterthwaite]

I’m curious if this will make it easier to do a transparent header in elementor without ridiculous negative margins?

[@I-am-Veritas]

Hey Paul Thanks for another great video. I'm in the process of developing a Directory site from scratch with Crocoblock Suite. Would you recommend I wait for elementor to release Container? Or is the experimental safe to use now? Thanks again Hope you have a great weekend brother Trevor in Canada

[@thesharkyfire]

I'm using flex containers for a client's site, do you think it's too soon for that or am I good?

[@WPTuts]

I don't think I'd be looking to use them for clients sites yet. They are still in the Alpha stage and have bugs and quirks galore.

[@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

[@yudayuda]

Yet another great tut - thanks a lot Paul! One question comes to mind: in which cases do you think the sections/columns structure will be better suited than the new container?

[@WPTuts]

Once the Container element is released, the section and inner section widgets will be removed. So, they won't be available and not something I'd recommend switching between once it becomes more stable.

[@yudayuda]

@@WPTuts Thanks for the clarification! I didn't understand that, and it makes sense.

[@Heriterrific]

Hello, how do I put the navigator widget on the side?

[@davidwalls2304]

Paul, thank you VERY much for this video. I was originally planning to use the "Convert" option but this video has opened my eyes. #Question - have you tested this flex box model with JetEngine to see how listing work (just wondering)?

[@WPTuts]

Great to hear! No, I haven't tested it with JetEngine, but I can't see any reason to expect issues. :)

[@dan_kay]

Do you have any idea when this feature is going to enter the beta phase?

[@WPTuts]

Sadly not. Elementor are not very open about these types of things.

[@dan_kay]

@@WPTuts Yeah, I figured. There's no info to find anywhere online yet. Waiting it is :) Thank you for your amazing work!

[@고재영-f1g]

How do I adjust the flex box container column spacing

[@kumudauppar8649]

Hello sir, My site title is showing as H1 tag. Should I change that in the HTML code?

[@bazeto]

as its still in the beta when it practically available, cause we have to activate it great tutorial I am way too back but info.

[@aabelow]

Have you noticed when trying to add a video as background that the overlay doesn't work?