WEBVTT

00:00:00.000 --> 00:00:07.600
Do you wanna know how to make your websites look super premium and next level? Well, it's actually just a few super simple design techniques

00:00:07.600 --> 00:00:26.375
that most people overlook. But instead of telling you, I'm gonna 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. Alright. Let's get right into it.

00:00:29.330 --> 00:00:32.690
Okay. So number one is the use of gradient backgrounds.

00:00:33.330 --> 00:00:46.375
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 light on the inside. It really helps draw the eye towards the center.

00:00:46.695 --> 00:00:56.535
These backgrounds are ones that I made myself in After Effects, and then I just baked them into the background of the video. But you can make these inside of Elementor.

00:00:56.880 --> 00:01:01.680
So all you have to do is just click on the section that you wanna edit, and then just go over to style,

00:01:01.840 --> 00:01:03.600
and then you would just click on gradient,

00:01:03.920 --> 00:01:11.440
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.

00:01:11.895 --> 00:01:15.975
And now this is darker on the outsides than it is on the inside.

00:01:16.055 --> 00:01:22.695
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,

00:01:22.935 --> 00:01:28.860
which is on a transparent background. And these gradients can be darker on the outside than they are on the inside,

00:01:29.020 --> 00:01:35.980
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.

00:01:36.380 --> 00:01:42.055
Now this looks better, but it still feels lifeless. So the next tip is to add motion.

00:01:42.215 --> 00:01:48.855
Motion gives your site a lot of personality. And I found these spinning fruit elements on envato.com.

00:01:48.855 --> 00:01:51.735
So I just went up here and typed in spinning fruit.

00:01:53.320 --> 00:01:57.400
And then you just come down here and then you just filter by alpha channel.

00:01:57.880 --> 00:02:18.845
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,

00:02:19.085 --> 00:02:20.845
and then I just came over to my container,

00:02:21.260 --> 00:02:22.540
went over to style,

00:02:22.700 --> 00:02:38.065
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 are kind of moving opposite to my mouse.

00:02:38.225 --> 00:02:45.265
Or if I scroll down, the whole hero section gets blurry as we go into the next section. And that really helps draw focus

00:02:45.505 --> 00:02:47.025
towards this next section.

00:02:47.345 --> 00:02:58.890
Or if I go over to this lighting company website that I made, can you 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.

00:02:59.290 --> 00:03:23.110
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 just 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 wanna animate and clicking on it. And then going over to the advanced tab,

00:03:23.190 --> 00:03:25.350
and then coming down to motion effects.

00:03:25.670 --> 00:03:38.085
And here you can see I've got the scrolling effects turned on. So you've 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 kinda moves up.

00:03:38.965 --> 00:03:50.020
This tab inside of Elementor Pro is super super helpful. Also, 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.

00:03:50.260 --> 00:03:54.500
So this is where a lot of websites fail because they wanna cram as much useful information

00:03:54.660 --> 00:03:59.140
into one section as possible so that the viewer doesn't miss anything. But in reality,

00:03:59.555 --> 00:04:18.810
the opposite is true. It starts to feel too 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.

00:04:18.970 --> 00:04:25.130
And this just gives each important element on your website room to breathe. So you can click on any section,

00:04:25.370 --> 00:04:27.050
container, or element,

00:04:27.130 --> 00:04:29.130
and you can just click on it, go over to advanced,

00:04:29.525 --> 00:04:40.645
and then you just add padding around that. And then that will just create space. And you can also unlink these values and play with separate ones. So you could do just top and bottom and delete the right and left.

00:04:41.045 --> 00:04:52.590
You'd be surprised how often more space will just instantly fix the issue. Also, if you wanna learn how to use Elementor like a true pro, I've got an awesome tutorial for how to create a WordPress website with Elementor

00:04:52.590 --> 00:04:59.885
down in the description, or you can just click on the card at the top right of the screen. I go much more in-depth on how to master Elementor

00:04:59.885 --> 00:05:02.685
to create beautiful websites, and I highly recommend it.

00:05:03.005 --> 00:05:05.005
Okay. So next, we have depth.

00:05:05.165 --> 00:05:41.130
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 this 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,

00:05:41.130 --> 00:05:43.930
you just click on the image and then go over to advanced,

00:05:44.090 --> 00:05:53.525
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,

00:05:53.525 --> 00:05:57.285
what you do is just click on the image and then go over to transform.

00:05:57.845 --> 00:06:00.085
And then you just come down here to offset,

00:06:00.325 --> 00:06:04.965
and then you can just play with these values here by just dragging the slider, which I think is a lot easier.

00:06:05.660 --> 00:06:17.900
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 kinda helps it pop off the screen a little bit even though that this is a white text on a white background.

00:06:18.060 --> 00:06:23.695
Or if I go over to this athletic brand that I was working on, you can see that there's a box shadow

00:06:23.855 --> 00:06:45.240
around this image, and it just helps it peel 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 wanna 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 getting bigger or smaller.

00:06:45.720 --> 00:06:49.960
So last but not least, we have color cohesiveness or the use of a color palette.

00:06:50.515 --> 00:07:04.355
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 beige color.

00:07:05.270 --> 00:07:09.030
So once you have the colors that you like, just go ahead and grab them,

00:07:09.350 --> 00:07:31.845
copy them, and then all you gotta 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 orangish 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.

00:07:32.165 --> 00:08:01.335
Or even websites with a lot of color like this ice cream website, you can see I'm still using color cohesiveness because I'm matching the color of this text to the corresponding fruit. So 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 wanna learn how to use Elementor like a pro, I put an awesome Elementor tutorial in the description,

00:08:01.495 --> 00:08:17.530
or you can just click on the card right on the screen. If you found this video helpful, please hit that like button. 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. Alright. My name's Dale, and I will see you on the next one.