Building A Website: Part 4

Creating A Custom Post Page

Now that we have made some progress on the design of our website, let’s go back to our class post and see how it looks.

Not bad, but there are a couple changes that I want to make. First off there is no reason to type out the post title ever time we create a new one. So we will automate that. Additionally I want to remove the comments notification at the top and change the button to black at the bottom. Lastly, the previous/next post links should be black and the related posts should be changed to related classes.

Let’s start with the top section. To edit the top section we are actually going to be creating a custom header, not a post, so go ahead and go to our pro templates page, click the add new button, and select a header. This time however, we are going to include some display conditions. Set the conditions to be for singular and all posts.

Click next, select the blank option and publish. After that hop over to the header we built for our pages. We are going to copy the layout we created. To do this turn on the builder and go to the save layout tab.

Go ahead and click to save the layout and give it a name of “MWD Header”. From there let’s go back to our new header template and turn on the builder. In the same area that you saved the header, we are now going to load it. Select our new saved header layout and click to replace it.

Ok, our navigation is now in place, so let’s create our title section. Start by adding a new row, full width with a 5% padding all around, centered font and a background of #f9f9f9. After that drag a text element into the row and click the toggle to make it dynamic. Select to dynamically give it the post title.

Once you have the post title selected move to the styling section and give it a font size of 80px. Hide it in mobile view and then duplicate it and give it a font size of 40px, making only visible for mobile.

Now since our title section has a background color of #f9f9f9, it doesn’t make sense to have that white gap in our navigation bar above it. There are several things we could do here but the best thing to do in my opinion is to give the title area a gradient background instead of a solid color. That way the background can start as white on the top and then fade into the gray color towards the bottom, allowing the colors to blend. To do this open up the background of our title row and instead of having the background as an imaage, click the gradient. Once the gradient is selected give the left circle a color of #ffffff and the right circle a color of #f9f9f9. Change the padding to 10% while you’re at it. I don’t think 5% will be enough.

Alright, let’s save our changes and then open up our class post in a new tab to see what it looks like.

Looks good. I think we are done with our header design. Let’s jump back over to our pro templates page and create a new template for the content on our class posts. Select the single option for all posts. Clink next and publish a blank template. From there drag over a post content element, give the row a top and bottom padding of 5%, and a black bottom border of 1px.

Add another row with a top and bottom padding of 2%, and then drag a text element into the row. Give the text a H3 title and give it a title of “Related Classes”. After that drag a recommended posts element under the title, select it to be four columns and disable everything but the title.