Birthday Sale! Up to 40% off unlimited courses & creative assets Birthday Sale! Save up to 40%!
by
Lessons:7Length:43 minutes
Landing page envato elements 400x277
  • Overview
  • Transcript

2.4 Customize the Hero

In this lesson we’ll create a custom hero area. We’ll take advantage of the built-in base styles, but we’ll also add a custom image and custom text. Let’s begin!

2.4 Customize the Hero

Hello and welcome to the fourth lesson of this course where we'll create a custom hero area. It's this one that you see right here. Of course we'll use this base template but we're gonna add our own image and our own text. So when it comes to this image, you have two options. Either customize this one with your own screenshot inside the display here on the tablet or you can create a completely new image from scratch. So I'm gonna show you how to do both. First, to customize this image, you have to open the original PSD files that came with the theme. You can find those under PSD files SPOT_homepage. So here we have two scenes. First there's this, and the second is this one that you can actually see right here. So the way to customize this is actually quite simple. These are smart objects, the display and the tablet. So all you have to do is double-click and you would add your own picture in here. So let's double-click this one, which is the display. And I'm gonna drag an image that I just created quickly. We're gonna save that and when we go back, you will see that, The display now has the image that we just created. And you can do the same with the tablet. You also have access to different color variants. So you can show or hide any of these layers and choose the color that you want. And then once you're done, you will simply go to File > Export and you choose one of the options. Either Save for Web or Quick Export as PNG, if you want a PNG or Export As, and you can select your format here either from JPG, GIF or SVG. I recommend you export this as a JPG. We don't really have to go to 100% quality. l think about 75 or 80% quality should do just fine and you'll get a pretty decent quality to it. Now this is the first method. The second method, the one that l choose to go for, is to create one of these images from scratch using a scene generator. Now you can find a bunch of scene generators on Envato Elements, this is one of them. Basically all the elements that you see here can be toggled on and off, can be moved around and this is one of them, this is another. And you can see here in the preview, there are multiple options for this, but the one I chose to go for is this one. It's called Desktop Mockup Creator and I thought that it fits very well with what we have here. So I downloaded this. I opened it up in Photoshop, and I came up with something like this, okay? This is actually quite easy to use. All elements are basically placed in their own group, and I can choose to hide or show them. So for example, instead of this Dell display, all right, I can hide this and I can show a cinema display from Apple. But because our app is cross platform, I wanted a different monitor here to represent maybe a Windows installation and this, which is clearly a MacBook, to represent an Apple installation. And then all of these objects I just added the way that I saw fit and at the end I simply added this background. And I used the color on it, 2b3046, and then I exported this as a JPG. So let's go ahead and change that image. The way we do that is we go back to our hero section right here and let's search for the solid_02 class. We're using the blue-gray color palette, okay? This is where we can find that background image. So this is actually where we're gonna change it, okay? So I actually copied my image into Images > custom > hero-background.jpg, and you can see it here. So I'm gonna say images, custom/hero-background.jpg. Let's do a refresh. All right, but now it's also on the top and I don't want that. So I'm gonna simply specify no-repeat, Okay and we also have to fill in the rest of the background with a solid color. So when the image runs out, the color basically takes over. And because it's the same color we used in the image, there is virtually no difference. Okay, so that's the image that we used. Let's to a quick check on mobile to see if it scales properly and it does. Next let's tackle this section, thepPlatform availability and price. So this is gonna be available on MacOS and Windows, not necessarily Android, so we're gonna remove that and the price, let's put it at 15.99 and then let's change the slogan here. We'll say, project management and GTD, getting things done, right? It's a demo statement, of course. So that's our customized hero. We changed the image here, we also changed the color of the background. We have a new logo. We have an updated availability. And also we changed the main statement to fit our needs. Now of course this button also needs a proper link. So we can either do this from JavaScript or we can replace this with an anchor tag. So a class btn href and you specify it to go to whatever page you're selling your product to. All right, that's it for the hero section. Now let's move on to the rest of the elements in the page where I'll show you how to customize the icons. The template here comes with a pre-built icon font. So we can pick from I think a few hundred icons. I'm also gonna show you how to customize the testimonials and screenshots. That's coming up in the next lesson.

Back to the top