Elementor Flexbox Container Tutorial | Use It The RIGHT WAY!
HTML-код
- Опубликовано: 19 май 2022
- The Elementor Flexbox Container promises a lot of speed and design improvements. Learn how to use it the RIGHT WAY and get the greatest benefits.
The FlexBox model has a lot to offer and the Elementor Container makes designing with it a very visual affair, but there are a LOT of options that can be overwhelming.
Let me show you how to manage these options and also reduce the amount of bloat you potentially add to your designs.
Learn the Elementor Container in this easy-to-follow tutorial.
Previous video: • How To Use The NEW Ele...
#elementor #elementorcontainer #elementorflexbox
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 
Хобби
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 !!!!!
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!
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!
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.
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! 🙏
Another great one Paul C! Thanks for making this tutorial intuitive yet simple.
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?
Absolutely Brilliant Paul - All i needed to know to start moving my sites over to flexbox containers.
I have seen many RUclipsr’s talk about containers but non explained it like you did. Thank you
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.
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.
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.
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
Great video Paul. You kept it simple and educational. Thank you!
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!
I appreciate that you covered how flexbox works with responsive design. thx
you sir , in just 5 minutes, solved a problem i have been having for days in flexbox.
Liked And Subscribed
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?
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.
...learning to embrace Flexbox while I'm using Elementor. Thanks for the GREAT examples!
Thanks nice video, at 21:45 you can also use the flex propertie flex-wrap: wrap so now the items should wrap.
You're such a gift Paul. Thank you so much for these perfect videos. I learn so much from you.
Thank you very much Paul, excellent tutorial.
Excellent introduction. Clear and to the point. Thanks!
Always clearly explained and well thought out. Many thanks for your help!
Thank you for taking the time and effort to make this tutorial.
No worries!
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.
Wow, a lot to take in will probably need to run video a few times but thank you for your comprehensive explanations.
As always very understandable format and content. Thank you for your fast updates and valuable content.
My pleasure!
Thanks Paul, this looks like it's the way to go in Elementor.
Thank you Paul! Very well explained and demonstrated! Another great tutorial.
Glad you enjoyed it
Resisting change to flex box but recognising I have to-bite the bullet I found this vid so so instructive - thanks very much
You explain so well. Thanks!
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.
Thanks al lot Paul. Great Video, for me as a beginner in web design, every video helps me a lot. Greetings from Germany
Great presentation! I really enjoy your presenting style and always learn something new. Keep up the great work!
Thank you very much!
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.
Brilliant Tutorial, well laid out description, a bit of a learning process ahead.
Glad it was helpful!
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?
Thanks for the video, Paul. Useful.
Excellent! Thank you!
Yes @jim hummel spot on. Paul, you are the best. Everyone can learn from you on this production. Thank you.
Very useful tutorial Paul.
Thank You, Grow and stretch boxes as well as a few other things were a mystery to me. Sorted!!!
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! ^^
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.
Yes, you are right
This is Brilliant so well done !
Thank you for this very informative tutorial!
Incrível! Ainda mais CC em português! Parabéns!
Thanks - Great explanation for a new user !
Very informative. Thank you.
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.
Fantastic teaching!
Thank you for this explanatory tutorial! I play with the new "container" but my layouts don't display exactly the same on Apple devices as they do on PC and Android ones. I've noticed distortions on widths and on paddings on Apple devices. Any ideas on this issue?
Thank you!
Thank you! And if we wanted to put a description under the logo, would we still have to make a separate container for them?
Thanks, this was very usefull.
Thanks, Paul - tons of great info in the video. 👍
Very welcome
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
Much appreciated.
Great video, very informative will be starting with Elementor soon. When does does this feature go live?
You are Great, Thanks
Nice video thank you. Im always torn about how much time to spend on desktop layouts as so much traffic is mobile.
Great! Thank you.
You are welcome!
Thank you :)
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
I tested the Performance of the one-page page for the 2nd time, got 96, amazing. 😁
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. :)
Good Job 👍
The Container function is a game changer for Elementor!
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...
Thanks For This Video, I'll practice this a bit right now. Would you recommend using this right now for live projects?
Not at this stage, no. It’s still in Alpha and has some issues.
Paul is on the class of his own
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?
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.
@@WPTuts Thanks for the clarification!
I didn't understand that, and it makes sense.
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 )
Before I start watching, that t-shirt is a KILLER!
Now on with the show.
Why not use wrap for the mobil cta?
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)?
Great to hear!
No, I haven't tested it with JetEngine, but I can't see any reason to expect issues. :)
I’m curious if this will make it easier to do a transparent header in elementor without ridiculous negative margins?
Since it's still in alpha, would you recommend using containers on new sites/pages?
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.
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?
Here you go: ruclips.net/video/zCPnxa76Zmg/видео.html
The flexbox is the BEST thing they've done with elementor.
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?
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
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...
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
5 thumbs up for you and subscriber 👍👍👍👍👍
Hello, how do I put the navigator widget on the side?
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?
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.
amazig thank you
"Paul C" for the win! TY!
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.
How do I adjust the flex box container column spacing
Should we already use containers on production sites or wait till it is out of experimental?
Personally, I wouldn't use them while in the Alpha stage. Maybe when it comes to beta, it will be a little more robust.
Hello sir,
My site title is showing as H1 tag. Should I change that in the HTML code?
For simple stuff the flexbox containers are nice. Also for responive frames using % for width. But if you do more complex stuff, using layers of containers in a set of columns, it gets really buggy, espsecially for different screen widths. Never use the "convert to container" function... that´s a real mess...
This is why I haven’t used containers on my company’s website. I’ve experimented on sites for side projects but that’s all for now. I think they’re still working out all the kinks for containers right now
@@mfrapp20 true. generally i see a real buggy elementor framework at the moment. Hope they can bring back stability and focus more on essential stuff. I don´t get it why i need 3rd party plugin for tooltip management. =)
@@page-builder-templates7684 I’ve also noticed bugs with the editor that have never been there before too. It’s definitely frustrating. Like sometimes I suddenly can’t right click to edit an element (it’ll say to edit the column if I right click), and when you switch between responsive views, I’ve noticed it contorts the menu. Very odd. I’m not sure why all these new bugs have showed up but hopefully they sort them out
yeah, true. hope they fix it soon. on my side, i see a lot viewport issues, sometimes, the editor does not take any padding or margin, then i have to add it via css and !important statement…
that really sucks.
Where can I find the video you refer to at 5:53?
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?
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 ?
Hi, how we can validate phone numbers using elementor form.?