7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 15Length: 2.2 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.5 Pricing Page

Hello and welcome to lesson number 6 of this course, where we'll build the pricing page. Previously we finished the features page, so to get started what I'm going to do is simply duplicate this one because it's actually quite, quite similar. So let me just move over a little bit, I'm gonna call this pricing. So, for the pricing page we have the same header or hero that we had before. So, we have hero with page title, optional description. Then we have a switcher for monthly/annually. The pricing tables, an FAQ and call to action. So from here, we're going to change the text. And I'm going to say pricing for everyone. And here we'll basically say that time tracker has a pricing plan that will fit everyone's budget. And I'm just going to bring this up. Oops, to 30 pixels, like that. And let's see, we're going to delete a couple of things from here. We don't need this, this, or this. So get rid of those. We'll keep the call to action and footer. But let's bring in the pricing information, or the pricing table. So we'll copy and paste that. Let's position it at 90 pixels from this area. I'm gonna delete the title because there's no point in keeping the title there. And I'm gonna move the actual content up. That was 96 pixels there. So we have the switcher, we have The pricing tables. I'm actually double check and see what kind of distance we had here, 140 pixels, all right. Just like that. And what else do we have to put in here? We have an FAQ, and the rest we have already. So let's do a quick search for an FAQ section or FAQ stands for frequently asked questions. I'm not sure if we will find that exact format, but maybe we can find something that will work for us and we'll be able to change it. I'm just quickly glancing through these. I think I remember seeing one, but yeah, I haven't written that down at first. That was my mistake. And now I have to go through these again. There we go, number 17. We have FAQ, fancy that, okay? So we're gonna copy this entire section. And what's nice about this is that there are also links to the knowledge base, the documentation. So we'll keep those. But the problem that I'm having is that we have this dark background here, and then it's immediately followed by a dark background. So I would be much more comfortable if I were to change this to a lighter color. But that means we also have to change the color of the text. So let's do that quickly. So, let's see these. I'm just getting the white text and I'm gonna change their color to the color of this background. And let me just sort of try other color references here. I'm gonna get That uses opacity, all right. And I'm gonna get these. And I'm also gonna change the color to the black, but I'm gonna change their oops, excuse me. But I'm going to change the opacity to 50%. So if I change this colour to white. Now, we're almost there. We just have some separators here, some dividers that we need to take care of. But I'm gonna use black on those and just turn up the opacity to about 15, maybe 20%, something like that. Okay, and of course you can change the text, for these. So for example this would go to documentation and this would go to articles. And change this to Visit Resource Centre and this one to Read Articles. Okay? Just to, let's make sure everything is properly aligned with the grid here. And yeah, mostly it is just couple of pixels here but that's not a big deal. Let's bring these two up and let's change the high of the art board, perfect. And with that, we've created the pricing page. That was a fast one. All right, in the next lesson, we're gonna build our customer's page, that's also in this big product section. See you in the next lesson.

Back to the top