Book your 1-2-1 Consultation: https://websquadron.co.uk/socials
A question was asked in our Facebook Group: https://www.facebook.com/groups/websquadron about how to create a Complex Multi-Boxed Layout. Often it’s best to keep it simple with Parent, Children, and Grandchildren Containers.
Build a Complex Flex Box Container Layout – Elementor WordPress Tutorial
We love to create – share – respond – and deliver.
🧐 Learn with our Mastery Modules: https://websquadron.co.uk/web-design-mastery/
🔗 All of our Important Links: https://websquadron.co.uk/socials/
😃 Join our Facebook Group: https://www.facebook.com/groups/3309523509284305
😃 Get Code Snippets Pro: https://r.freemius.com/10565/3304295/
😃 Get Elementor Pro: https://be.elementor.com/visit/?bta=25741&nci=5383
😃 Boost your YouTube Analysis: https://www.tubebuddy.com/websquadron
👕 Get our Merchandise: https://websquadron.co.uk/merchandise
🥹 Support us: https://paypal.me/Websquadron
Hire us to work on your Website!
💌 info@websquadron.co.uk
👩💻 Visit https://websquadron.co.uk
source
My web guy linked me your video. Which was well executed! Bravo!
However, I don't quite get how it related to what Elementor support had said, but I am hoping it and your video plainly means do not have too many containers in one section?
This is what Elementor Support had mentioned on a side note to me outside of my purpose for contact:
"It is harmful to mix containers and sections in one single page. You should avoid mixing them and ensure you are using either containers or sections." Which is not clear to me, if it does not coincide with not adding too many containers in one section, but that is not their statement to me.
I prefer inner sections
Can i already use containers for client projects? Since they are just beta i am a bit afraid that i will have some issues
wish the backgrounds were darker gray. nice tutorial tho.
How can i do this in loop grid
Great example of how flex boxes work via elementor! My only comment would be to use a color other than gray, which isn't very visible (at least to me).
Exactly what I was looking for
The width property (boxed/ full width) is not working. that's my only problem with the container feature. is there a fix for it?
Elementor really dropped the ball w/ flex boxes. We're not seeing a great enough code or speed improvement to justify such a clunky workflow. Complete crap show.
Nice outro tho
Very, very helpful. Thank you for taking the time to create this video.
Hi! Great work!
Is it possible to have a loop grid with complex containers?
Thanks!
Great video! I was curious though why not just choose a theme that has inner section capability instead of containers? It just seems Inner Sections are way easier to work with compared to these containers but I would love to hear feedback.
Hi, I was wondering (not just in this video case tempalate) is it better to create one container and nest inside child elements? Ar create separate rows/container widget for separate page sections? What is better for page speed?
You could remove 2 parent containers with 1 piece of css. if you put a max height on a parent container it could then hold the 6 child containers with a width of 33% in the 1 parent container with a direction of vertical and overflow turned on.
As a programmer, I really couldn't figure out Elementor. It seems so complicated, after working on word press platform for many years changing over was very hard. Now I think I got the feel of it. I really enjoyed your video on building complex flex box containers. Great information. Stay connected!
Perfect timing! I'm adjusting my single post template to have a sticky right column with search, email sign up and recent articles. Across the top in the remaining width 50/50 post title and image. Then the post underneath. After watching this and drawing it out on paper, it all makes sense and will look great!
Wow what a nice landing page how I wish to get the template. Thanks
OK, this is some next-level design tutorial. It means a lot for designers like us working mainly with page builders and less with custom codes. I've always used % for responsiveness, and I understand why my designs are not always 100% aligned now.
When using px figures, how does the mobile responsiveness turn out? Or do you think I can use px for desktop and tablet, and % for mobile?
A quick question on containers: do you think container layering will impact page speed significantly? Because more CSS codes will be generated for each child container.
Also, how does one use CSS Grid with Elementor container if that's an option? Because I've tried it but didn't get it quite well. The same grid layout works well on a simple HTML page, but couldn't get it right by pasting the code in the custom CSS of the target container.
Thanks for always delivering good videos. Season's greetings to you and your family!
great video Imran, shows you can still do complex layouts with flexbox!
You make it seem so easy, thanks for breaking it down. You're the best ✨
I appreciate you doing another fantastic video lesson. Following your video tutorials for so long has been a pleasure. It was enjoyable to see your video about WordPress website training. I'm interested in learning more about the add-on ElementsReady. Recently, I was made aware of a blog that I read. Right now, buying is something I'm considering. If you could make a video about it, that would be great! I'll wait for your response while you take care.😊
Nice work