Using Flex Positioning with Elementor - Improve Speed Performance & Reduce Code Bloat

✨ Join us in the Lytbox Academy Community:
lytboxacademy.com/join-us/
My goal is to create a community for Web Designers, Developers, Freelancers, and Elementor enthusiasts to learn the design & business side of creating websites.
Got questions? You can reach me anytime - lytboxacademy.com/contact/
/////
✨ Learn High-Level Web Design Skills With Me:
🟢 Master Elementor while learning web design skills:
lytboxacademy.com/design-with...
🟢 Learn powerful SEO in an easy-to-follow style for WordPress users and web designers:
lytboxacademy.com/seo-for-wor...
🟢 A step-by-step guide to building a WordPress Maintenance Business that results in high MRR:
lytboxacademy.com/maintenance...
🟢 Become a Lytbox Academy Pro Member:
lytboxacademy.com/the-academy/
/////
✨ My Recommended WordPress & Web Design Tools:
👉 The hosting I use:
Cloudways (use promo code LYTBOX for 30% off 3/months)
lytboxacademy.com/cloudways/
xCloud:
lytboxacademy.com/xcloud/
/////
👉 My WordPress Tools:
Elementor Pro:
lytboxacademy.com/elementor/
Breakdance Builder:
lytboxacademy.com/breakdance/
Bricks Builder:
lytboxacademy.com/bricks/
Crocoblock:
lytboxacademy.com/crocoblock/
SEOPress (the best SEO tool for WordPress!):
lytboxacademy.com/seopress
Perfmatters:
lytboxacademy.com/perfmatters
InstaWP:
lytboxacademy.com/instawp
WP Umbrella:
lytboxacademy.com/wp-umbrella
/////
Thank you for supporting my channel 🙏 - Jeffrey @ Lytbox
#elementorflex #elementorflexbox #elementorspeedoptimization

[@fanofcameron]

The first tutorial in which I didn't find the music disturbing. You are really a master in explaining things clearly!

[@LytboxStudio]

I'm so glad to hear this! I've always been conflicted if I should add background music or not.

[@orianospecialone7301]

Amazing!!! From Angola, congrats for the video.

[@LytboxStudio]

Many Thanks from Thailand 🇹🇭🙏💜

[@markanthonybanong1241]

would be watching out all of your videos from now on

[@LytboxStudio]

Many Thanks 🙏💜

[@frankstone]

I just found this tutorial and LOVED your presentation and attention to detail. I rang the "bell" and will be looking forward to hearing from you again. Thank you for the help you provide us WordPress newcomers.

[@LytboxStudio]

Thanks Frank, I am so glad to hear this and happy to help. I'll make sure to keep them coming.

[@NeoOnyx]

I just wanted to point out that VW under Positioning does not stand for Vertical Width (which doesn’t make any sense if you think about it 🤓). VW stands for Viewport Width, so it takes up a certain amount of space, depending on the device you’re using to view the page.

[@LytboxStudio]

Always in the process of learning. And makes more sense. Thanks!

[@gotta-date-with-hate]

You do a fantastic job of the content you provide, breaking things down and being clear, concise and easy to understand for people just learning..Many times channels zoom through instructions or worse it's very difficult to understand what they are saying.. nice sleeves btw...

[@elobardo]

Just Brilliant! Thank You! Great teaching skills for a so-needed explanation.

[@LytboxStudio]

I'm so glad it helped

[@stanleyd777]

God bless you, Jeffrey! I'm looking forward to watching your next videos!

[@LytboxStudio]

I appreciate that! Many Thanks 🙏💜

[@soc1a]

You're a legend dude. Super valuable knowledge in all of your videos, always appreciated!

[@LytboxStudio]

I appreciate that! Many Thanks 🙏💜

[@TheMav75]

Really really good stuff!! It was like a lightbulb moment for myself as new to Elementor, keep it up man!

[@LytboxStudio]

So glad to hear!

[@jcarlin596]

Another outstanding tutorial. Not only the 'how to' but also the 'why' of doing things.

[@LytboxStudio]

I appreciate that Jim, big thanks! 🙏

[@MuzmmalFraeed]

Thanks for more information 👍

[@LytboxStudio]

Much appreciated!🙏

[@IsotonikStudios]

Excellent intro to flex, I’ll be back for more of this!!

[@LytboxStudio]

Many Thanks 🙏💜

[@melaniem9578]

Super helpful! Will definitely use this. Thank you!

[@LytboxStudio]

I'm so glad to hear!

[@moondodelarte9656]

How is this video not viral yet? Thank you so much for this amazing tip! Will be looking out for all your future videos! Thanks mate!

[@LytboxStudio]

Haha hopefully the next one will be ;)

[@comleonmoto]

Just discovered your KZbin channel and what a nice surprise! Clear and interesting explanations, nice flow; I look forward to watching your other videos. Thanks a lot!

[@LytboxStudio]

So glad to hear. Thanks! 🙏

[@wilkovanderploeg]

Thanks for the great tutorial, just one little correction. VW isn't 'Vertical Width' but 'Viewport Width'. (from the 25:30 mark)

[@LytboxStudio]

Yah I caught that:) Good catch

[@BradK02]

You explain concepts very well. I know my way around these tools very well but you make the idea behind it very understandable.

[@LytboxStudio]

Thanks I appreciate that!

[@carlosreyes6612]

this tutorial is pure gold ! thanks man

[@LytboxStudio]

Thanks Carlos! So glad to hear this!

[@ShivSharma786]

You deserve million likes and audience for this wonderful presentation.With only 25 mins of your tutorial you really correct my major bad habit of how I was using elementor.Thank you so much.

[@LytboxStudio]

Wow, thank you!

[@ozartdesign]

Awesome vid, have been looking for this type of down-to-earth real world examples, Thanks heaps keep up the great job!! Just subscribed & moved you up to the top of my list :)

[@LytboxStudio]

So glad to hear. Thanks! 🙏

[@FirebrandVOCALS]

Fantastic Tutorial -- Worth its weight in Gold m8! Cheers!

[@LytboxStudio]

Glad you think so!

[@paulhildmann8392]

Thanks, that was very helpful! 👍

[@LytboxStudio]

I'm glad it helped!

[@autumnmaze3952]

this is really helpful! thank you for sharing this :)

[@LytboxStudio]

Many Thanks 🙏💜

[@DucVietTran]

You saved my life!

[@LytboxStudio]

Haha thanks! Much appreciated 🙏

[@TheCreativeRod]

Wow. This is going to be extremely useful going forward.

[@LytboxStudio]

I am glad to hear! Thanks 🙏

[@jdeanford]

Agreed with comments, fantastic tutorial leaving out the fluff, thank you.

[@LytboxStudio]

Many Thanks 🙏💜

[@MJScottPhoto]

VH and VW stands for Viewport Height and Viewport Width.

[@LytboxStudio]

Yep my mistake 😅

[@williamdavid4617]

Hello from the French countryside! Thank you for those excellent tips and tips! I just subscribed to your useful KZbin Channel.

[@LytboxStudio]

Thanks for the sub! And hello from Thailand! 🇹🇭

[@swiftwraith]

great video as usual Jeff, have also just signed up to the course ;)

[@LytboxStudio]

Yo Anthony! Thats great mate!

[@duailytami4135]

You are great educator

[@LytboxStudio]

Wow, thank you!

[@duailytami4135]

@@LytboxStudio rewatching this vid, hahahah, thank you so much!

[@franktielemans6624]

vw is not 'vertical width' but viewport width vh is viewport height.

[@LytboxStudio]

I caught that after the video. Good catch thanks!

[@felixrivera2691]

Thanks! I was looking to do this with CSS. This way is much faster!

[@LytboxStudio]

Many Thanks 🙏💜

[@tjveach]

Nice job well done

[@LytboxStudio]

Thanks!

[@wayniesinclair]

Can't wrap my head around it with the background music

[@LytboxStudio]

Thanks for the feedback. I have wondered about if I should use or not use background music. I appreciate the feedback

[@dancastady8571]

Me, when I need help and see this guy has a video about it. 🤩

[@YasienSarlie]

Hey, hope you're doing well. Nice one 😉

[@LytboxStudio]

Thanks Yasien. I hope you're staying safe and healthy and much appreciated 🙏

[@exceed8747]

Great Tutorial! I created a header with the Flex positioning and I'm having issues with the mobile versions. Do you know a workaround?

[@LytboxStudio]

For mobile switch the position back to default or 100%. I rarely would use inline or custom width on mobile, only desktop and tablet. I hope that helps

[@nadeemmalik0]

Positioning has some advantages as well as some disadvantages like spacing

[@LytboxStudio]

What are the pros and cons you see?

[@Amerikrainian]

But why do you use padding instead of margins for your sections? I heard you mention it, and I've always wondered which one (padding vs margin) is the best practice, or at least what other designers do. Can you elaborate?

[@LytboxStudio]

Great question and I am currently creating a video going in-depth on when to use padding and margins. Short answer, margins push elements away and that’s why not to use on sections because it it best to have sections stack on top of each other. The padding pushes inside an element so to create space inside a section, it’s best to push the elements inside. My video will explain better. Should be ready next week.

[@blakemiller8811]

​@@LytboxStudio Awesome video. I noticed that too and wondering the same thing. Did you ever do the Paddings vs Margins video?

[@re66044]

My site can use someone like you to fix it’s page speed on mobile. I created the site but never claimed to be a web designer.

[@LytboxStudio]

Sorry for the late reply, I was taking time off and back now. Were you able to find a fix and your mobile sped up?

[@blackwomenlovesexinc.3602]

Love the video. Not in Elementor's free verson. Thank you, though.

[@LytboxStudio]

Not much is in the free version:) Need to get the Pro to unlock the power of Elementor! 💪

[@jayleno007]

I've checked everywhere and I don't have the positioning tab in advanced settings. I have elementor pro and it's updated. Am I missing something?

[@LytboxStudio]

Hey Jaylynn indeed there was an update and the positioning tab was removed. You can find the same setting now in the Advance under the Margin and Padding setting at the top

[@LytboxStudio]

I’m in the process of creating an updated video to help show the changes Elementor has made with their setting for flex positioning. Same method just new and better setting and options.

[@tjveach]

Of course if Elementor ever gets CSS grid going, it would be great …

[@LytboxStudio]

That would be sweet. I think it's safe to predict that happening in the future. Personally I like using Flex mostly because it's easier, but Grid is better for performance and will be interesting to see how it will work on ELementor.

[@anna-anna-bo-banna]

You are so genious, will you marry me - and do websites aaaall day long?? 😂💪🏼😎❤… Thank you so much AGAIN for a great tutorial 🙌🏼