Elementor Flexbox Container Tutorial | Use It The RIGHT WAY!
Vložit
- čas přidán 19. 05. 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 - Jak na to + styl
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'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.
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!
Another great one Paul C! Thanks for making this tutorial intuitive yet simple.
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!
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! 🙏
Absolutely Brilliant Paul - All i needed to know to start moving my sites over to flexbox containers.
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 have seen many CZcamsr’s talk about containers but non explained it like you did. Thank you
Great video Paul. You kept it simple and educational. Thank you!
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
you sir , in just 5 minutes, solved a problem i have been having for days in flexbox.
Liked And Subscribed
I appreciate that you covered how flexbox works with responsive design. thx
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?
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!
You're such a gift Paul. Thank you so much for these perfect videos. I learn so much from you.
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.
Excellent introduction. Clear and to the point. Thanks!
Always clearly explained and well thought out. Many thanks for your help!
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.
Thank you very much Paul, excellent tutorial.
As always very understandable format and content. Thank you for your fast updates and valuable content.
My pleasure!
Yes @jim hummel spot on. Paul, you are the best. Everyone can learn from you on this production. Thank you.
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.
Thank you for taking the time and effort to make this tutorial.
No worries!
Thank you Paul! Very well explained and demonstrated! Another great tutorial.
Glad you enjoyed it
...learning to embrace Flexbox while I'm using Elementor. Thanks for the GREAT examples!
Wow, a lot to take in will probably need to run video a few times but thank you for your comprehensive explanations.
Thanks al lot Paul. Great Video, for me as a beginner in web design, every video helps me a lot. Greetings from Germany
Brilliant Tutorial, well laid out description, a bit of a learning process ahead.
Glad it was helpful!
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?
You explain so well. Thanks!
Great presentation! I really enjoy your presenting style and always learn something new. Keep up the great work!
Thank you very much!
Thanks nice video, at 21:45 you can also use the flex propertie flex-wrap: wrap so now the items should wrap.
Thanks Paul, this looks like it's the way to go in Elementor.
Very useful tutorial Paul.
Excellent! Thank you!
Thanks for the video, Paul. Useful.
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?
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?
Paul is on the class of his own
This is Brilliant so well done !
Fantastic teaching!
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! ^^
Very informative. Thank you.
Resisting change to flex box but recognising I have to-bite the bullet I found this vid so so instructive - thanks very much
Thank You, Grow and stretch boxes as well as a few other things were a mystery to me. Sorted!!!
Thank you for this very informative tutorial!
Incrível! Ainda mais CC em português! Parabéns!
Thanks - Great explanation for a new user !
Thank you!
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.
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.
Great! Thank you.
You are welcome!
Thanks, Paul - tons of great info in the video. 👍
Very welcome
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
Thank you :)
Much appreciated.
You are Great, Thanks
Thanks, this was very usefull.
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
Good Job 👍
The Container function is a game changer for Elementor!
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.
Before I start watching, that t-shirt is a KILLER!
Now on with the show.
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.
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 )
Thank you! And if we wanted to put a description under the logo, would we still have to make a separate container for them?
The flexbox is the BEST thing they've done with elementor.
I tested the Performance of the one-page page for the 2nd time, got 96, amazing. 😁
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 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
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, 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
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. :)
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.
Nice video thank you. Im always torn about how much time to spend on desktop layouts as so much traffic is mobile.
"Paul C" for the win! TY!
I’m curious if this will make it easier to do a transparent header in elementor without ridiculous negative margins?
Great video, very informative will be starting with Elementor soon. When does does this feature go live?
amazig thank you
5 thumbs up for you and subscriber 👍👍👍👍👍
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. :)
Why not use wrap for the mobil cta?
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
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?
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: czcams.com/video/zCPnxa76Zmg/video.html
Hello sir,
My site title is showing as H1 tag. Should I change that in the HTML code?
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?
Hello, how do I put the navigator widget on the side?
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 ?
Where can I find the video you refer to at 5:53?
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.
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.
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
Hi, how we can validate phone numbers using elementor form.?
I'm using flex containers for a client's site, do you think it's too soon for that or am I good?
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.
How do I adjust the flex box container column spacing
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...