In this lesson we will customize how a post will be displayed by editing the single posts template.
To do this, let's make our way to the Site Editor, select Templates, and open the single posts template.
Another point of entry to your templates is by clicking on Manage All Templates at the bottom left, and then selecting the template from there.
This template provides the structure or design of how a single post is displayed, and you of course have the ability to modify this to meet your needs.
Currently I have the Twenty Twenty-Four theme installed, and this is how a post is structured by default when editing a template in the Site Editor.
Let's click on the List View so that we can have a better view of the structure of the template.
At the top we will see the post featured image, and below that the title, and then the post metadata such as the date, the author, and categories.
Then we will see the Post Content block, and below that the Post Tags block, and finally the Comments block.
Remember, if you want visitors on your site to be able to leave comments on posts, ensure that you don't accidentally delete this block from your template.
Now that we have seen how this theme has structured the template, let's see what it will look like on the front end,
when we open up one of our posts. At the top we have the post featured image, followed by the title, date, author, and category.
Then we will see the post content and the tag which has been assigned to this post, and at the bottom we will see the comments that people have left.
Now of course we can return to the template and make changes as we please.
In the first example, let's select the Stack block, with the Post Title block, as well as the post metadata.
Let's push that to the top of the post featured image.
Next I'm going to select the featured image, and open the sidebar settings and go to Styles.
In this example I would like to change the aspect ratio to 16 by 9.
This will ensure that the featured image on all my posts will have the same size, regardless of the dimensions of the original image.
I have decided to keep the rest of the template the same, so let's hit Save and see how the changes reflect on the front end.
Now we will see our title and post metadata at the top, and the aspect ratio of our Featured Image block has been applied.
In the second example, let's create a custom post header for our single template, using a Cover block.
So let's go ahead and add a Cover block to the top of our template.
And once I've done that, I will select to use the featured image.
To save time, I'm going to copy the Row block with my logo and navigation menu, and paste it into my Cover block.
Below that, I'm going to add my site title and post metadata.
So I will select the Stack block and drag and drop this block into my Cover block.
Then we can go ahead and delete the header and the Featured Image block.
Now the new header for our template is in place.
The next step is to select the Stack block and to align the site title and post metadata to center.
I also want to select the Site Title block and add some padding to create a bit more space around the title.
The last step is to select our Cover block, open Styles, select white as my overlay color, and then also change the overlay opacity to 70%.
Then we can hit Save and see what a post will look like with our new template applied.
Here are two examples from my site. The one is a post about surfing in Portugal and the other one is about Table Mountain in Cape Town.
Please take note, if you are not happy with your changes, click on the three vertical dots next to the name of the template and select Clear Customizations.
And then the template will revert to its original state.
Or you can go to Manage All Templates and then click on Reset.
I trust you feel more confident customizing your own post content layout.