How To Use The NEW Elementor Container | Flexbox CSS
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:
First Look at Flexbox:
✅ ELEMENTOR PRO:
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: (use WPTUTS20 for 20% off)
✅ Project Huddle: (WPTUTS for 20% off – Exclusive)
► MY PREFERRED HOSTING PROVIDERS ◄
✅ CloudWays:
✅ SiteGround:
► WORDPRESS VISUAL PAGE BUILDERS ◄
✅ ELEMENTOR PRO:
✅ Brizy Pro:
✅ DIVI 3 Page Builder:
► WORDPRESS THEMES ◄
✅ GeneratePress Premium:
✅ OCEANWP:
✅ DIVI Theme:
✅ Astra Pro:
► WORDPRESS TOOLS ◄
✅ SMART SLIDER 3:
✅ CSSHERO:
► WORDPRESS PLUGINS ◄
✅ SEOPress Pro:
► SUBSCRIBE ◄
► LETS CONNECT: ◄
👉 Twitter:
👉 Facebook Group:
SUPPORT: Our website offers additional information and perks. Please check it out!
Hi Paul,
Thanks a lot for sharing this! I have been looking for a tutorial all over YouTube, 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.
Great video Paul. I’m very happy to see Flexbox
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?
Great explenation
Looks very good… nice competition for Oxygen.
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?
so but how much bits are we actually saving by using the flex box? like how much reduction in website size roughly??
@wptuts your new name is Professor Paul
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.
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.
Have you tested load improvement times Paul?
Flexbox perhaps is the best addition to Elementor
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
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!
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.
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…
Nice intro. Are we far off getting an option for text to grow and shrink to fill a container?
Thanks Paul
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?
Thanks Paul. Fantastic job dude. I've been dreading this change, but after seeing this, I think I'll be able to sleep tonight.
They did a good implementation this time, the only thing that's missing imo is a calc field in the width/height settings.
Great video Paul, thank you very much.
I've seen some Elementor Addons in the past that have dabbled with overlaying their own flex-controls within Elementor. I haven't looked into this lately, but does anybody know of any particular addon that implements flexbox controls and is safe to use in production.
On a side note, I get why we're always cautioned against using Beta releases. But, is the risk overstated? Is the big issue that something might be "buggy" or that something might actually seem to work fine but the Devs change something about it later that THEN makes the work you put in (during Beta,) completely invalidated?
Better late than never, they did a good job with flexbox implementation. They got it all in there including "gap," and I like the UI.