I love experiment and customize Genesis Sample theme all the time. There’s a charm in taking inspiration from other websites (Genesis or Non-Genesis) and trying to replicate their design layout just for fun. It’s a great learning process which ultimately stands you in good stead.
Recently, I came across NorthEastStudio.com and loved their clean layout. There’s something unique to their design. The design allows the entry content to gain prominence while pushing the entry meta (author byline and category info) below the post. As a result, you get to see more content above the fold. I find this useful because Google always advocates displaying more content above the folder whether it’s a desktop version or mobile.
Let me list them below:
They have a hero image in the header, entry title and author byline on the left and entry content on the right hand side.
- The author box is display right after the entry content.
- Page excerpt is displayed below the entry title on pages (as subtitle).
- So, basically, their layout looks clean and shows a lot of content above the fold.
In this post, I’ll show you how to replicate the design and add a few more elements to make it your own.
The additions I will make are as follows:
- Display featured image above the entry content.
- Conditionally display post excerpts below the featured image.
So, here we go:
In order to replicate their design, we need make a few customization in Genesis Sample Theme.
Display Author Byline under Footer
Display Featured Image on top of the post
Display Author Box Below Single Post
Add Excerpt support to Pages in Genesis
Display Excerpt as Page Subtitle in Genesis (Conditionally)
Display Excerpt as Post Subtitle in Genesis (Conditionally)
Add CSS to Make it Work
You can add your own css, but here is the css I’ve added.
That’s all. Check your new layout on desktop and mobile devices.
Let me know if you have any questions.
