Build a Complex Flex Box Container Layout - Elementor Wordpress Tutorial

Book your 1-2-1 Consultation: websquadron.co.uk/socials
A question was asked in our Facebook Group: / 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: websquadron.co.uk/web-design-...
🔗 All of our Important Links: websquadron.co.uk/socials/
😃 Join our Facebook Group: / 3309523509284305
😃 Get Code Snippets Pro: r.freemius.com/10565/3304295/
😃 Get Elementor Pro: be.elementor.com/visit/?bta=2...
😃 Boost your KZbin Analysis: www.tubebuddy.com/websquadron
👕 Get our Merchandise: websquadron.co.uk/merchandise
🥹 Support us: paypal.me/Websquadron
Hire us to work on your Website!
💌 [e-mail]
👩‍💻 Visit websquadron.co.uk

[@saucydee1]

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!

[@SC36DC]

Very, very helpful. Thank you for taking the time to create this video.

[@Ife-Emmanuel]

You make it seem so easy, thanks for breaking it down. You're the best ✨

[@websquadron]

I had to edit out the bit when I stopped to redo the start as I got it wrong :)

[@antonichristian5845]

great video Imran, shows you can still do complex layouts with flexbox!

[@englishguru0007]

Exactly what I was looking for

[@dannyalexander1876]

Love your content.. Thanks always!

[@websquadron]

Glad you enjoy it!

[@doumlegare]

Nice work

[@seoagencyguru]

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!

[@websquadron]

Glad I could help!

[@Sofia-richardson]

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.😊

[@websquadron]

Thanks I’ll have a look

[@MondoLizzie]

wow

[@ariroizenblit3453]

Hi! Great work! Is it possible to have a loop grid with complex containers? Thanks!

[@websquadron]

Yes, of course - especially with altenrate template for Loop, but you have to think methodically about it.

[@Unfunctional]

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?

[@websquadron]

Child containers inside a Parent Container is fine. As long as you don't over do it, then it shouldn't impact on score much.

[@1Deduced]

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.

[@websquadron]

Yup - I did a modified version the next day :)

[@yukikosan5468]

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).

[@websquadron]

Sorry for that. I’ll keep that mind for next time.

[@Claudius.a]

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!

[@websquadron]

Container layering is okay as long as you don’t over do it and sometimes you don’t need to add grandchildren containers as you could add elements and then size them with padding etc and background colours if required. For the mobile I would just make the containers be 100% width so you can mix it up with PX on desktop.

[@websquadron]

I need to explore css grid more with Elementor.

[@Claudius.a]

@@websquadron, thanks for your reply. I guess I've been doing it right then. I often use padding left and right just as you suggested.

[@Claudius.a]

@@websquadron I can't wait for you to make a video on it. I haven't quite got it at all. Will be on the lookout for your video notifications.

[@dustinrobertson4328]

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.

[@websquadron]

Inner sections add on more DOM which affects the page size and performance :)

[@zerobambiro]

Can i already use containers for client projects? Since they are just beta i am a bit afraid that i will have some issues

[@websquadron]

Fine to use. We've been using Flex on container sites since Nov 2022.

[@luabella_]

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.

[@titusleo6446]

Wow what a nice landing page how I wish to get the template. Thanks

[@websquadron]

The video's not long, watch it, and you'll crack and refine it to work for you :)

[@amrmoneer5881]

The width property (boxed/ full width) is not working. that's my only problem with the container feature. is there a fix for it?

[@websquadron]

How is it not working for you?

[@amrmoneer5881]

@@websquadron when i choose full width, it doesn't go to full width

[@susheelindulkar]

wish the backgrounds were darker gray. nice tutorial tho.

[@brianbergel3425]

Hey, how does it looks like on mobile ?

[@websquadron]

Fine because you’d adjust it like everything else

[@SamuSunar]

How can i do this in loop grid

[@websquadron]

With alternate templates and masonry style

[@kevinj4862]

I prefer inner sections

[@websquadron]

Inners used to add too many DOM :)

[@kevinj4862]

@@websquadron what do you mean by doms?

[@ronnieforever1528]

Nice outro tho

[@Webcoreinteractive]

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.