Build a Complex Flex Box Container Layout - Elementor Wordpress Tutorial
ฝัง
- เผยแพร่เมื่อ 26 ธ.ค. 2022
- 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 TH-cam Analysis: www.tubebuddy.com/websquadron
👕 Get our Merchandise: websquadron.co.uk/merchandise
🥹 Support us: paypal.me/Websquadron
Hire us to work on your Website!
💌 info@websquadron.co.uk
👩💻 Visit websquadron.co.uk - แนวปฏิบัติและการใช้ชีวิต
great video Imran, shows you can still do complex layouts with flexbox!
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!
Very, very helpful. Thank you for taking the time to create this video.
You make it seem so easy, thanks for breaking it down. You're the best ✨
I had to edit out the bit when I stopped to redo the start as I got it wrong :)
Exactly what I was looking for
Nice work
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!
Glad I could help!
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.😊
Thanks
I’ll have a look
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.
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).
Sorry for that. I’ll keep that mind for next time.
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!
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.
I need to explore css grid more with Elementor.
@@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.
@@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.
Hi! Great work!
Is it possible to have a loop grid with complex containers?
Thanks!
Yes, of course - especially with altenrate template for Loop, but you have to think methodically about it.
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.
Yup - I did a modified version the next day :)
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?
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.
wish the backgrounds were darker gray. nice tutorial tho.
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.
Inner sections add on more DOM which affects the page size and performance :)
Wow what a nice landing page how I wish to get the template. Thanks
The video's not long, watch it, and you'll crack and refine it to work for you :)
Can i already use containers for client projects? Since they are just beta i am a bit afraid that i will have some issues
Fine to use. We've been using Flex on container sites since Nov 2022.
I prefer inner sections
Inners used to add too many DOM :)
@@websquadron what do you mean by doms?
The width property (boxed/ full width) is not working. that's my only problem with the container feature. is there a fix for it?
How is it not working for you?
@@websquadron when i choose full width, it doesn't go to full width
How can i do this in loop grid
With alternate templates and masonry style
Nice outro tho
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.