How To Use The NEW Elementor Container | Flexbox CSS

[@yacovfischzang7085]

Paul, you are always The King of The Hill on Elementor's ecosystem. Always so well explained. Every single video I watched from WPTuts got me to the point. Thank you for your excellent work. Kudos!

[@justgosee]

I rarely watch videos to figure anything out but this was extremely helpful to grasp and understanding. I'm confident this will make my life much easier. Well done and thank you!

[@kerawelt2008]

Many thanks Paul ! Once again I marvel at your ability to get the hang of such ,not-so-easy-to-master tools in no time.

[@WPTuts]

My job is to make your job easier. 😉

[@kerawelt2008]

@@WPTuts Actually you do more than succeed at it.

[@michaeloeser]

Best quick tut on the new flex container element I´ve seen so far. Subscribed and hope for more awesome stuff.

[@WPTuts]

Thanks Michael and welcome aboard :)

[@davidjavierriveraquiroz6922]

Desde la República de Panamá, gracias por su trabajo, excelente maestro.

[@AntiqueTraveller]

Such a great tutorial, as always. Would love to see a continuation of videos like this one, using Flexbox to further demonstrate how to create more complex layouts and even nested layouts - would be incredibly helpful if you'd consider doing so.

[@johnravi3887]

Hi Paul, Thanks a lot for sharing this! I have been looking for a tutorial all over KZbin, and after watching some of them I was more confused. Thankfully, I found your video. I learned several things from this share, and I think it will be a great resource for several of my friends as well. I really appreciate you sharing this. I will definitely be following your advice and tips and hopefully, I can learn to use it optimally.

[@juliegubler8972]

So well explained. Easy to follow even though the NEW Elementor Container is even newer than when you created this video. Thanks for explaining this better than Elementor did.

[@anidongh-edits]

I needed the concepts and wasn't able to find any from other channels thanks to your tutorial i am able to get the concept i wanted. Nice work, Keep it up...

[@nielsnet4169]

Paul... when I'm looking for tutorials and I see your face on the thumbnail I already know that I will have success ! You are my new best friend ! =D

[@genemoore1]

Thanks Paul. Fantastic job dude. I've been dreading this change, but after seeing this, I think I'll be able to sleep tonight.

[@WPTuts]

Haha, I know what you mean. It’s a big change to how Elementor has worked since the beginning.

[@Nunn_the_wiser]

Great video Paul. I’m very happy to see Flexbox

[@dinopelle]

Excellent primer. Thank you, Paul. We all have our issues with Elementor but when a new feature/method reduces code and increases performance, it should be applauded.

[@gordonbrownlee4436]

Thanks Paul. Another very informative video. The options seem endless in the Container(s). Looking forward to using it.

[@madelinecanzani]

This is a great intro to flex containers, thanks!

[@pixeldynamics283]

Nice one for this Paul, super informative, really looking forward to this feature hitting the live version for use on production websites!

[@LudovicCharlier]

Great video Paul, thank you very much.

[@andonisr]

Thanks so much, Paul for yet another great explainer video! I was a bit hesitant to start implementing it - but now I feel much more confident!

[@WPTuts]

My pleasure. Glad it helped. 😁

[@ZaahirJappie]

Best tutorial so far about the new container model. This is pretty exciting. I went from webflow to elementor for certain reasons and flexbox was hard to leave behind when moving over. Big ups to elementor for giving us this option soon.

[@ManuelWillCom]

Your certain reasons moving from webflow to elementor would interest me! :)

[@ZaahirJappie]

@@ManuelWillCom Hi Manuel. Webflow is excellent, but a bit expensive for smaller clients and certain payment portals are not supported in my country (South Africa). I really like having flexibility hosting wise also. Those are my main reasons basically. Saying that, I do feel WP gets a bad wrap and my experience using Elementor has been good thus far (since Jan 2021) What are your feelings?

[@JoseRamirez-hd4ir]

Paul, thank you for sharing this video, you are really good in explaining complex things, now I have a better understanding about the container feature!! Thank you my friend!!! 🙏

[@franktielemans6624]

They did a good implementation this time, the only thing that's missing imo is a calc field in the width/height settings.

[@Jornes83]

And also lacking class styling.

[@RoniStudio]

And also Wrap feature.

[@Nima-Norouzi]

Hi and thanks for this tutorial, I would like to see a comparison between the traditional section and the new Flex box container regarding how code is optimised with the same layout design...

[@SuatBarlak]

Worked with is for some time now.The container is literally one div that is set to display: flex. So way less DOMs overall and less clunky to customize with css. As for the widgets. They are seemingly unchanged in their nesting but I think this could possibly change our at least I hope so(old structure: selector -> Elementor-widget-container -> Elementor-image-container etc.)

[@prokassim]

Amazing content and tutorial, thank you very much for sharing and always keep us updated with the latest on wordpress and all related !

[@alimranmayeen9156]

Thank you so much, Man ❣️ Your content always help me to be proactive. 🥰

[@iamthekwan]

Very well structured. Thanks Paul

[@RichardWadeUK]

Oooooh... My boxes are going to feel so flexible! Great demo Paul (as always). It's not as scary as it sounded in the original announcement

[@WPTuts]

Lol, it does take a little bit of getting used to as there are now options for the container, nested containers and widgets. So, you could easily get into a whole world of confusion when troubleshooting things not displaying how you expect... ;)

[@jenniferward6821]

I love flex box and I love elementor so if they come together that’s excellent - thank you for this

[@ajmalleonard]

Incredible Tutorial , Well explained , Thanks for your helpfully channel

[@yourfriend547]

Thank you very much. You explained it very easily

[@MrBalloonatic]

I love how you manage to keep on top of all the latest changes in Elementor Paul. I think these are going to help so much with the div-ception and should hopefully help people to design mobile content more easily, and maybe make them think more about the importance of delivering the same data to all users no matter their browsing device. Do you think the reduction of divs will help with making elementor sites more friendly for people using screen readers?

[@WPTuts]

I don't think it'll hurt. But, I think the impact will be relatively minimal as there are still a lot more divs created than would be needed to manually create similar layouts.

[@WPTuts]

@@glencoe1266 yup, it’s insane the amount of divs for such simple layouts.

[@rocaivan]

@@WPTuts Why they add so much divs? What is the reason?

[@ranybolek8374]

Hi, do you still do not recommend using these on live production projects?

[@Crowedge]

Awesome! Thanks for creating this great tutorial!

[@WPTuts]

My pleasure Mark. :)

[@darreng-g]

Great video Paul! Do you know when this is released fully?

[@StooCambridgeArtist]

Great insight as usual on the new stuff! Cheers dude! 😎👍

[@WPTuts]

My pleasure. :)

[@awobotuoluwatayo9677]

Thanks Paul.

[@ameliehubert4206]

Thank you so much for this tutorial

[@plan-ng]

Thanks Paul

[@jpp110680]

Great explenation

[@timu6129]

Can you use the Container Feature on a live website now? Thanks for the video!

[@Vikram.Thakker]

Elementor is widely popular for its intuitive UI of sections, inner sections and columns. Containers pose a big learning curve.

[@andyvonbusse3503]

I use Bricks, which has flexbox, and I never was sure exactly how it works. This translates virtually directly to it. Thanks.

[@WPTuts]

Yup, Bricks has some extra options but once you get Flexbox it should translate to any page builder using it. 👍

[@christosdaglis1163]

@@WPTuts Take a lesson on CSS Flexbox and you'll understand exactly how it works, regardless of page builder used!

[@sergeychalkov4]

Thanks for the great explanation. I still wonder if I can use it on a website I am about to make. You know... I will give it a try in a real project. Hope I won't regret.

[@StevanOvich61]

Nice intro to containers in Elementor Paul. Has changed a bit since your first vid. May well have a play around with this Beta myself. Be nice to see comparison on code saving v the legacy sections and columns and how this will affect load times ...

[@WPTuts]

Looking at the code from the same basic container and a header, there is about 50% less code over the older section element. I would imagine that would scale relatively proportionally as the design increases in complexity. A good saving, but once the final version is released, we'll be able to get a better idea of the real world savings.

[@jipasveld2356]

Thanks Paul, very useful explanation. Now that containers are out of beta I am planning to use them. I do have one question remaining after this video: if I want to add design elements to existing websites that I have made earlier (so with sections), but do not have the time (yet) to turn all older sections into containers, would it still be okay to turn on container mode and add the new design elements as container "next to" the section elements on the same pages? Or is it better to only use container mode on websites where I build the complete layout based on containers?

[@WPTuts]

You can combine both methods on the same page, so you should be fine mixing them until you have the time to revisit and change things to containers for the older design elements on your page.

[@frankstone]

I feel more prepared now for what will soon be a better way to format a website. Do you have a guess when the container model will be out of beta?

[@nicolenixxon]

This article will be very beneficial for anyone new to WordPress who wants to start building their own websites. Using ElementsReady might speed up the process and make it simpler for beginners.

[@aledianin]

I loved this tutorial. Thank you very much. Have you tried editor X or Webflow? What are you thoughts? .... Just a suggestion fora video when you run out of ideas ( which is almost impossible 🤣) cheers mate. Tks again for the vids

[@WPTuts]

I have looked at WebFlow recently, and I like what it offers. I'll certainly be taking a look at it in more detail this year. Editor X is something I looked at when it was released in beta, but never really got stuck into it to be honest.

[@motioninmind6015]

Fantastic, thank you!

[@baut6572]

Thank You, it's best tutorial

[@abdullahX001]

Looks very good... nice competition for Oxygen.

[@Atulwebdesigner]

NIce video, Paul.

[@michaellasambouw]

Nice tutorial Paul, i love it the major progress on Elementor. Btw, which version will coming up?

[@geehammer]

Have you tested load improvement times Paul?

[@michaeloeser]

I wonder how to set elements (e.g. Icon Boxes) inside three flex-box "columns" to have an equal height.

[@ManuelWillCom]

You might just put them side by side into one parent container.

[@michaeloeser]

@@ManuelWillCom Makes sense. But does that really work that easy?

[@davidfally5449]

Could either give them a min-height or play around with vertical alignments (align-items: stretch) as it would be in pure CSS

[@gonebymidnight2881]

now it’s in beta state and labelled stable. Would you use it on a live site now?

[@bgckhinkali2421]

Paul, in your video you say don't use this on a live site - is this still the case June 2022 - thanks for making these videos they really help me to make better websites Al

[@WPTuts]

Yes, very much so. It's still in an Alpha build and has bugs. Personally, I wouldn't risk it at this point in time on a live site unless it wasn't an important site.

[@jmsaylor22]

I have wanted this feature since I first started messing around with elementor. I hope they bring this out of beta very soon for us to use.

[@subtronik9311]

Elementor is missing a figma style grid layout for alignment, and their help documentation seemed to mock designers for needing this. Luckily the happy addons plugin has one. Have you done any videos on the happy addons plugin?

[@pedromiguelpagan-rivera8970]

Thank you so much.

[@subtronik9311]

Great video, cheers. I test everything on live sites but lock the site under an 'under construction' plugin page so nobody can see the sites apart from my clients. That way I can test everything on all the major browsers to see if the site is displaying or working properly. I don't think this has any negative impact on SEO, but need to check.

[@toddblackmon6801]

Paul, I know you said do not use this on a production site but would you feel comfortable using this brand new site?

[@Daemon1995_]

ty, very helpful video.

[@luqman_azeem]

Could you make a video on displaying overlays on when a video is paused?

[@jrmatlanta736]

Hi Paul, when you added a container then added a background full width I noticed there is still a white dotted box inside the container. If there is no columns or inner sections in the new container, what is this white dotted box?

[@WPTuts]

At a guess I'd say it's the default padding that's added to every container you add in Elementor. This can be disabled in the settings but is on by default.

[@TK-kp8kt]

Thanks Paul. Is it expected this will improve the overall speed and performance of Elementor sites built with the new Flexbox?

[@WPTuts]

Yes, it certainly should providing their is some degree of thought put into how the pages are designed using the Container widget. By how much would really depend upon the complexity of the design and also if the rest of the page is optimised to provide the best level of performance.

[@baut6572]

The next tutorial could you please explain us about the Video box widget and video widget ? Thanks

[@dseodorotahojda2354]

Thanx :) it's great video.

[@mfrapp20]

Great tutorial! Any ideas on when this will be officially available? I’m currently working on a website refresh and would love to use this feature from the get go when I start implementing my plans

[@WPTuts]

It's Elementor, so it could be any time or never. Hopefully, as this is moving into the public beta, it shows an intention to release it sooner rather than later. But, no indication of when this may be sadly.

[@mfrapp20]

@@WPTuts makes sense! I guess when it comes, the convert option will help make the transition relatively quick. Fingers crossed this comes soon! It’ll be a game changer for Elementor

[@ChukwubuokemOdiaka]

Can I add a source query a container and use it as an archive?

[@deyoglines]

This is super helpful. Quick (maybe dumb) question, when I convert do all the tablet and mobile settings convert also or will I need to go back and redo? I know there might be some tidying up but for the most part it converts all setting, yeah?

[@yasnelsaborit3943]

How is the space between the text and the image reduced at min 21? I've been testing the container and it's one of the things I don't understand. thank you

[@rcrocker9333]

Love Elementor Container widget. When is it expected to be released?

[@WPTuts]

Who knows! Hopefully not too long, but it's Elementor. So, it could be a month it could be a year it could be never.

[@marathonair]

Why can't we use this on a live staging site? I mean it's a different (test) page. Will just having this container option active cause problems with other pages??

[@Goblue2024]

Awesome video Paul! Do the new flex boxes have a setting to do overflow hidden images? I always have issues with scaling images well for page sizes outside of the breakpoints

[@melcrossland]

How come they removed the option to stretch a section/container? Is there still a way to do this?

[@sidra7089]

you are great man

[@elevateyourcreativeness]

Paul has there been any solid indications of when this is supposed to be released into the public? Thanks!

[@WPTuts]

Sadly not. It's Elementor, so it could be now, it could be a year, it could be never.

[@AnilAgrawal]

Paul, great video once again! Side Q: I noticed the mouse pointer is bigger than normal which is easier to see/follow. This gave me an idea why don't I do it. When I do screen recording, the recording does NOT show the bigger size. Did you have to increase the pointer size in your video editor after the fact or? Thank you!

[@WPTuts]

The pointer scaling is an option in ScreenFlow and I agree, it makes following things easier, especially on a mobile screen.

[@AnilAgrawal]

@@WPTuts Thanks for the tip on the option in ScreenFlow. I use ScreenFlow, but never thought of pointer scaling

[@WPTuts]

@@AnilAgrawal it’s super handy and makes following onscreen actions so much easier. 😁

[@Zackbingzhi]

Hi, why is my container editing interface different from the one on the video?

[@dominmax]

Please tell me that you can save the "parent" flex container as global. Is that possible?

[@matthewmccallum243]

How do you make two items on mobile align horizontally? I.E. mobile header with a logo and dropdown menu side by side?

[@thijs7504]

Paul, thanks again for a great video. You made it look simple, and when trying, it was! Two questions; 1. You spoke about a more complex use of the flexbox, will you be making a video about it? 2. When will we the hoody be available for us😄?

[@WPTuts]

Yes, once the Container comes out of beta, I'll create some content on how to get started using it for full page designs. Soon, I promise ;)

[@thijs7504]

@@WPTuts looking forward to both. Thnx

[@Simon-sly]

How are gutters managed now? In your video, each container butted up to the next meaning there were no gutters. Do we have to set them as padding on every individual container?

[@WPTuts]

You can use the Elements Gap slider to manage space between the nested containers.

[@alvarez958]

Thank you !!!!!!!!!!!!!

[@deanazelinova5103]

I would like to know if all templates and blocks in library will be recreated to containers, or just leave on sections for eternity.

[@WPTuts]

I very much doubt it. More likely they’ll stay as they are and you’ll need to use the covert option.

[@deanazelinova5103]

@@WPTuts Yes I think it will be like that.

[@DaJyzor]

Bro..Did you saw the new Zion Builder version 3.0 ? it is sick...Elementor is history.

[@jamesgriffith5128]

Is it safe to use Elementor Flexbox Container now to build "live" websites in September 2022? And how much quicker does the web pages load using Flexbox Container rather than the traditional way of creating pages with Elementor? Thanks

[@GinaAnagnostopoulou]

How faster is the container, compared to the previous method? I mean, is there a way we can actually measure it? Maybe create 2 pages with the same design, one using the old way and the other using containers.

[@WPTuts]

In my basic testing, the new container is about 50% ish less code for the same basic layout.

[@GinaAnagnostopoulou]

@@WPTuts Amazing improvement. Thank you for your feedback Paul.

[@rinleeds]

Amazing video, thank you so much. Could you show me two things if possible - 1) how to create a masonry layout with say 9 blocks of text. 2) how to set the text to read sideways. One of your layouts would have looked good if the text was sideways. eg at 1820

[@dominmax]

Please, next time tell more about Wrap, Shrink and Grow. I also wonder if the motion animation will be more precise thanks to anchor points? (I miss the control that Divi has in this matter)

[@Releasly]

Can you add Background images to container?

[@WPTuts]

Yup. Any container can have a background set on it. Images, colours, videos, etc.

[@PatrickStolwijk]

Hi Thanks for the tutorial. I install the free version of Elementor to try the container. Only there is by experimental not the option "container" visible. Is this only in the purge version? Or do I something wrong?

[@WPTuts]

I believe the Experimental features are part of the Pro license.

[@Shahzad_Don]

I did not find this container widget in my elementor pro. You are using DEV. Is it different from pro?

[@WPTuts]

The Container widget is an Experimental feature and needs to be enabled in the settings. The Developers edition includes some additional features, but is still freely available for anyone to install.

[@Shahzad_Don]

@@WPTuts Thanks Sir

[@mohamedbouslouh7536]

Thanks

[@BernardEbuehi]

how do i close the gap between two containers

[@loge9981]

so but how much bits are we actually saving by using the flex box? like how much reduction in website size roughly??

[@WPTuts]

From a code reduction point of view about 25-50% for each container over the previous Section method. From an overall code point of view for an entire page, that's something that has way too many variables to predict without seeing a design and what plugins are installed.

[@webceterauk]

Nice vid, as usual. However, I agree with others that flex is really kinda old hat anyways. Any news from Elementor about css grid?

[@ahiadh]

can we still put a container inside a container?

[@WPTuts]

Yup, you certainly can. :)

[@ahiadh]

@@WPTuts thank you very much!

[@kaisjrad]

Hello Paul , can you please create a tutorial , on how can populate (Elementor form field )/ or / (Jet_engine Form Field) Dynamicly with data from Jetengine loop listing ? I mean if user is on Archive Post (Created with Jet Engine loop + listing grid widget ) and each single listing loop has 2 buttons: 1-/[view details] -- redirect to single post page detail 2-/[Request Info] (Subject of Tutorial) The [Request Info] button will Open Popup that contain a form Elementor Form / Or JetEngine which thier fields will be autofilled by informations from the single loop it self for exemple the post_name / Post Category of the loop I think that this need to configure the the [Request Button] of the loop to send Dynamic attribute to the form popup , but do you have any clear idea for how to do this using , JetEngine / Or Dynamic OOO , or even elementor pro it sel ?? or can you make a tutorial to explain how to do this I hope you understanded my question , thanks in advance

[@salim-designer19]

Thanks puddy. What do you mean just use flexbox on a test site not in a Live production.

[@WPTuts]

It's not recomended to use Elementor Experiements on a site that is live (i.e. a site that is available to the public) as opposed to a test site (one that isn't available to the public.

[@salim-designer19]

@@WPTuts thanks but i think i can build my own website if i wanna change my old design to new design using flexbox container.

[@ArmenAgaronian]

no experiments tab on elementor settings