Why My Websites Always Look Premium & Expensive (Made with Elementor)

0:00Do you want to know how to make your websites look super premium and next level? Well, it's actually just a few super simple design techniques that most people overlook. But instead of telling you, I'm going to show you exactly what I did to each one of these websites to make them look clean, modern, and professional. And I'm even using a really basic drag-and-drop tool called Elementor to build these sites, so you don't need to know any coding in order to pull off a professional look like these. All right, let's get right into

0:26it. Okay, so number one is the use of gradient backgrounds. Flat colors like this are fine, but gradient backgrounds just add so much more life to your hero section. And especially this where it's darker on the outside and lighter on the inside, it really helps draw the eye towards the center. These backgrounds are ones that I made myself in After Effects, and then I just bake them into the background of the video. But you can make these inside of Elementor. So all you have to do is just click on the section that you want to edit, and then just go over to style, and then you would just click on

1:02gradient, and then you can create a gradient from here. All you do is just edit these two colors here, and then you can also change the type from linear to radial. And now this is darker on the outsides than it is on the inside. And then all I did was just simply drop in an image widget into the center, and then I just replaced it with this fruit,

1:22which is on a transparent background. And these gradients can be darker on the outside than they are on the inside, or they can just be a mix of different colors that really helps add a lot of life to the background instead of just a solid color. Now, this looks better, but it still feels lifeless. So the next tip is to add motion. Motion gives your site a lot of personality, and I found these

1:46spinning fruit elements on invato.com. So I just went up here and typed in spinning fruit, and then you just come down here, and then you just filter by alpha channel. And if you scroll down, you can find a lot of awesome elements that you can just throw right onto a gradient background and use on your site. And that's what I did here inside of After Effects. And you don't need to use After Effects. You can use any editor that comes with your computer. It could be a simple free one. You don't need something like this. So, I made it an unlisted video on YouTube, and then I

2:19just came over to my container, went over to style, and then I just clicked on video, and then just pasted that link in right here. And I also add motion in really subtle ways, too. So, if I go over to this AI company website that I made, and I move my mouse around, you can see that these elements on screen

2:35are kind of moving opposite to my mouse. Or if I scroll down, the whole hero section gets blurry as we go into the next section, and that really helps draw focus towards this next section. Or if I go over to this lighting company website that I made, you can see that if I scroll down, the whole hero section gets dark. It starts to dim as I go down. And then my eye is more naturally drawn to the next section. Or this outdoor athletic brand that I've got here, you can see that if I scroll down, this whole window starts to move upwards and kind of get out of the way. And it's

3:08just a little bit of subtle movement, but again, it really helps draw your eye towards this next section. And if you have Elementor Pro, you can achieve effects like this by just going over to the section that you want to animate and clicking on it, and then going over to the advanced tab, and then coming down to motion effects. And here you can see I've got the scrolling effects turned

3:28on. got scrolling and mouse effects. I've got the scrolling effects turned on, and I've done a vertical scroll here. So, that whenever I scroll down, this whole section kind of moves up. This tab inside of Elementor Pro is super, super helpful. Also, if you want Elementor Pro, I'll put a link down in the description, so you can go get that. Okay. So, the next tip is the use of space. So, this is where a lot of websites fail because they want to cram as much useful information into one section as possible so that the viewer doesn't miss anything, but in reality, the opposite is true. It starts to feel

4:01too crowded and it's kind of annoying to skim and you don't know where to look. So, instead, I don't really add anything to my hero section other than my navigation menu and then whatever product or service that I'm trying to promote. And then same with the rest of the website. I add a lot of padding around all of my elements. And this just gives each important element on your website room to breathe. So, you can click on any section, container, or element and you can just click on it, go over to advanced, and then you just add padding around that. And then that will just create space. And you can also

4:34unlink these values and play with separate ones. So, you could do just top and bottom and delete the right and left. You'd be surprised how often more space will just instantly fix the issue. Also, if you want to learn how to use Elementor like a true pro, I've got an awesome tutorial for how to create a WordPress website with Elementor down in the description or you can just click on

4:54the card at the top right of the screen. I go much more in depth on how to master Elementor to create beautiful websites and I highly recommend it. Okay. So, next we have depth and I add depth to my websites in a couple of really subtle ways. So, the first is actually just adding an image over top of a colored box and then just offsetting it a little bit so that it's not right inside of this box. It's actually off to the side and it feels like it's more in front of this box. So, if I reset this to put the lighting fixture right in the middle of

5:25this box, it doesn't look bad. It just doesn't look as good as creating more depth by moving this outside the box a little bit. And again, same with this one down here. The technique here is to experiment playing outside of the lines. If you're using the free version of Elementor, you just click on the image and then go over to advanced and then click on layout and then you just unlink the margins and then you can just play with the values to offset them wherever you want. And if you're using the paid version of Elementor, what you do is just click on the image, and then go

5:55over to transform, and then you just come down here to offset, and then you can just play with these values here by just dragging the slider, which I think is a lot easier. I also add depth in really subtle ways as well. Like if I go over here, you can see I've got a text shadow behind this text, and it kind of helps it pop off the screen a little bit, even though that this is a white text on a white background. Or if I go over to this athletic brand that I was working on, you can see that there's a box shadow around this image, and it just helps it

6:25peel off the page a little bit more. So to achieve an effect like this, you just click on the image or container, anything that you want to add a shadow to, and you just go over to style, and then you can see box shadow down here. You just click on that, and then adjust accordingly. So you can see if I move this up and down, that box shadow is

6:43getting bigger or smaller. So last but not least, we have color cohesiveness, or the use of a color palette. So for all my websites, I try to pick three colors that match the brand or product or service that I'm promoting. So you can see here for this one, we've got this brown color here, and then we've got a khaki color down here, and then this really off-white

7:03beige color. So once you have the colors that you like, just go ahead and grab them, copy them, and then all you got to do is just put them into a text document. That way you can just copy and use these anywhere on your website. And I use them everywhere on my site, including the text. And you can see on my AI website that we've got this kind of orangeish reddish color, and if I scroll down, I use that orange down in this section as well. And this is only two colors. This is just black and orange. Or even websites with a lot of color, like this

7:35ice cream website, you can see I'm still using color cohesiveness because I'm matching the color of this text to the corresponding fruit. It's the same with the coconut and same with the kiwi. And when you put all five of these design principles to use, you can get some really beautiful websites. So, that's the secret behind why my websites always look premium and high quality. And again, if you want to learn how to use Elementor like a pro, I've put an awesome Elementor tutorial in the description or you can just click on the card right on the screen. If you found this video helpful, please hit that like

8:05button and if you want more design tips, feel free to subscribe to the channel. And drop me a comment if there's any design tips that you use that I could maybe include on a part two to this video. All right, my name's Dale and I will see you on the next one.