2.8 Designing the Article Page Template Content
In the previous lesson we designed the sidebars of the article template. We have one on the left for the main navigation and one on the right for jumping between the page sections. Let’s now go ahead and create the main content.
1.Introduction2 lessons, 14:26
2.Designing the Template9 lessons, 1:36:08
3.Writing the Markup6 lessons, 1:06:01
4.Writing the CSS9 lessons, 1:42:34
5.Conclusion1 lesson, 02:03
2.8 Designing the Article Page Template Content
In the previous lesson, we've designed the sidebars for the article template. We have one on the left for the main navigation, and one on the right for jumping between page sections. Now let's go ahead and design the actual contents. Now the main content will be divided in sections. We're gonna have the very first section which is the page header, or the article header, that will have the article name, or the page name. A small introduction, which is optional. A video for that particular page, which is also optional, of course. And then below it, we're gonna have another in-page navigation, which basically serves the same purpose as this one on the right. But the difference is, this will be fixed, so it's gonna scroll along with the page. Or actually, it's fixed, so it's gonna stay in the same place. But the one under the video will be positioned normal, so it's just gonna scroll along with the page. But the idea is this normal navigation will just allow us to see kind of a table of contents for that particular page, and will allow us to quickly jump to a section, if we want to. The navigation on the right will be fixed, as I said, so it's always gonna be there when we scroll down the page. Now for the actual page header, I'm gonna start with a line. The fill will be also Black 12, and we're gonna place this right here. And I'm gonna make it as big as the content, which is 810 pixels. Then on top of it, I'm gonna use a heading, too, and the page that we're designing right now is called Installing, Avalanche, and I'm gonna position this 15 pixels from that line, and also 60 pixels from the top of the page. And by doing this, we can see that this content here on the sidebar aligns very nicely with our title. But this one isn't, so I'm gonna push it down 15 pixels. So now, visually, the start of all this content aligns on the top. Now for these sections, I actually got an idea when I was designing this page, I got an idea from the Markdown that you see here. So on the Markdown, you basically use one hash sign to signify H1, two hash signs for H2, and so on. It gives you a very nice sense of hierarchy. And I wanted to do something similar here, and I thought, well, why not use the exact same hash signs? So I did, and those hash signs look something like this. I'm using Muli, black, 21 pixels, and the Black 12 color. And I made this fixed in width, there are about 50 pixels in width. And I'm gonna position the heading itself, 15 pixels from the actual hash. And then the hash needs to be 15 pixels from the start of the content. And the reason I did that was because when I'm gonna create additional section headers, I can simply change the content here. And I can go up to H4, and that will fit nicely. So that is one page header. Let's group this up on our page, let's call it section header. Now it's time for the actual content. Now for the content, I'm gonna start with the introduction paragraph, which is just normal paragraph, PT Sans Regular 16. And then I'm gonna continue with a message box. Now for this particular page, a warning is needed. We need to say that, look, Avalanche requires WordPress version whatever it is to work properly, right? And installing it on an older version might result in bad behavior. So I created this message box, which looks something like this, it's a symbol, the text uses this, This color right here. The background uses this color right here, which is basically this one with a 10% opacity. And all I did was to leave about about 15 pixels of distance from the top and bottom. It's 13 and 17 here because visually, I needed to align it in the middle, and 30 pixels on the left and right. And also I added this little border here on the left side, with the same color of the text. Next, we have the video placeholder. And the video placeholder looks something like this. Is just something temporary, we're gonna have embeds when we do the actual coding, but for now, this is what it should like. We have the video here, we have a caption under the video. And also, the video is positioned at 60 pixels from the element above, and this is positioned at 30 pixels from the element above. Next, we're gonna have the in-page navigation, which looks something like this. So all I did was to use a small link, which is PT Sans Bold 14, and I'm using the primary color. I did leave a little bit of space on the left side, which has a border 4 pixels in width, and it has the Black 5 color. And then I also have the H5 dark heading, for which I have created this text style. Now what I'm gonna do is add the rest of the content for this page. Basically we have Step 1, which is to locate the theme files. Now you'll notice that we have a lot of whitespace, a lot of distance between these sections, and that is 150 pixels. And I did that on purpose, l wanted these sections to be divided very well from the rest of the content. So we have Step 1, I'm using two hash signs here, and this is basically showing a paragraph with an attached image and a caption. Same goes for the Step 2, notice that I'm using two hash signs for these smaller headings. Again, paragraph, and then an information message box, and then also an image with a caption. And then finally, Step 3 is also a message box with a normal ordered list. And finally at the bottom, we have the navigation, which can take us to the next or the previous page in the documentation. And this is also set at 150 pixels from the content above. And let's just move up this footer so it meets with the navigation nicely. Finally, let's reduce the size of this hardboard by 11 pixels. Now for the navigation, I'm using these symbols, which are placed at 60 pixels from the top-bottom and then 30 pixels from this center dividing line. And inside, I basically have an H6, and an anchor tag with a nice icon that goes either to the right or to the left, depending on the length. And that is one of the article pages, of course, the content here will be different from page to page. For example, in the introduction page, we might have a different content that's something else entirely. We can have sections like, what is WordPress, what is a WordPress theme, what's in the package, and so on. Now the finishing touch for this page is actually in this right sidebar. Where I'm gonna place a Watch a Video widget, which has a 60-pixel gap between it and the one above it. Now again, the idea here is that this video can be shown all the time, so you always have access to the main page video, or it can be shown when you scroll past the main one. And when you do that, this one will appear, giving you access to that video. Either way is fine, I'm just gonna keep it on all the time, and only display it if there is enough vertical room to do that. All right, and that's pretty much it for this article page. Of course, in the final files, in the source files that you can download with this course. You will find an additional page, an additional article page, and also a tablet and smartphone version of one of these pages. But because of the time constraints, I do have to fast-forward through this. And we're gonna move on to the final lesson in the design process, or the design chapter, if you want, and that's gonna be designing a stand-alone page. And it's one of the pages for a frequently asked questions, or support, or change log, those are the pages that I'm talking about. So I'll see you in the next lesson, where we're gonna be designing the final page for this template, see you there.