Design With Elementor - 3 Tips To Improve Design Skills

what's up everyone i'm jeffrey at lightbox and 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 web page 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 a 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 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 web page 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 in our edit for the section if i go to advanced 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 advanced 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 go here to add a section navigate to my advanced and i 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 parts of the content between the sub header 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 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 sub header and this title here and this sub header and this title here is also different so what we want to do is we want to make all these consistent throughout the entire web page so what elementor has is they have something built in with widget space in which you can control the spacing from all your widgets and this helps your designs have a cleaner layout you can 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 could shrink it or you could add to it also if you go over to your site settings you can 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 probably do have a bit of it having ocd and design is good and bad talk about that later but uh don't do something weird leaving it at like 17 is 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 uh intake that a user is going to have having those consistent numbers is going to be a lot easier on the mind as it's taken in the design and taking 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 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 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 12 80 pixels this is going to be for the large sections that is covering most of the web page and then we're going to have this one right here a smaller one at 900 pixels and that's going to be for the smaller sections that 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 to give an idea on how to structure the width of your content and then 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 with 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 [Music] 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 site 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 and 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 900 then we got full section and we just leave it undone and by defaults at 1280. so that is how we keep a really clean layout if we go back here to our off website well 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 can 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 your 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 focus so if it does help if you do like this and go ahead and subscribe hit the notifications i'm gonna 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 [Music]

Channel: Lytbox

Views: 6,559

Keywords: elementor tutorial, design with elementor pro, homepage design with elementor, web design with elementor, page design with elementor, landing page design with elementor, wordpress website design with elementor, responsive design with elementor, web design wordpress elementor, web design wordpress tutorial, design with elementor, web design for beginners, wordpress web design tutorial, elementor design, elementor design tips, elementor design tutorial, elementor design ideas

Id: WLzXaiQnqHw

Length: 17min 17sec (1037 seconds)

Published: Sat Sep 25 2021