 What's up, everyone? I'm Jeffrey at Lightbox. In this video, I'm going to show you how to improve your designs with Elementor. I'm going to show you three tips on how to make your designs look more professional, more polished, and they're just going to look doper by the end of this. Well, let's just go ahead and dive in and get started. For this tutorial, we're going to use this design right here for our example. Now, this is a really quick layout and landing page I put together. It's just a simple, clean layout and design. Now, just because something is simple and clean does not make it easy. And if you've been building websites and trying to learn design, you probably already figured out making something look simple is actually kind of complicated because we have the same layout right here, the same elements. But if we go through it, it just doesn't feel as polished. I want to show you how to not just spot what is off of the design, but how to prevent it from happening and how to make it so your layout is clean just like this. Design tip number one, adding clean and consistent section spacing. So the section spacing, each one of these areas right here, each one of these layers is a section. So we got our banner section right here, then we got our opening section right here with the logos. You got your section right here with the image and content. Then you have the same section right here just in reverse. Then we have our testimonial section right here. Then we have our icon and service section right here and call the action section right here. So each one of these needs to have its own spacing and we're going to create a system for this. We need to create a guide because if you look at the spacing here, everything is consistent. The spacing from the top and the bottom here is the same throughout the entire webpage. And this has a huge impact on the design and how the design and layout looks. A lot of the times when the design looks off, something is off is because the spacing is inconsistent. Let's take a look here. And here's how an inconsistent design looks with section spacing. So we have a lot of spacing here on the top and smaller spacing here on the bottom. Same thing on this next section right here, we got large spacing here and small spacing down here and so on. Now initially it might look okay, but something in the subconscious of the mind and the way that we're perceiving it could look off. And this is one of the biggest reasons. So to get started with this and to fix this, what we want to do is we want to first create a guide and here's how a guide looks. It's really simple to put together. You don't even need a fancy design tool to do this. You could do this right inside your notebook with a pen and paper and just first figure out how much spacing on the top and bottom you want and on the right and left. This is the main spacing that I would use. Now I would use 60 pixels on the top, 60 pixels on the bottom and that is going to be the top and bottom for each section. Now on the right and left, you see I have 12 pixels on the right and left. The reason why I put 12 on the right and left, that is for mobile. I find that being the sweet spot when it comes to mobile devices having just a little bit of spacing on the right or left. And then next on the right hand side, you see I have one other one I added and this one's a bit smaller with 40 to 40. Now this is sort of like my secondary guide right here for those rare situations where you will need tighter spacing. Stick to one or two. You don't want to create more because the more you create, you're creating more inconsistency throughout the website and if you are right now just learning design and trying to get your design skills down, you want to first start with the basics and start being able to just create a consistent layout before trying to get too artistic and experimenting with other things. Don't experiment right now, let's first get down the basics. So now let's take our guide and use it in Elementor. So here in our Elementor editor right here, now our banner section, this is going to be the only one that is going to differ from our guide because the banner is different from the rest of the sections, it's going to take up a whole lot more real estate and space on the webpage. Let's go ahead and take a look at the other sections first. So here we go our first section up here and you can see we're actually using two sections here, but this is all actually just one section how we need to treat it in our design. So if I click up here in our edit for the section, if I go to advance, you'll see I have 60 pixels on the top, I have 12 on the left and I have 12 on right and if I go to the other section, the second section to the whole section, if I go to advance, I have now zero on the top but I have the 60 pixels on the bottom and again 12 on left and right. So I have 60 pixels on top, 60 pixels on bottom and that is for the whole section right here and that's how the section looks consistent. You may notice here I'm using padding instead of margin. When it comes to adding spacing with sections, we want to stick to only padding and the reason for this is because a section should stack on top of each other like you should have one section here and one section here stacked. When you add the padding in it, you're adding the padding inside the section but if you use a margin, it's going to push the sections away from each other and when you do that, you're going to have all kinds of inconsistencies and issues that is going to come up later. It's going to happen. Now if we go back through right here, you can see I got again 60 on the top, 60 on the bottom, then 12 on left and right and as I go all the way through, all my padding are exactly the same. A very useful tip is to set up your sections first before even adding anything to them. For example, right here I'll go ahead and add a section. When I add my section before I start adding text and images inside of it, I want to set it up. So I'll go here to add a section, navigate to my advanced and I'll go ahead and put in my padding according to my guide. So I got 60 on the top, 60 on the bottom and 12 on the right and left. Now my section is set up. It's good to go and now I can start adding elements inside of it and as long as I start off every section this way, well it's going to be consistent clean. It's just going to look a whole lot smoother. Design tip number two, widget spacing. If we look here on this design, so we have an even spacing between each part of the content, between the subheader has the same spacing as the title has with the text underneath it. And if we scroll down the site, each one of these has is exact same spacing as we go through. So the spacing doesn't change on any of them. Now if we look at our off design, we're first going to see that on our banner right here, the spacing is quite different. So the spacing between this text right here and this text right here is different. This has a lot more spacing on it. And if we go down to this section right here, we're going to see the subheader has not that much spacing between the title and that this has a lot more spacing. Another thing we're going to see is that the spacing between this subheader and this title here and this subheader and this title here is also different. So what we want to do is we want to make all these consistent throughout the entire webpage. So what Elementor has is they have something built in with widget spacing, which you could control the spacing from all your widgets. And this helps your designs have a cleaner layout. You could find this if you go over to your column and inside your column, you're going to have right here your widget spaces. So if you want less space here, you see you can shrink it or you can add to it. Also, if you go over to your site settings, you could control the default for all of them. And if you navigate over here to your layout, and then right here underneath your widget spaces, you can leave it at 20, which comes at default, you can move it down to 12, or you could take it down to zero. Now, the one thing that I really suggest whenever doing this is whatever you choose, make sure it's a number that makes sense, a pixel that makes sense. Don't do 19, don't do something like 13 or just an odd number. It doesn't really make sense. I try to stick with I try to stick within the multiples of four and everything I do, just because it gives something that is more consistent because having it either at 12, 16, or 20, that to me makes sense. And maybe I just got OCD, which I do have a bit of it. Have an OCD in design is good and bad. Talk about that later. But don't do something weird leaving it at like 17. It's just a weird number. Sometimes we got to do math to adjust the pixels so that way they're consistent. And if you're having odd numbers, that's going to make it more complicated later on. Let's go back to our banner right here because as you can see, I don't if I go to each one of my elements, I have nothing in the margins and paddings. And again, here, I would only use paddings if I needed it. If I go here, again, I don't have anything, because I want my text to be the same size. But right here for the call to action button, I want space. I want to create a bit of space between my call to action and my and the content, because I want that call to action to stand out a bit more. So what I did was if I go over here to my paragraph, you're going to see I added an additional 20 pixels underneath it. The reason why I added 20, and I didn't add something like 15 or 17 or something off is I wanted to make sense for me, having a spacing of 20, 20, 20, and then 40 makes a whole lot more sense. And to the subconscious mind, and the subconscious intake that a user is going to have, having those consistent numbers is going to be a lot easier on the mind as is taken in the design and taken in the content. So I keep everything very consistent. Do not just add random numbers like this, because even though three pixels might not seem like that much, when you're adding random numbers like this, it does impact the way that the design is going to come out. It's going to come out subconsciously. We're not going to be able to see it, you know, right here, but something's going to look off. So I never use random numbers instead, choose them very thoughtfully and design tip number three, creating a clean and consistent layout. So your layout width, this is going to be the width of your content inside each section. So you're going to have sections like this where your width is pretty much full right here, which covers the whole area. You'll have sections like this right here, where your width is a bit more narrow. It's smaller right here. And then we go back to the full right here. So one thing you notice, if we scroll down this page, and if you look at the sides right here, they're going to have an even line as we scroll through. And if we go to the off design right here, and if we scroll through, we're going to see that the lines are a bit off. They're not as even right there. And this has a dramatic impact on the design and how it's perceived by the user. So what we want to do to start off with, this is going to be very similar to setting up for your section spacing. We want to first start off by putting together a guide. So create a guide. Again, you could just draw this and write this inside a notebook before you start a project. And we want to create two, we want to create two widths. One of them, this top one right here, the 1280 pixels. This is going to be for the large sections that is covering most of the webpage. And then we're going to have this one right here, smaller one at 900 pixels. And that's going to be for the smaller sections are more narrow. Let me show you how this works inside of design. Here's a design that we're working on right now. This is a given idea on how to structure the width of your content and in your layout. So as you can see here, we got these red lines right here. And this is the outer wraps right here. So this, this defines our gutter and how much we want to make the width of our content. Now the gutter, that's going to be on the right and left sides. That is a space that the content does not go past. So we have those spaces on the sides. And then we have a secondary line right here. And this is going to be for the smaller sections. So we want those smaller sections that they don't need to be full width. We want to make those defined as well. We want to set two of them. Because now if we go through, and if you take a look at the design, we make everything fit in it. You can see here I got this content. This is larger content stretched out to the outer guides. And then we got the ones for the smaller guides. The first step is to define how much width that you want for both your large content and your smaller content. The next step is going to be setting this up in Elementor. So when you're starting a project, first navigate over here and go over to your side settings. And then in your site settings go down here to layout. And then define your content width right here and make it the large one. So this is going to be your main content width. So as you can see here, I define mine at 1280. When you set that up, go here to your edit section and just leave it on box. And don't put in anything here on your width. If you manually do this on each one of your sections, you're going to create more work that needs to be done and you're going to open up room for error. Every single section I go through that is a full section. You see I leave it just as that is set up to go. And it's nice, even and clean. We're going to have smaller sections like this. So define your small sections. When you do have a small section like this, go back to your layout. In my layout, it was 900 pixels. And that is when I will go ahead and put 900 right there. And you'll see on every single one of the smaller sections, I have 900. So we got full section, full section, small section, take it down to 900. Small section right here at 900. Then we got full section and we just leave it undone and by default at 1280. So that is how we keep a really clean layout. And if we go back here to our off website world, you're going to see that it's just off. It's not consistent. First master, putting together a clean website and working on consistency and making sure your grid, your layout and everything is consistent and your websites are going to get so much better. They're going to look so dope and your skills are going to go up. And as your skills goes up, well, the results that you deliver to your clients goes up and then ultimately your prices should go up too, which I am all for and I'm hoping that this helps you out. And you might notice if you've seen some of my other videos, this is a bit different right here. And I'm going to be doing a bit more of these kind of videos focusing on the design aspects of building websites because if you get better at design, well, your skills improve and the better your business is, the better clients you could find, the better work you could deliver, that is ultimately going to help you build your business if you are creating websites for clients. And if you are creating websites just for yourself, you're a do it yourself type of person, then this is going to help you build a better website for yourself. That's going to give you more results. So I got more content like this coming up that is design focused. So if it does help and if you do like this and go ahead and subscribe, hit that notifications. I'm going to have at least one or two of these coming out every single week. And yeah, drop comments. Let me know your thoughts. If you have questions, let me know I get back to everyone. I hope this video helps and I'll be back soon with another video. Thank you.