Optimise Above-the-Fold Layouts for Book Posts

Introduction.

Creating and managing individual book posts on a website can be time-consuming and error-prone. Manually updating each post when you need to make changes to the layout, add new elements, or adjust the call to action (CTA) can quickly become overwhelming, especially as the number of books grows.

By utilising a custom post type in WordPress, specifically designed for books, we can streamline the process of creating and updating book posts. This approach allows for dynamic layouts that can adapt to different conditions and automatically display the appropriate elements for each book. With a custom post type, you can set up a template that includes custom fields for reviews, series details, and more, ensuring consistency and saving time.

In this lesson, I’ll walk you through the BOOKS custom post type used on the Dirk Volcano Website and show you how a single custom post type can create a consistent, engaging, and easily updatable layout for all your book posts. 

Above the Fold.

Let’s start with Above the fold on this post for the Dirk Volcano book Immediate Danger.

“Above the fold” is a term from the print newspaper industry and applied to web design. In the context of a website, it refers to the portion of a webpage that is visible to a user without having to scroll down. This area is considered prime real estate because it is the first thing visitors see when they land on the page. Optimising content above the fold is crucial because it influences the first impression and engagement.

• Starting with the left side of the post under the header we have the book cover. I’ve set the book cover as the featured image in the post so it will display in post listings and archives around the website.
• Over to the right we have the book title set as a H1 header which tells the visitor and search engines what this page is about.
• Underneath the title we have the average rating for the book along with the total number of reviews for the book. Placing the review count here is an immediate validation to the visitor this page is worth their time.
• Next we have the series details. In this example this is book 2 of a 6 book series.
• Below the series details we have the book price. Even though this isn;t a direct sales site it’s a good idea to give visitors a heads up how much the book costs when they click through to their favourite retailer.
• Underneath the price we have a text section for the book blurb.
• Underneath the blurb we have the primary call to action. This is the action we want the visitor to take more than any other. In this example we have a big button encouraging the reader ro buy directly from Amazon.

As Dirk has this series available from multiple retailers I have secondary call to action buttons under the ‘Also available from’ Subheading.

Summary.

In this lesson I showed you the layout of a Books Custom Post Type designed to encourage visitors to click on the primary call to action button. These custom post types not only show the book specific data but are dynamic reacting to pre-configured conditions to show the correct buttons, other books in the series, and even a sign up form for free first in series marketing campaigns.

All of this is done from a single custom post type linked to custom fields and a post template in WordPress.