Design With Elementor - 3 Tips To Improve Design Skills

[@LytboxStudio]

There's nothing like a clean layout and grid 💻

[@rodlivz]

This was amazing content! Thank you. We can't wait for the new content!

[@mrjohncrumpton]

"Just because something is clean and easy, doesn't mean it's easy to build" so true!

[@LytboxStudio]

It takes skills to make it look easy;) I think that's why we all cringe when clients say "It should be simple" 🙈

[@rodlivz]

Couldn't agree more!!!

[@princei0069]

Yeah, You are right I build a website for my client with amazing animations and multiple others things after all with over 3 revisions client change his whole website to a very very simple looking, He was also from united states of america

[@jayleno007]

I finally bought Elementor Pro after using the free version for a year. I love it but it has a learning curve. Just watched a couple of your videos and wow I subscribed so fast! I find alot of WordPress or Elementor videos on KZbin are gimmicky or don't show best practices. Thanks for showing me how to become a better web designer with such simple and easy tips 😌

[@LytboxStudio]

I really appreciate that! This is what inspires me to do this.

[@aaronbachiu8690]

I've been watching your videos for a few weeks now and I just wanted to say I really appreciate your content. You're easy to listen to and I have learned a lot of nifty little time saving tricks just in this one video alone. I appreciate this channel and the work you do, and look forward to learning more from you as I continue to learn more about web design. Thank you for your content!

[@ethanhunt629]

Useful Want part 2 😍 1:02 Tip 1 7:03 Tip 2 11:32 Tip 3

[@anna-anna-bo-banna]

I am a rookie and I absolutely LOVE your videos! So simple and you explain so well. Just found you yesterday, and now I am a loyal follower. Thank you so much for this ❤️

[@LytboxStudio]

Awesome! (and sorry for the late reply, was on a break and now back:) Many Thanks 🙏💜

[@frankstone]

Learning how to add fluff (image effects) is impressive but the "design" foundation of a site is critical. You provided many good pointers and I'll be looking forward to your next video.

[@LytboxStudio]

Thanks Frank! I'll keep them coming

[@DeeDee-2]

Cool Jef, you have a really clear way you explain things, which makes it so much easier for people listening. Thank you

[@LytboxStudio]

Thank Dee Dee!

[@danplumadore647]

Another awesome video featuring a crucial element that most web designers overlook: actual design. I am a staunch believer in the basics. They are there for a reason: they work. As a designer, I always look to the needs of my clients and will always feature clean designs as part of my stylescape. Of course, the keyword here client "needs." If my client wants off the wall and cleanliness be damned, then that is what they will get. I still work with gridding systems even though I have developed a good eye for layout over time. Thanks for this video and I really love the idea of featuring more on layout and design in general. There are only a few KZbinrs that I follow for inspiration. Yours is definitely one. Have an awesome week, Jeff.

[@LytboxStudio]

Yo Dan, I really appreciate that and feel the exact same way. Big thanks!🙏

[@MirzaMonirulAlam]

Jeffrey, OMG!. This video means a lot value to me. I've learnt several productivity regarding wordpress layout. Thanks a lot.

[@NooNaLaluna]

Wow! I never thought about this. Super helpful for my next projects

[@LytboxStudio]

So glad to hear!

[@TheOfficeAI]

This was much needed for me... I was trying to learn being consistent with design .. Really thankful. 😊

[@giantstepspermaculture2881]

Sweet points of focus. I'm finally learning HOW to get started! Thanks.

[@clementyo4526]

Jef, this is really helpful for my process. I've been gone through this process before without any fix formula for setting up the spacing. Now, your video really gave me cool insights how to set it up properly with fix formula. Once again thanks so much man 😁🙏

[@LytboxStudio]

Yo Clement! So glad to hear. Thanks! 🙏

[@wgm247]

well done this was great to help newbies sort out their inconsistency design issues.

[@LytboxStudio]

That's the goal! Thanks!

[@dantedmc5408]

I use the multiples of 8, I too have OCD. So, my font-size, paddings, margins are usually 8, 16, 32px. I also use 1280 for my section width, which also is divisible by 8.

[@LytboxStudio]

So glad to hear I’m not alone! Does it also drive you bonkers seeing a random px number like 17px or 23px?

[@dantedmc5408]

@@LytboxStudio seriously, when the other designer in the team makes some changes on the project I am working on. He will put random numbers for padding that fits visually, I then try to correct it to the nearest multiple of 8, lol.

[@ianochka_lou]

Brilliant! Thank you. I am all over the place with margins and paddings usually. So, thanks for the guide and making it super easy.

[@LytboxStudio]

Many Thanks 🙏💜

[@PaulSX]

This is so eye opening wish I had found this before alot of my earlier projects. Thank you so much

[@LytboxStudio]

Glad it was helpful! Thanks Paul!

[@tripleoneweb9566]

I absolutely LOVE your videos! So simple and you explain so well. Just found you yesterday, and now I am a loyal follower. Thank you so much for this ❤

[@FullyMichellethecreative]

Omg, you’re such an amazing teacher. You taught me so much in a few videos that I’ve been searching for, for the past month now! I definitely subscribed and I’m about to watch everything! Thank you so much! And keep up the web design tips and teaching! I’m embarking on this new skillset and by far I’m enjoying it but of course, I still need alot of teaching! THANK YOU! 🙌🏾🔥

[@LytboxStudio]

I'm so glad! It's an amazing journey going into web design and making a business out of it! Reach out anytime if you ever have any questions and check out our Facebook group Building Business with Elementor - it's helpful for starting on this path. Thanks!

[@OwenKane]

Real Good Video, should be part of all Elementor Users toolbox!

[@ModernyMarketing]

Best video lytbox, i am using wordpress and Elementor but that way, thank you a lot to share great tips. Cheers from Slovakia!

[@angelstrunk-cincinnatidigi5931]

Great change of pace on content. I have been watching Elementor tutorials but this is actually must-know info to get great results with any design. Thanks. I'm off to find more like this!

[@LytboxStudio]

Great to hear! Many Thanks 🙏💜

[@debjeetm4199]

Fire video. Almost nobody covered this topic. Subbed. Love from India.. cheers

[@LytboxStudio]

Many Thanks 🙏💜 form Thailand 🇹🇭

[@ht-social]

Dude! Great video... This was exactly what I needed to fix this disaster of a project. It all comes back to fundamentals! Great quality and will be watching more of your videos.

[@ibrahim.tariq525]

Hi Jeffery, This video worth Millions likes. As always, such a great content.

[@LytboxStudio]

Many Thanks 🙏💜

[@laxminarayannayak5747]

A seasoned and a veteran's presentation. Only 3 weeks old video. How much would I have missed if I had completed my website 2 months ago! Thanks Jeffrey, for such guidance. I am 70 years old trying to build my website. Tell me how to send my website to you after I complete the same.

[@LytboxStudio]

Glad it was helpful! Many Thanks 🙏💜

[@the_herbanista]

Wish I had realised about Spacing earlier - great tips!

[@LytboxStudio]

You and me both! Many Thanks 🙏💜

[@gregkeet]

I prefer the rule of 8's 8 - 16 - 24 - 36 - 48 - 60 - etc - its dead easy to remember and you can easily spot what sizes are what without checking the advanced info.

[@LytboxStudio]

That’s a good system. I bet it’s made your designers cleaner!

[@adityaprakash3518]

Extremely helpful, thank you so much

[@GinaAnagnostopoulou]

Very useful tutorial, thank you.

[@LytboxStudio]

Many Thanks 🙏💜

[@barrygrottis4578]

Awesome stuff. Much appreciated.

[@bassam4742]

Super helpful! Thank you so much! Cheers,

[@LytboxStudio]

Thanks Bassam much appreciated! 🙏

[@melaniem9578]

My layout needed this.Thank you!

[@LytboxStudio]

I'm so glad!

[@kennethkitashita5881]

Great video, learnt a lot from it, keep them coming !

[@LytboxStudio]

Many Thanks 🙏💜

[@rolzamri]

Thank you so much for your tips...

[@LytboxStudio]

Many Thanks 🙏💜

[@MrMarkhamAngel]

Wow really great information!!! Great details and great starting point for specific numbers. (liked subscribed)

[@MrBalloonatic]

Thank you for your videos, really appreciate them.I noticed you haven’t posted anything new in the last little while, so I hope that means you are busy! Keep up the great work!

[@LytboxStudio]

Wow thanks! This means a lot! I took some time off to visit family after being separated for 2 years due to Covid. That and I had to focus on my design company for a while. I needed to improve processes as we've been growing. This way, I can share with others from experience. And now, I'm back to creating content!

[@chryztian7]

Great tips! thank you for sharing

[@adi5badi]

So helpful, your video! My site looks totally messy. Now I know why.

[@susangemayel-tapper3794]

Thanks, great advice!

[@LytboxStudio]

Glad it was helpful! Many Thanks 🙏💜

[@mindvalley8022]

thanks alot . yourr vedios are great .

[@LytboxStudio]

Many Thanks 🙏💜

[@rswebmarketing]

Thanks for this video. Do you know why there is automatically space at the bottom of each text widget even if the padding or margin is set to 0 ? We see it on your example and I have the same problem, so I have to create negative margin (-15px) to cancel it.

[@stefanoaiellocopy]

Great video! I design websites on my free time and I love these tips. What about mobile version?

[@DeathByDominic]

Should your boxed section width take into account your section padding? Say you want a 1100 section width at most. But you also want to set up easy right/left padding of 12px for tablet and mobile consistency, then would you set the global boxed section width to 1076? (1100-24) Love your videos by the way, when I saw your videos I thought you were a 100k+ subscribers YT account, excellent video content and quality.

[@LytboxStudio]

Hey thank! Much appreciated. You can adjust to account for the side padding, but I prefer to keep it simple with a rounded number for my content width. Makes it much easier to manage. As long as it's consistent, it's all good.

[@ByronBrownSydney]

Thank you for your videos which i found them a long time ago..very pracifcal and easy to follow :) but yea I'm like ah dam a bit to work on which is good

[@LytboxStudio]

Glad to help! Many Thanks 🙏💜

[@swcreation5096]

loved it, subscribed

[@LytboxStudio]

Many Thanks 🙏💜

[@fulilaoji7483]

Thanks very much!

[@christianllungo4720]

Very useful tips!

[@rimonchowdhury1289]

This was super helpful!

[@LytboxStudio]

Thanks Rimon! I am so glad to hear 😁

[@claudejuniorCOD]

Officially my teacher

[@LytboxStudio]

Aw thanks! I’m so happy to hear this!

[@pedromiguelpagan-rivera8970]

Great tutorial.

[@LytboxStudio]

Thanks!

[@estudiocrow]

You are a god!!! Great video 👏🏻

[@LytboxStudio]

Haha though I am just a mortal man, I appreciate this thanks!

[@estudiocrow]

@@LytboxStudio I saw the sticky menu video (the last one you uploaded in 2020 I think). I was looking for how to improve my menus. I saw that video and I couldn't stop, I'm watching all your videos!! Thanks for explaining everything so well! I only have one question to ask you... How can I make a menu like the one on your site? A side menu that opens to the right. If you can explain that would be great!

[@fremendesign]

Very nice Video. Saludos desde España

[@oguzbenice7423]

Excellent!

[@BradK02]

I needed this , thanks.

[@LytboxStudio]

Glad I could help

[@johnjimenez3600]

Great video! Thank you

[@LytboxStudio]

Thanks!

[@morgancotten]

Hello and thank you for the work ! I have a question please, what widget do you use to animate the background of your site (spiral), the numbers 1-2-3-4-5 and the kinds of zig-zag around the texts ? Thank you very much for your answer !

[@LytboxStudio]

Thanks and apologies for the late reply - I don't use any plugins or widgets. It's all custom. For the animated background, that was simple. It's a lottie. I found it on lottiefiles.com/ and downloaded for free. The animated number and other lines are animated SVG that's coded in with CSS. And the other animations are with GSAP.

[@morgancotten]

@@LytboxStudio Great, thanks for the reply. I managed to integrate text via GSAP and I try to make each number independent because when scrolling the page, for example section 2 reloads section 1, knowing that each character has a different length, I end up with digits only half written. Please, do you have a solution ? Thanks very much !!

[@vickypaul8504]

Superb 👍

[@atultiwari2091]

Thank you sir. Learn from too much thing

[@LytboxStudio]

I appreciate that!🙏

[@dannygrio]

Thanks for this amazing content. I really enjoy this kind of information and is really helpful. This said, one thing I always question myself, is if I keep the layout size default in elementor. You answered that brilliantly! Another thing, is what size image should I create to use in the Hero section. I started just using 2000px images, however, I got a large monitor now and I just found out that the website I created the hero image for at 2000px is looking off. I am using now a 29 inch monitor at 2560px resolution. Therefore, the question I make, what is a good guideline when working with layout size 1280px as you mentioned when cropping images to use in the full width size section? An image that can span across. Thanks again!!

[@LytboxStudio]

Many Thanks 🙏💜 And apologies for the late reply. I'm coming back from a long break. Great questions. First for the images, As long as they are background they should be fine and only occasionally need to be adjust for large screens. I crop my image at 1600px max size and try to keep them under 150kb for banner size images. Designing for large screens is a challenge because people use their screens differently. Some zoom and scale in. Using REM for text can help fix a lot of this. What I suggest is creating a new Breakpoint for devices over 2400px and make adjustment from there.

[@dannygrio]

@@LytboxStudio thanks a lot. Maybe a video around this topic. At this moment I am again fighting this resolution issue. I created a hero section with two columns. The left column has text and the right column an Image. Well, when I change screen resolution the image on the right won't span 100% of the column in some resolutions. Maybe I am doing something wrong but this always happens. Thanks again!

[@LytboxStudio]

@@dannygrio for sure. I have more design focused content coming out and will put a focus on widescreens. It sounds like something else is happening with the image. Make sure to set the background size to cover and it will span the whole width. And you can share a link, I'll have a quick look.

[@brainyelementsllc]

Awesome vid!!

[@LytboxStudio]

Thanks!

[@shagorhassan9829]

great content man

[@LytboxStudio]

Thanks!🙏

[@חנותלהחנותבטעםטוב]

Great!!!!

[@mohammad-omar-07]

❤❤ thanks man

[@myrules3376]

Is it the same with containers

[@ytstudio-d]

what screen recording software do you use?

[@m4uro858]

LEGIT!

[@Andi-zs7no]

Hi Lytbox, why the number 12 is your favorite of number, why not 10, 15 or 20? 😊

[@LytboxStudio]

I think it’s from the OCD in me 😂 I like to have everything in the multiples of 4. It makes doing the math easier. And I definitely would never use 15px! Then I’d end up with all kinds of odd and random looking numbers.

[@Andi-zs7no]

@@LytboxStudio ah ok i see what you mean, i am similar to you but i do it from 5, so 5, 10, 15 etc.... 😄

[@LytboxStudio]

As long as there’s a system! The 4s are just my own quirk 🤣

[@McRaver]

12 px left and right 60 px up and down

[@McRaver]

Enkel Padding veranderen voor consistency

[@McRaver]

12:50 breedte

[@harbourdogNL]

13:56 Wouldn't it be great if Elementor had a Margins or Guides function like InDesign does!

[@ibrahim.tariq525]

Must Reply: Where did you learn the beast elementor web design. I want to learn that it, etc.

[@LytboxStudio]

Hey Ibrahim, apologies for the late reply. I learned web design by obsessing over it lol First I mastered CSS when starting as a front-end dev. Then Sketch App for designing mockups. And continuously studied design, UI, UX, Typography, Color Theory, Design Thinking, and anything design related. I still study it and continue to learn. A good starting place is studying Design Thinking. There's lots of books and content. And look at what the top designers are doing on Dribbble and Behance. And keep on learning.

[@ibrahim.tariq525]

@@LytboxStudio - Thanks for the reply! I appreciate.

[@lucascba2008]

the best thz

[@LytboxStudio]

Much appreciated!🙏

[@arnelGo-fj7qc]

savior

[@EliezerPerlmutter]

Maybe you can't talk more theses aspects on mobile layouts pls 👏🏻👍🏻

[@shahzadhaider9195]

Please improve your design ))

[@taimoorkhanvlogs]

Sir at least give us this template plz

[@knuttlaarsen7218]

Don't know how I stopmed onto this. All in all Damn good clip 🥇😎. I also have been watching those similar from MStarTutorials and kinda wonder how you guys make these clips. MSTAR TUTORIALS also had cool info about similiar things on his vids.

[@LytboxStudio]

Many Thanks 🙏💜 And I'll have to check out the MStar channel. Thanks

[@thamos6546]

How do web designers make their choice of width? For example 1280 or 900 px?

[@LytboxStudio]

Good question! I use 1280px for full width containers and 846px for smaller containers. I use a grid system with 1280px for 12 columns and 846px equals 8 columns. I'll have to make a video showing how this works

[@allisasc2439]

This was really helpful!

[@LytboxStudio]

Glad it was helpful!