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

https://gist.github.com/topleague/3b4368cab9897053162c7156bb89c660

Display Featured Image on top of the post

https://gist.github.com/topleague/30ee5499fbfb5a246e6ff65f5a93642a

Display Author Box Below Single Post

https://gist.github.com/topleague/2ff4ddf6ec8249c794e2fe36b58867c4

Add Excerpt support to Pages in Genesis

https://gist.github.com/topleague/72bceac1862ce184a94681cc30cc8a46

Display Excerpt as Page Subtitle in Genesis (Conditionally) 

https://gist.github.com/topleague/97df38295a24955fa884a5d7c67a3193

Display Excerpt as Post Subtitle in Genesis (Conditionally)

https://gist.github.com/topleague/bac4285488bc87434f70a7fde4b95475

Add CSS to Make it Work

You can add your own css, but here is the css I’ve added.

https://gist.github.com/topleague/6dfe8ce3c67b0774e99ed6dc7e481d32

That’s all. Check your new layout on desktop and mobile devices.

Let me know if you have any questions.