How To Use The NEW Elementor Container | Flexbox CSS
ฝัง
- เผยแพร่เมื่อ 10 มี.ค. 2022
- As Elementor gets closer to releasing the new Container Widget and opens up more design options with the Flexbox, here's your getting started guide.
The new Elementor Container is going to fundamentally change the way in which we design with this WordPress page builder.
To ease the transition, my beginner's guide to getting started with the Container widget should help those transition blues.
If you want to see how to speed up the process, you can also watch my recent guide to using the Converter tool for Elementor to automatically convert your existing designs to the new Elementor Container.
Container Convertor: • Elementor - Convert Ex...
First Look at Flexbox: • Elementor Flexbox Cont...
✅ ELEMENTOR PRO: jo.my/1s0t2s2
Take your WordPress website and skills to the next level!
► THE TOOLS I LOVE ◄
If you like what we do and would like to support us, please consider using these affiliate links when purchasing any of the plugins covered in our tutorials. Thank you for your support.
► EXCLUSIVE WPTUTS DISCOUNTS ◄
✅ WPVivid Backup Pro: jo.my/vividpro (use WPTUTS20 for 20% off)
✅ Project Huddle: jo.my/etafyp (WPTUTS for 20% off - Exclusive)
► MY PREFERRED HOSTING PROVIDERS ◄
✅ CloudWays: jo.my/1feeng8
✅ SiteGround: jo.my/sgwptuts
► WORDPRESS VISUAL PAGE BUILDERS ◄
✅ ELEMENTOR PRO: jo.my/1s0t2s2
✅ Brizy Pro: bit.ly/2Ji97r8
✅ DIVI 3 Page Builder: bit.ly/2HiiDcE
► WORDPRESS THEMES ◄
✅ GeneratePress Premium: bit.ly/2Ydn1SE
✅ OCEANWP: bit.ly/2fRHBr0
✅ DIVI Theme: bit.ly/2G8JMiA
✅ Astra Pro: bit.ly/2zruoKn
► WORDPRESS TOOLS ◄
✅ SMART SLIDER 3: bit.ly/2G0G1vB
✅ CSSHERO: bit.ly/2qbrRl6
► WORDPRESS PLUGINS ◄
✅ SEOPress Pro: jo.my/seopress
► SUBSCRIBE ◄
bit.ly/2rX7rhu
► LETS CONNECT: ◄
👉 Twitter: / wptutz
👉 Facebook Group: wptuts.co.uk/facebook
SUPPORT: Our website offers additional information and perks. Please check it out! wptuts.co.uk - แนวปฏิบัติและการใช้ชีวิต
![[TH] 2024 PMSL SEA W2D4 | Summer | โอกาสสุดท้าย ของสัปดาห์สอง](http://i.ytimg.com/vi/aswciGrYovo/mqdefault.jpg)
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!
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.
Hi Paul,
Thanks a lot for sharing this! I have been looking for a tutorial all over TH-cam, 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.
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
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!
Nice one for this Paul, super informative, really looking forward to this feature hitting the live version for use on production websites!
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.
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.
My job is to make your job easier. 😉
@@WPTuts Actually you do more than succeed at it.
Thanks Paul. Another very informative video. The options seem endless in the Container(s). Looking forward to using it.
Thank you so much, Man ❣️
Your content always help me to be proactive. 🥰
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!
My pleasure. Glad it helped. 😁
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.
Amazing content and tutorial, thank you very much for sharing and always keep us updated with the latest on wordpress and all related !
Great video Paul. I’m very happy to see Flexbox
Best quick tut on the new flex container element I´ve seen so far. Subscribed and hope for more awesome stuff.
Thanks Michael and welcome aboard :)
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!!! 🙏
This is a great intro to flex containers, thanks!
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...
Very well structured. Thanks Paul
Desde la República de Panamá, gracias por su trabajo, excelente maestro.
Thank you very much. You explained it very easily
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.
Your certain reasons moving from webflow to elementor would interest me! :)
@@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?
Incredible Tutorial , Well explained , Thanks for your helpfully channel
Thanks Paul. Fantastic job dude. I've been dreading this change, but after seeing this, I think I'll be able to sleep tonight.
Haha, I know what you mean. It’s a big change to how Elementor has worked since the beginning.
Awesome! Thanks for creating this great tutorial!
My pleasure Mark. :)
Great insight as usual on the new stuff! Cheers dude! 😎👍
My pleasure. :)
Great video Paul, thank you very much.
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
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... ;)
I love flex box and I love elementor so if they come together that’s excellent - thank you for this
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
Thank you so much for this tutorial
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...
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.)
Elementor is widely popular for its intuitive UI of sections, inner sections and columns.
Containers pose a big learning curve.
They did a good implementation this time, the only thing that's missing imo is a calc field in the width/height settings.
And also lacking class styling.
And also Wrap feature.
Fantastic, thank you!
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.
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.
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?
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.
@@glencoe1266 yup, it’s insane the amount of divs for such simple layouts.
@@WPTuts Why they add so much divs? What is the reason?
Thank You, it's best tutorial
Thanks Paul.
Nice tutorial Paul, i love it the major progress on Elementor. Btw, which version will coming up?
Great video Paul! Do you know when this is released fully?
Thanks Paul
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 ...
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.
you are great man
Great explenation
Thanx :) it's great video.
Thank you so much.
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?
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.
NIce video, Paul.
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😄?
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 ;)
@@WPTuts looking forward to both. Thnx
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.
Thank you !!!!!!!!!!!!!
Can you use the Container Feature on a live website now? Thanks for the video!
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?
Looks very good... nice competition for Oxygen.
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)
I use Bricks, which has flexbox, and I never was sure exactly how it works. This translates virtually directly to it. Thanks.
Yup, Bricks has some extra options but once you get Flexbox it should translate to any page builder using it. 👍
@@WPTuts Take a lesson on CSS Flexbox and you'll understand exactly how it works, regardless of page builder used!
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
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.
@@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
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
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.
Nice vid, as usual. However, I agree with others that flex is really kinda old hat anyways. Any news from Elementor about css grid?
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?
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.
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
Have you tested load improvement times Paul?
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?
Could you make a video on displaying overlays on when a video is paused?
Thanks
The next tutorial could you please explain us about the Video box widget and video widget ? Thanks
now it’s in beta state and labelled stable. Would you use it on a live site now?
Thanks Paul. Is it expected this will improve the overall speed and performance of Elementor sites built with the new Flexbox?
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.
Bro..Did you saw the new Zion Builder version 3.0 ? it is sick...Elementor is history.
Hi, do you still do not recommend using these on live production projects?
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
Paul, I know you said do not use this on a production site but would you feel comfortable using this brand new site?
I had been extremely frustrated with the section layout in elementor for years and I was about to say screw it and build a website in Flask, but then I noticed the flex-box experiment pop up in the elementor settings. I started using it, and I'll never go back. This has completely changed my outlook on elementor, and I'll happily say that I'm going to stick with wordpress and elementor until I outgrow the platform.
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
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
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!
The pointer scaling is an option in ScreenFlow and I agree, it makes following things easier, especially on a mobile screen.
@@WPTuts Thanks for the tip on the option in ScreenFlow. I use ScreenFlow, but never thought of pointer scaling
@@AnilAgrawal it’s super handy and makes following onscreen actions so much easier. 😁
How do you make two items on mobile align horizontally? I.E. mobile header with a logo and dropdown menu side by side?
Please tell me that you can save the "parent" flex container as global. Is that possible?
Can I add a source query a container and use it as an archive?
Love Elementor Container widget. When is it expected to be released?
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.
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
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.
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??
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?
I believe the Experimental features are part of the Pro license.
Paul has there been any solid indications of when this is supposed to be released into the public? Thanks!
Sadly not. It's Elementor, so it could be now, it could be a year, it could be never.
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?
You can use the Elements Gap slider to manage space between the nested containers.
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?
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.
Hi, why is my container editing interface different from the one on the video?
How come they removed the option to stretch a section/container? Is there still a way to do this?
I wonder how to set elements (e.g. Icon Boxes) inside three flex-box "columns" to have an equal height.
You might just put them side by side into one parent container.
@@ManuelWillCom Makes sense. But does that really work that easy?
Could either give them a min-height or play around with vertical alignments (align-items: stretch) as it would be in pure CSS
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.
In my basic testing, the new container is about 50% ish less code for the same basic layout.
@@WPTuts Amazing improvement. Thank you for your feedback Paul.
how make desktop 4 columns ,tablet 2, mobile 1 - similar to css grid with elementor and flex, for complete control
I would like to know if all templates and blocks in library will be recreated to containers, or just leave on sections for eternity.
I very much doubt it. More likely they’ll stay as they are and you’ll need to use the covert option.
@@WPTuts Yes I think it will be like that.
Flexbox perhaps is the best addition to Elementor
so but how much bits are we actually saving by using the flex box? like how much reduction in website size roughly??
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.
Hi....😀
How to design checkout page mobile using elementor and hot add auto fill address in checkout ...❤️
That's a good news! The point is that Grid is still missing, that's why Elementor still lacks functionality! And that's why I still prefer Oxygen, which provides extreme control over everything!
I did not find this container widget in my elementor pro. You are using DEV. Is it different from pro?
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.
@@WPTuts Thanks Sir
how do i close the gap between two containers