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

[@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.

[@stanleyd777]

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

[@LytboxStudio]

I appreciate that! 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!

[@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 ;)

[@orianomanuel]

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

[@LytboxStudio]

Many Thanks from Thailand 🇹🇭🙏💜

[@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!

[@jcarlin596]

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

[@LytboxStudio]

I appreciate that Jim, big thanks! 🙏

[@Berscom]

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

[@LytboxStudio]

I'm so glad it helped

[@MJScottPhoto]

VH and VW stands for Viewport Height and Viewport Width.

[@LytboxStudio]

Yep my mistake 😅

[@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!

[@markanthonybanong1241]

would be watching out all of your videos from now on

[@LytboxStudio]

Many Thanks 🙏💜

[@soc1a]

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

[@LytboxStudio]

I appreciate that! Many Thanks 🙏💜

[@IsotonikStudios]

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

[@LytboxStudio]

Many Thanks 🙏💜

[@jdeanford]

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

[@LytboxStudio]

Many Thanks 🙏💜

[@franktielemans6624]

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

[@LytboxStudio]

I caught that after the video. Good catch thanks!

[@carlosreyes6612]

this tutorial is pure gold ! thanks man

[@LytboxStudio]

Thanks Carlos! So glad to hear this!

[@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!

[@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

[@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! 🙏

[@melaniem9578]

Super helpful! Will definitely use this. Thank you!

[@LytboxStudio]

I'm so glad to hear!

[@felixrivera2691]

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

[@LytboxStudio]

Many Thanks 🙏💜

[@FirebrandVOCALS]

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

[@LytboxStudio]

Glad you think so!

[@TheCreativeRod]

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

[@LytboxStudio]

I am glad to hear! Thanks 🙏

[@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! 🇹🇭

[@MuzmmalFraeed]

Thanks for more information 👍

[@LytboxStudio]

Much appreciated!🙏

[@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! 🙏

[@autumnmaze3952]

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

[@LytboxStudio]

Many Thanks 🙏💜

[@paulhildmann8392]

Thanks, that was very helpful! 👍

[@LytboxStudio]

I'm glad it helped!

[@swiftwraith]

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

[@LytboxStudio]

Yo Anthony! Thats great mate!

[@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.

[@blakemiller-mito]

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

[@duailytami4135]

You are great educator

[@LytboxStudio]

Wow, thank you!

[@duailytami4135]

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

[@DucVietTran]

You saved my life!

[@LytboxStudio]

Haha thanks! 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

[@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.

[@nadeemmalik0]

Positioning has some advantages as well as some disadvantages like spacing

[@LytboxStudio]

What are the pros and cons you see?

[@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

[@YasienSarlie]

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

[@LytboxStudio]

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

[@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! 💪

[@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?

[@dancastady8571]

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

[@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 🙌🏼