Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:7Length:43 minutes
Landing page envato elements 400x277
  • Overview
  • Transcript

2.2 Choose the Layout, Color Scheme, and Color Palette

In this lesson, we’ll start the customization of our landing page by choosing the layout, color scheme, and color palette. Let’s begin.

2.2 Choose the Layout, Color Scheme, and Color Palette

Hello and welcome to the second lesson of this course, where we'll start customizing our landing page. So let's begin by picking a layout. As I mentioned in the previous lesson, all the layouts that come with the theme by default have the exact same structure, but their hero area is different from layout to layout basically. So all we have to do is pick one that fits with our particular requirements. So let's quickly go through all of these. The first one, index1, is actually quite good. It offers us everything we need, the logo, the app platform availability, a nice headline, and a call to action, a part from extra imagery. Then we have our index2, which is pretty much the same thing but it has a dark background, a dark theme. And I don't think it's gonna work really well here, we're gonna stick with the white theme. Index3 has pretty much the same structure as Index1, but the image here is different. Index4 is the darker version of this. So let's go to index5. Index5 presents this app kind of in the background, I don't think that's a good fit. Let's go to seven. Seven also gives us an image in the background, but it has basically a different color scheme. And the rest of the layouts kind of keep repeating, but they have different color palettes and color themes applied to them. I think the most suitable for our needs will be index3 because it has all the information we need, it uses the white color theme, and I quite like this graphic,. We might end up changing it, but if we don't, this is also a very good graphic. So we'll go with index3. So we'll go back to our code editor, index3, I'm gonna rename this to index. And then I'm gonna select the rest of the files and I'm just gonna delete them since we don't need them anymore. So now I'm going back to, Chrome. CodeKit will automatically open index HTML. All right, let's pick the color theme or the color scheme. And the color schemes refers to either we use the white scheme or the black or the dark scheme. And that's very easily done by going right here in the index where it says color scheme, dark or light. Currently it uses the light theme and that's exactly what we want. But just for reference, if you want to change this to dark, you'll just save this and you would now have the dark scheme instead. But as I was saying, I quite like the light one so I'm gonna keep this one. Now, what about the accent color? And the accent color or the color palette as it is right here will basically give you the color of the buttons and some accented elements. Now, if we take a look back in the CSS under colors, you will see that we have a lot of color palettes, amber, blue-gray, blue-brown, and so on. So what you can do is you can cycle through all of these. So for example, if we want amber, we can do that, Save, Refresh, and we'll get the updated version. So do that until you can find one that you like personally. I think I will go for this blue-gray cuz I like the color of the button and it's a pretty simple color scheme. But feel free to experiment with these and pick one that you like. So what's next? Well, next up, I guess we'll start from the top and work our way to the bottom. So in the next lesson, we'll add our own logo and we'll also customize the navigation on both desktop and mobile. And we'll also customize the individual page sections, we'll see what we need, what we don't need, and so on. That's coming up in the next lesson.

Back to the top
Continue watching with Elements