How To Build a TwoColumn Single Post Header with the WordPress Site Editor

How To Build a Two-Column Single Post Header with the WordPress Site Editor

One of the features I liked about Automattic’s Archeo theme that I reviewed earlier this week was its split-screen single post header. I loved that an author was doing a little something different with the Featured Image block, giving users some variety.

The design was simple. It is a two-column section with an image on the right and the post title and date on the left.

Split-screen post title and image.

It reminded me to dust off one of the untold numbers of “ideas” folders on my computer. I knew I had built something similar last year. I merely needed to find it.

I finally stumbled upon it after a bit of rummaging — I really need to learn how to name things to make them easier to find:

Single blog post with a featured image on the right and post title, author, date, comments link, and excerpt on the left.Old split post header design idea.

My approach to the problem was different, and I remember why it went to the scrap-heap. It used the Media & Text block instead of Columns. Then, and this is still the case, it is impossible to use the Featured Image inside of Media & Text.

The Columns block is a decent second choice, but it stacks differently on mobile views, with the first column always landing on top. The image takes precedence when using the Media & Text block, regardless of its horizontal position on desktop views.

There is an open ticket to use the post’s featured image within the Media & Text block. There is a similar ticket for using it within a Cover. Both would be solved by addressing an issue that would have farther reach by allowing generic



This article was written by Justin Tadlock and originally published on WP Tavern.

Disclosure: Some of the links in this post are "affiliate links." This means if you click on the link and purchase the product, We may receive an affiliate commission.

Leave a Comment

Your email address will not be published. Required fields are marked *

Show Your ❤️ Love! Like Us
Scroll to Top