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.3 Customize the Logo, Navigation, and Page Sections

Hello, and welcome to the third lesson of this course, where we'll continue the customization of our landing page by adding our own logo, and also defining what sections and menu items we need in our page. So let's begin with the logo. If we go back in our code editor and scroll down until about line 82, we'll find our logo as an IMG tag that currently links to images/logo_home.png, which is this one right here. Now for the logo, I went also to Envato Elements and I got this Growth Logo template. It currently looks like this. And what I did was replace the word Growth, with Project, which is the name of our fictional app. And I just exported that as a couple of SVGs, which I then copied to images > custom. Now we can find this one, which is an SVG for the menu bar. It's gonna be shown right here. And this is the main logo which is, well, currently white. You cannot see it, but it's gonna be displayed right here. So let's start with the logo. I'm gonna say images/custom, and I'm gonna select logo-main.svg. So save that, and we can see a really, really big logo. Now, what you can do is simply target this class of logo_home in the CSS, as you can see here. And simply set a width to it of, let's say, I don't know, 4rem. That should do the trick, maybe even 5rem. It really depends on how large you want the logo to be. Because this is an SVG and not a raster image, you can resize it to whatever value you want. It's gonna be just as sharp on every size. So that's the logo here. Let's also take care of the logo that we'll find, I'll do a refresh here. The logo that we'll find here in this nav bar. So for that, let's scroll a bit further down and we'll find it right here. Now, there are two logos. Because the author of the theme decided to use this approach, just in case you're using the black or light, or the dark or light color schemes. So in that case you would load the dark logo or the light logo depending on what color scheme you used. In my case, I'm gonna choose to load the dark logo here. So I'm gonna go to custom, select the logo-menu-bar.svg. So now refresh. And scrolling down, it will actually give us nothing, because we need to specify width for that particular logo. So I'm gonna go to, let's see, logo_dark logo. Okay, let's go to main.css under logo. I'm gonna give it a width of about 3rem, there we go. And I'm simply gonna give it a negative margin on the top, to center align it with the rest of the content. This is not the ideal approach, but it's a very quick and easy way of aligning an element. So I'm gonna say margin-top, minus, let's say 10px. Maybe a bit less, -8, yeah, that looks about right. And of course, depending on how big you make the logo, because if you're increasing the width, the height will be increased automatically. So in that case, you need to also adjust the margin-top. But in my case, this looks just fine. Now, let's see about this navigation and what kind of page sections we need. So currently we have Features, this is one section, then Video. This, we're not gonna use, so I'm gonna get rid of it. Clients, we're gonna keep this. Screenshots, we're gonna keep. Pricing, there is not much sense in using pricing tables, because we have a fixed price for our app. So we're also going to delete this. Team is not really important in this page. Download takes us to this section, which is crucial. So we're definitely gonna keep that. And also we're gonna keep Contact. So let's go back in our index.html. And we'll scroll to where it says Menu bar. You can see all the links that appear in that floating Menu bar. So let's see, we said that we don't need the Video, so we'll get rid of that. Clients, Screenshot, Pricing and Team, we'll get rid of those as well. Instead of Download, we're gonna say Buy Project. So Project is the name of our app, and then, Contact. This button that you see here is the responsive or mobile navigation. It's actually gonna trigger this bit. And since we're here, why not take care of these links as well? If I'm moving too fast, let me just show you what I'm on about. So the navigation that we just edited is this one right here, yeah. But if you decide to go to, For example, a tablet size. You'll have an additional navigation or a mobile navigation that pops up like this. Now, you also need to edit the contents of this list right here. So that's what we're doing in this section where it says Mobile nav. So Video, we don't need, Clients, Screenshots, Pricing, and Team. And instead of Download, just like previous, we're gonna say Buy Project. And now if we do a nice refresh, Yeah, you will see the mobile navigation updated as well. And I'll just bring to a 100%. All right, now all that's left to do is get rid of the sections in the code that we don't need. So just scroll down, Let's see, Logos, this section corresponds to this section right here, with all the logos. So we'll keep that. This is for the Features, so we're gonna keep that as well. Scroll down, then we have the Video section. We're gonna grab this whole section and delete it. Client Reviews, we'll keep. Scroll down, Screenshots, we'll keep. Then Pricing, and followed by Team, yeah, we're gonna delete these as well. Delete those, and then the ones that are left are the call to action and the Contact. So let's go back to our page, let's do a refresh. And now we're left with our Features, our Clients, Screenshots, our call to action, and our Contact page. Now scrolling back up just manually, you'll see that we have this section which is on a white background. And it's followed by this section, with the Clients, that's also on a white background. And it would be kind of interesting to stagger these background colors between sections. So what we're gonna do is we're gonna go to, let's see, our Client Reviews. And instead of background_color1, we're gonna use background_color2. Which is the gray, a very light gray that you see right here. So now if we scroll down to Clients, yeah, you'll see that it has a slightly darker background. And I think it separates the content a little bit better. It goes from a white background to a gray background. And then let's also change to Screenshots. So we'll go from background_color2, to 1. Yeah, so Clients will be gray, Screenshots will be white. And then we move onto this third color, which also contrasts really well, and then to white again. All right, so now that we have the logo, and the navigation, and the page sections done, let's customize the rest of the page. And we'll start with this big hero area. What we're going to do mainly is replace the image that you see right here, and we're gonna add our own image. And I'll show you a very nice resource for creating images like this from, Envato Elements. That's coming up in the next lesson

Back to the top