Basics Flex Box Containers - Columns & Rows - Elementor Wordpress Tutorial - Flexbox

Join our 'How to Start a Web Design Business' Course - and use strategies to grow, get clients, and generate recurring income: websquadron.co...
Book your 1-2-1 Consultation: websquadron.co...
Get you head around the Basics of Flex Box Containers - Columns & Rows - Elementor Wordpress Tutorial - Flexbox.
We love to create - share - respond - and deliver.
🧐 Learn with our Mastery Modules: websquadron.co...
🔗 All of our Important Links: websquadron.co...
😃 Join our Facebook Group: / 3309523509284305
😃 Get Code Snippets Pro: r.freemius.com...
😃 Get Elementor Pro: be.elementor.c...
😃 Boost your KZbin Analysis: www.tubebuddy....
👕 Get our Merchandise: websquadron.co...
🥹 Support us: paypal.me/Webs...
Hire us to work on your Website!
💌 [e-mail]
👩‍💻 Visit websquadron.co.uk

[@user-lw3gr9ul6i]

Honestly don't know what I'd do without you

[@kelvyn98]

Great work Imram. Nice having someone go over this again.

[@biaccoo]

Thanks for helping us get used to the container!!

[@NicksWebShop]

This was really awesome. Thank you.

[@websquadron]

Big thanks

[@mhthmusicvideos]

In have found that a really helpful way to learn about this is just going the kit library (pro version) and just importing any one one the pre made Ellementor design templates. I've spent a considerable amount of time then going over any one of them to see how they have used the containers to construct the page layouts and what units they use, EM, REM, % etc to achieve the construct. It's a very easy and relatively quick way to start getting your head around how the flexbox conatiners work, particularly when it comes to the more seemingly complex layouts.

[@websquadron]

Super cool advice

[@mkirby2000]

Great tutorial. You are my go to person for everything Elementor. I appreciate that you have a core way of doing things and all your trainings remain true to those core principles. Over time I hope to be able to retrofit my site to more closely follow your style and recommendations. Unfortunately, it is going take time to standardize my existing site. Thanks

[@websquadron]

Take your time, and always keep backups.

[@peterstouch8403]

Flex box is the future. It makes work easy much easier now, i love it

[@mrnordjr]

Grid as a layout/frame is even better

[@asalimi]

Brilliant mate, love the way you explain

[@websquadron]

Much appreciated!

[@visualmodo]

Truly nice content!

[@VascoDanielBaiao]

Thank you for the video. I'm just confused with your tip at 06:00 about making "Overflow: Hidden" a habit. I was not able to find much about it. Do you have some video explaining it or can recommend some link?

[@websquadron]

It helps to stop entrance animations or images that bleed out of the edges cause weird layouts or CLS

[@oracoweb]

Hey Imram, you might want to mention the risk of CLS when using container row and how your row can extend slightly beyond. Yes, you mentioned hidden, wrap, etc, but (I could be wrong). I found it so frustrating working through where my CLS impact was coming from, and it was rows. Now, without thinking through it, we'll enough I found I used container columns and then nested container rows to get the look I wanted. The reason I did it like this is it saved my CLS, but now I've watched this video, I'm a little unsure if that's the best approach, as I may be adding to my page speed. Your thoughts?

[@websquadron]

Interesting as I’ve not had that CLS issue.

[@eleanor.shadow]

You mentioned speed. Does this mean I should change my pre-flexbox designs to the new system to improve speed?

[@websquadron]

Not necessary unless you’re using lots of inner sections.

[@BernardEbuehi]

Great video, pls how can reduce the space between row and column in this flexbox. I observed that I can not reduce the space between two columns using the two column flex box

[@websquadron]

In the parent container you will see column gap setting

[@bestDiscoveries]

if you knew how to design in webflow this all will be so easy for you :)

[@websquadron]

Quite possibly true but I love messing around with Wordpress :)

[@CowgirlMedia]

I'm not getting the container tab on my pages. I'm in the process of converting my site, so I've converted the templates in Theme Builder first. I have the container outline with the tab there and I've added a page content widget to it, just a I did with sections previously. But when I go to an actual page using that template, I only get what looks like a child container, no tab at the top center, and if I add a new container, it's the same thing - no tab, just a child container (I'm assuming). It's making it much more difficult to edit containers, and I can't find any tutorials about creating templates in Theme Builder with containers to see if I've done it correctly. Is this normal?

[@websquadron]

It's not normal, and I can only assume it's template related. You will need someone to look at it to check. I could offer but 1-2-1 support falls under consultation.

[@glhutchman]

Thanks Imran. Are you using flexbox on production sites?

[@websquadron]

Yes :) And I love it :)

[@glhutchman]

@@websquadron Thanks man. Since it is still in Beta I was a little nervous to use it on a production site.

[@AadityaSharmas]

Very confusing. Have to practice. Bit weird to shift to container 😢

[@websquadron]

Not at all once you start playing with it. But you can also stick with Sections and Columns.

[@theresasouthern8631]

I agree! I think you'll really love how much easier it is to design the layouts you want with containers.

[@AadityaSharmas]

@@theresasouthern8631 hmmm Will try

[@cariwambolt419]

How do you make a new page full width? I'm having no such luck. No template involved.

[@websquadron]

Check the page type

[@cariwambolt3174]

@Web Squadron It's full-width. That's not the issue.

[@erling5148]

Flex direction row is not an inline approach it simply places the flex items from left to right. Space around is not weird at all, it is very clear it sets the same space on both sides of every flex item. I do enjoy your videos but sometimes you make it a bit confusing by using the wrong terms .

[@websquadron]

Cheers

[@theresasouthern8631]

For the viewers that benefit most from these videos, we might never know and it often does not matter. To me, inline and from left to right sound like the same thing. And your explanation of what "space around" means doesn't clear up anything for me on how it differs from the space evenly option. If it allowed you choose the amount of space around, that might make sense, but it appears to decide for you? Do you happen to have anything helpful to add because I would like to know what the space around feature is most useful for. And also, can you explain what inline is in a way that helps me understand the difference you mention? Thanks!

[@BGdev305]

@websquadron I wish you would dump Elementor and move to bricks.. actually to a REAL development tool, Pinegrow! Pinegrow can be as simple or as advanced as you wanna be. Also none of these builders or Webflow even come close to what Pinegrow can do with Wordpress!

[@websquadron]

One day :) I still use Bricks as well.

[@theresasouthern8631]

@@websquadron You can't leave Elementor behind! We'd miss you and some of us have no choice of what builder we use. :)

[@mkirby2000]

I second staying with Elementor. There is a huge audience of people that aren’t doing new sites all the time that needs your expertise . Some of us are just trying to maintain and enhance our single elementor site.