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

Cancel
  • Overview
  • Transcript

3.2 Articles Page

The articles page is an important part of any publishing website. Let’s set about designing one for our corporate website.

3.2 Articles Page

Hello and welcome to lesson number nine of this course where we'll build the articles page. And this is the second one from the resources category. And let see what kind of structure we're dealing with. So for articles we're looking at a simple hero, and then basically a list of resources. And it's followed, of course, by a call to action and the footer. And for the list of resources we're looking at the title of the article, the author, an optional author description, preview image, and a description or an excerpt from that particular article. So let's start by duplicating the customer's art board because I wanna keep this initial header. So I'm gonna delete this bit. I'm gonna rename this to Articles. Let's make this a little bit bigger. Okay, let's change the text here. I'm just gonna say we have an extensive article library. And for our subtitle, browse through to find useful information that's not included in the documentation. All right, for the list of resources let's go to the blog page because I have a feeling we're gonna find some kind of layout here that's gonna work very well for our articles. So this could be an interesting option. This could also be an interesting option, or this. But we have to be careful because this is the blog page, so kind of the main content from here will be brought over to the blog page that we're gonna design in the next lesson. So we have to be careful about that. And that's about it here, all right. So first of all, which one would we choose for the blog or the blog posts? I think we could go with this one as a spotlight or a featured story, and then these for the rest, okay. So that means we'll use these. So copy that, and let's paste that in. Now we're gonna make a couple of changes here, obviously. We're gonna make this entire section white. We're gonna remove this text, and actually we're going to make this a little bit bigger. And I'm going to duplicate these. And I'm going to resize this to be 120 pixels from the actual content, yeah. I'm gonna bring it up and make sure that, where is it? The divider is at the very top, okay. And now bring these two elements to the top. And we're gonna resize this. Okay, now all we have to do is decide how we want to display these. Because the way we have them right now, it's pretty interesting, but I'm not a big fan of the article image being set as a background. So I think what I'm gonna do is simply work on one of these. I'm gonna select this, this is a mask by the way. I'm gonna select the place holder, go to Layer > Mask, and I'm gonna uncheck this bit. So the photo should now be free to move anywhere. Yeah, I'm gonna increase the opacity there back to 100%. And, you know what, I'm gonna delete the rest of these. I'm gonna bring in the layout, and I'm gonna change the entire layout of this element. So right now it's on four columns allowing it to be displayed or allowing the page to display three of these in a row. But I think I'm gonna resize this to six columns so we can display two on one row. And I'm actually gonna delete this photo, this button, gonna place it something like this. The read time, I'm gonna increase the size of this text area, and also the size of this text area. And I'm gonna draw a rectangle. And let's say I want to use a 16 by 9 image, I'm going to go to Plugins, Aspect Ratio, 16 by 9. And that's a bit too big. So one thing we can do is we can place it right here and make sure we set the same corner radius, so 10;10;00. So only the top left and right corners are rounded. And I'm gonna send this, Back. So with it, I'm simply gonna go to Craft. And I'll get a photo from Unsplash, From whatever category, it doesn't matter, it's just a placeholder photo so I can see how this is looking. Okay, that's actually not bad, not bad at all. I'm gonna place the text above the photo, 30 pixels there. The description below the photo, this I'm gonna place it right here, also 30 pixels above the title. And let's see, the Read button. I think we can squeeze it in here, and this I'll just align it vertically. And I'll place it at, let's say, 15 pixels. All right, and simply now I'm gonna resize this bit. So let's see how that looks like. I think that's looking a bit better. It's not as crowded as what we had before, and it allows us to use some bigger imagery. And just for the sake of it, let's copy this. Let's put it in the correct position here, and let's try to create an alternative where this is actually white and the text is black there. That's not bad, but we lack definition so we need to add a border. So I'm going to use the same black color but decrease the opacity, all right. So now we have two options here basically, we have option number one and we have option number two. Personally, I like option number one. So yeah, we're gonna stick with that. So let's duplicate this. We're gonna paste one here, and then duplicate them and paste them right here. We need to make this a little bit taller. Let's see, I think I'm gonna use a 100 pixel gap there or even a 120. As I said in a previous lesson, before you hand these off to your developer, make sure you get these measurements done right. Okay, and that is the articles page. Let's take a closer look. Yeah, we have the hero, we have the list of articles. And we have the rest of our usual content. All right, next up on the list is the blog page. And we're gonna draw a lot of inspiration from the blog page that comes with the UI kit. I think that's very well done, so we're gonna grab a lot of elements from there. That's coming up in the next lesson.

Back to the top