FREELessons: 15Length: 2.2 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.3 Blog Page

Let’s move on to the blog page. For this, we’ll draw inspiration from the existing blog page in the UI kit and change just a few things.

3.3 Blog Page

Hello and welcome to lesson number ten of this course where we'll create the blog page. So let's take a look at the structure that we need. We have the usual hero, then a list of blog entries. A sidebar with some categories and a blog subscription form pagination, optional of course, and call to action and footer. So let's go back here, and I'm gonna duplicate this articles art board, and I'm gonna call it Blog, and in here, I'm gonna delete these stories. Let's take a look at the blog page from the UI kit. So here, we're gonna say Our official blog. Let's bring this up and for a description I'm just gonna say tips, tricks, and overall good information. So I'm gonna delete this because I want to start with this spotlight. It's basically a story that we're gonna use as a spotlight. Okay, that looks pretty good. And then, for the rest of the entries, I'm gonna use this format right here, so actually, I'm just gonna to copy one of them. Let's make this bigger. I'm gonna paste that in, and you know what? This got me thinking that the blog is actually, you can almost look at it like a separate entity within your website. Because you have your products and you have your pages that, Are kind of supporting those products or about those products. And then you have the blog. So you have your website, and you can divide it in two parts basically, one that sells and one that basically educates. And the one that sells is all of these are our pages that we're making. And the one that educates is the blog itself. So it could stand to reason that it might have a different layout. So instead of using our default layout here, let me just get rid of this. I quite like the layout of this blog. So I think I'm gonna copy a lot of this stuff from here. And that's about it. All right, I'm gonna paste it in. I'm gonna get rid of this, and I'm gonna bring this in, but the hero, our hero, I'm gonna bring it up to the top. So I'll actually select this, delete it, and show our hero. Let's detach from the symbol, because we need to make some changes to it. Let's use white as a color there. Let's also use white for the logo. Yeah, that's quite nice. I think it works really well for our blog. And then we'll bring in these categories, basically. So instead of having a sidebar displaying the categories, we can just use these. And of course, just replace the images here, and I'll replace the text. I also like this spotlight. These feature stories, I don't think they belong there necessarily, so I'm just gonna bring this up like that. Okay, seems we have small errors here. And let's just align these, To the baseline, like that, 15 pixels there. I'm not sure where or what this was supposed to be. Maybe, An entry without an image, who knows? I also like the button here that says Read All Stories. But instead, we're gonna say Load All Stories, or actually, Load More Stories. So when we click it, there will be more blog posts or stories being loaded right here, and since we're doing this, we don't really need a pagination anymore, right? So actually, center-aligned is fine there. And actually I think that for a blog page this is actually really, really good looking. And it should be quite enough for what we need. Let's bring these up as well. And, Resize the art board. All right, so that is our blog page. This is one instance where we basically copied another page from the UI. Just because it was so well made and it gave us a unique layout but also one that kind of fit our requirements. Yeah, it was a very easy page to make. Next up, we're gonna build the support page. That's coming up in the next lesson, see you there.

Back to the top