Elementor Wordpress Tutorial - Flex Box Container One Page Tutorial - Elementor Flex 2022

Let's do the Header, Hero Banner and more for a Full Page tutorial using the New Elementor Flex Box Containers.
Tips on how to get the most of it.
Elementor Wordpress Tutorial - Flex Box Container One Page Tutorial - Elementor Flex 2022
Hire us to work on your Website! [e-mail] or visit websquadron.co.uk
Get Elementor Pro: trk.elementor....
Get Elementor Cloud Hosting: trk.elementor....
Support us: paypal.me/Webs...
Mastery Membership: websquadron.co...
Indeed we're affiliated to them, but it helps to pay for resources to keep creating ace content for you :)
Equipment Used:
Softbox Lighting Kit (to focus main light onto me in a dark room): amzn.to/3feqH18
Soundproof Panels (to provide a dark setting, and prevent sound bounce): amzn.to/3HVfwqa
3m Ethernet Cat 7 Cable (to maximise the Internet Connection as the room is upstairs): amzn.to/3GlBvGw
Anker 6 in 1 Adaptor (for the Macbook Air to increase USB-C, USB-A, HDMI, Ethernet Ports): amzn.to/3tiukLA
USB-C to Lightning Port Cable (from my iPhone to my Macbook Air): amzn.to/3K2tGaU
Powerline Adaptor (boosts internet connection from downstairs 380mbs to the upstairs room 120mbs): amzn.to/3r8YcYc
Floodlights (positioned to glow onto the walls): amzn.to/33mRqWD
LED Light stands (either side of me): amzn.to/3Iaerez
Fifine Dynamic Microphone: amzn.to/3osbxu2
Floating Shelves: amzn.to/3Fhxyl1
Hanging Pendant Light Holders: amzn.to/3qgwnhg
Vintage Light Bulbs: amzn.to/3K0bQ8B
Music used:
Track: Will You Be Mine (Remix)
Free download: brokeinsummer....
Artists: brokeinsummer.com
Contact: brokeinsummer....
Music provided by Audio Library Plus
- Get Elementor Pro here --- trk.elementor....
-- Of course, we're affiliated to them, but it helps to pay for resources to keep creating ace content for you :)
-- Book an Appointment/Consultation: calendly.com/i...
-- LinkedIn: / imran-siddiq-7320a74a
-- Instagram: / batswebsitedesign
-- Twitter: / imranwebsites
-- Facebook: / websquadrontraining
PS: websquadron.co.uk
PPS: Contact us at [e-mail]
PPPS: We only build with Elementor Pro

[@bySterling]

All these years in WordPress and never knew about the resize images options! Great tips and walk thru vid 💯

[@websquadron]

Editing just went supernova :)

[@KevsGuide]

@@websquadron YES I willbe searching for you tutorial on images

[@changofett77]

You saved me, I was stuck in a project where I couldn't put a container followed by another container on mobile. Now I can go on peacefully, thank you very much my friend!

[@andonisr]

Hey Imran, another great vid! I like the way you go about it, your enthusiasm!!! I was able to follow along and now feeling much more comfortable after all this playing around...🙂 Cheers mate and greets from Greece..!

[@danplumadore647]

Great tips and definitely on point. My favourite, though, is the "Don't create a new world, just create a parallel universe and then deal with the multiverse." That was brilliant, mate.

[@websquadron]

Hehe :) Loved it too.

[@inbetweenutube]

Dude. I freaking love you. You are able to take a headspinning topic and break it down into slow motion. Get your head around that k?

[@websquadron]

I appreciate that

[@saucydee1]

I love this way of resizing images. This makes perfect sense! I'm building my site and was going to go back and fix all my images after. This make it easier to do this. Now I know the size they are going to be. I felt like I was wasting so much time going back and forth

[@websquadron]

Exactly :)

[@pixelgap]

Thank you Imran. You saved me a lot of time with this video.

[@websquadron]

Glad to hear that!

[@bridiemacdonald9436]

Just started to create sites with this - so much faster to do mobile adaptive - great tutorial!

[@websquadron]

Great to hear!

[@josephmccalla-bennett3550]

Great stuff mate realy learnt a lot from your presentation Ile call you the Flex box container donny ile be watching this more than once thanks a lot

[@websquadron]

Yes :)

[@RockstahRolln]

What a brilliant video! I'm glad this was featured in my feed! I truly enjoyed this and learned quite a lot. I have subbed and looking forward to more! Thank You!

[@websquadron]

Welcome aboard!

[@createandgrowyourownshopif7174]

Great tutorial thanks! Love listening to your voice

[@createandgrowyourownshopif7174]

The whole spacing thing was doing my head in when I tried to design a page with containers a few days ago. Now I get it!

[@websquadron]

My pleasure!

[@websquadron]

Don't worry - took me a wile too. I sat staring at my screen for many minutes :)

[@jhinson]

Brilliant - this was the kind of walkthrough I needed. Thank you.

[@websquadron]

You're very welcome! PS - be careful of using it on a Live Site, as it's still in testing mode and the final version isn't out yet.

[@walrush3]

Very inspiring. I like your informal, playful style of presentation. Lots going on and much information imparted 👍

[@aadipalash6794]

Great and details tutorial... i love it.

[@harbourdogNL]

I think an ideal feature would be a Merge Containers function, like Merge Layers in Photoshop or Illustrator.

[@stevenesau2206]

Very helpful thanks

[@danygingras7782]

yet another good tutorial. Thanks for doing that for us :)

[@websquadron]

No probs

[@tomroche8506]

Thanks a million-fab tutorial

[@websquadron]

You're very welcome!

[@liamswordpresstutorials]

Really helpful, thank you!

[@websquadron]

Glad it was helpful!

[@BLLEC]

Nice video! How would you reverse Containers (Columns) inside another container for mobile devices?

[@websquadron]

Have you tried using the order setting in advanced?

[@markdd44]

This is a terrific video and you have clarified lots here. I am using a custom theme using Themebuilder and the Container Top Tabs don't appear anymore. They only appear in Elementor Canvas and Elementor Full Width. Do you think this is by design, or do you think this is a bug that needs ironing out?

[@websquadron]

Some bugs still to be ironed out.

[@seunghoim4339]

Hi, thanks for your great tutorials. I am trying to make a website and a beginner. My question is that I want to make it with using container. But I feel videos about it is not enough for me to make a site the way i wanna make. And watching other videos with using column, the old way makes me confused. Do you think is it best to make it with the old way?

[@websquadron]

Flex isn’t final yet so I would wait until that’s released.

[@websquadron]

PS I have got Full Site Tutorials that will help you on the old way. See the Site Tutorials Playlist

[@digitalmurph4114]

Good tip on resizing images in Wordpress. Can I ask...does this mean that initially, all of the images you upload into the media library are the same size? Anfd if the original image is always available to roll back to, does this affect site speed at all?

[@websquadron]

No the original image won’t affect the speed as you’ll be bringing a modified version though. It’s a great way to protect you when you realise that you need to revert and modify later

[@arturo5050]

What hosting provider do you use? It seems very fast the changes on elementor

[@websquadron]

SiteGround.

[@MichelleWolff11]

I like the scroll

[@websquadron]

;)

[@OnyeStephen]

Amazing work, but designing in XD of figma would have saved you from all that stress trying to resize the logo

[@websquadron]

Very true

[@RiddhamManna]

Are the containers stable enough to be deployed on the production website?

[@websquadron]

So far so good - so I would say yes but test first.

[@EPHONIC]

Does using Flexbox containers reduce bloat?

[@websquadron]

Indeed. Much less code being written. But to be honest - if you’re careful about how you build then you can hit 90+ on the mobile absolutely fine.

[@ibrahim.tariq525]

Nice! video...

[@websquadron]

You are so kind

[@websquadron]

Feel free to share.

[@Longthanhcaphe]

How to sticky container.? You can make container menu sticky

[@websquadron]

When you add a container into another Container, then go to the Advanced Tab and check the Motion Effects setting.

[@Longthanhcaphe]

@@websquadron thank u so much

[@visualmodo]

Muito bom =D

[@websquadron]

Thanks

[@musicplayer7336]

How to overcomplicate something that has been designed to be easier to use. 😀

[@websquadron]

I suppose so :)

[@kwdigitalsolutionswebsited3365]

I notice Imran in this and in other videos, that you do px in margins and padding. I have been using % for everything these days thinking it is better for responsiveness. What say you on this subject?

[@websquadron]

I only use PX as most understand it better. % can be very unpredictable based on screens. In real-life I use REM for Fonts.