Using Flex Positioning with Elementor - Improve Speed Performance & Reduce Code Bloat
HTML-код
- Опубликовано: 12 сен 2024
- ✨ Join us in the Lytbox Academy Community:
lytboxacademy....
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....
/////
✨ Learn High-Level Web Design Skills With Me:
🟢 Master Elementor while learning web design skills:
lytboxacademy....
🟢 Learn powerful SEO in an easy-to-follow style for WordPress users and web designers:
lytboxacademy....
🟢 A step-by-step guide to building a WordPress Maintenance Business that results in high MRR:
lytboxacademy....
🟢 Become a Lytbox Academy Pro Member:
lytboxacademy....
/////
✨ My Recommended WordPress & Web Design Tools:
👉 The hosting I use:
Cloudways (use promo code LYTBOX for 30% off 3/months)
lytboxacademy....
xCloud:
lytboxacademy....
/////
👉 My WordPress Tools:
Elementor Pro:
lytboxacademy....
Breakdance Builder:
lytboxacademy....
Bricks Builder:
lytboxacademy....
Crocoblock:
lytboxacademy....
SEOPress (the best SEO tool for WordPress!):
lytboxacademy....
Perfmatters:
lytboxacademy....
InstaWP:
lytboxacademy....
WP Umbrella:
lytboxacademy....
/////
Thank you for supporting my channel 🙏 - Jeffrey @ Lytbox
#elementorflex #elementorflexbox #elementorspeedoptimization
The first tutorial in which I didn't find the music disturbing. You are really a master in explaining things clearly!
I'm so glad to hear this! I've always been conflicted if I should add background music or not.
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.
Always in the process of learning. And makes more sense. Thanks!
Amazing!!! From Angola, congrats for the video.
Many Thanks from Thailand 🇹🇭🙏💜
would be watching out all of your videos from now on
Many Thanks 🙏💜
Thanks for the great tutorial, just one little correction. VW isn't 'Vertical Width' but 'Viewport Width'. (from the 25:30 mark)
Yah I caught that:) Good catch
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.
Thanks Frank, I am so glad to hear this and happy to help. I'll make sure to keep them coming.
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...
God bless you, Jeffrey! I'm looking forward to watching your next videos!
I appreciate that! Many Thanks 🙏💜
Excellent intro to flex, I’ll be back for more of this!!
Many Thanks 🙏💜
vw is not 'vertical width' but viewport width
vh is viewport height.
I caught that after the video. Good catch thanks!
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!
Haha hopefully the next one will be ;)
VH and VW stands for Viewport Height and Viewport Width.
Yep my mistake 😅
Another outstanding tutorial. Not only the 'how to' but also the 'why' of doing things.
I appreciate that Jim, big thanks! 🙏
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.
Wow, thank you!
You're a legend dude. Super valuable knowledge in all of your videos, always appreciated!
I appreciate that! Many Thanks 🙏💜
Hello from the French countryside!
Thank you for those excellent tips and tips!
I just subscribed to your useful RUclips Channel.
Thanks for the sub! And hello from Thailand! 🇹🇭
Just Brilliant! Thank You! Great teaching skills for a so-needed explanation.
I'm so glad it helped
Really really good stuff!! It was like a lightbulb moment for myself as new to Elementor, keep it up man!
So glad to hear!
Thanks for more information 👍
Much appreciated!🙏
Just discovered your RUclips channel and what a nice surprise! Clear and interesting explanations, nice flow; I look forward to watching your other videos. Thanks a lot!
So glad to hear. Thanks! 🙏
Fantastic Tutorial -- Worth its weight in Gold m8! Cheers!
Glad you think so!
You explain concepts very well. I know my way around these tools very well but you make the idea behind it very understandable.
Thanks I appreciate that!
this tutorial is pure gold ! thanks man
Thanks Carlos! So glad to hear this!
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 :)
So glad to hear. Thanks! 🙏
You saved my life!
Haha thanks! Much appreciated 🙏
Wow. This is going to be extremely useful going forward.
I am glad to hear! Thanks 🙏
You are great educator
Wow, thank you!
@@LytboxStudio rewatching this vid, hahahah, thank you so much!
great video as usual Jeff, have also just signed up to the course ;)
Yo Anthony! Thats great mate!
Super helpful! Will definitely use this. Thank you!
I'm so glad to hear!
Agreed with comments, fantastic tutorial leaving out the fluff, thank you.
Many Thanks 🙏💜
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?
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.
@@LytboxStudio Awesome video. I noticed that too and wondering the same thing. Did you ever do the Paddings vs Margins video?
this is really helpful! thank you for sharing this :)
Many Thanks 🙏💜
Thanks! I was looking to do this with CSS. This way is much faster!
Many Thanks 🙏💜
Can't wrap my head around it with the background music
Thanks for the feedback. I have wondered about if I should use or not use background music. I appreciate the feedback
Thanks, that was very helpful! 👍
I'm glad it helped!
Positioning has some advantages as well as some disadvantages like spacing
What are the pros and cons you see?
Love the video. Not in Elementor's free verson. Thank you, though.
Not much is in the free version:) Need to get the Pro to unlock the power of Elementor! 💪
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.
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?
Me, when I need help and see this guy has a video about it. 🤩
Hey, hope you're doing well. Nice one 😉
Thanks Yasien. I hope you're staying safe and healthy and much appreciated 🙏
Great Tutorial! I created a header with the Flex positioning and I'm having issues with the mobile versions. Do you know a workaround?
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
Nice job well done
Thanks!
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?
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
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.
Of course if Elementor ever gets CSS grid going, it would be great …
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.
You are so genious, will you marry me - and do websites aaaall day long?? 😂💪🏼😎❤… Thank you so much AGAIN for a great tutorial 🙌🏼