To make this layout change for all single posts, you must go to the site editor via Appearance > Editor in the admin. Step 1: Selecting the Single Post Template Select the Single Post template. Side note: I would love to see a plugin that adds dummy post data instead of the default placeholders. It is OK to save and check your work on the front end as you go through this. I wanted to note this in case it disorients or even throws anyone else off. The placeholders used for Post* blocks do not offer me enough direct feedback, so I often refresh an example post on the front end as I build layouts like this. How do we know that what we see there will translate correctly and turn out like the following? Front-end view of single post with split-screen header.Įven I struggle with this visualization at times. However, those placeholders will be transformed on the front end. As shown in the following screenshot, the editor has placeholders: Editor view of split-screen post header. It is hard for some people to visualize the result without the post data. Both would be solved by addressing an issue that would have farther reach by allowing generic blocks to utilize site or post metadata.Īt least for now, we must work with the tools we have.įor this entry in the Building with Blocks series, I will walk you through modifying Twenty Twenty-Two’s single post template to create a similar layout. There is a similar ticket for using it within a Cover. There is an open ticket to use the post’s featured image within the Media & Text block. The image takes precedence when using the Media & Text block, regardless of its horizontal position on desktop views. The Columns block is a decent second choice, but it stacks differently on mobile views, with the first column always landing on top. Then, and this is still the case, it is impossible to use the Featured Image inside of Media & Text.
It used the Media & Text block instead of Columns. My approach to the problem was different, and I remember why it went to the scrap-heap.
#Responsive columns home page wordpress how to
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: Old split post header design idea. I knew I had built something similar last year. It reminded me to dust off one of the untold numbers of “ideas” folders on my computer. It is a two-column section with an image on the right and the post title and date on the left. I loved that an author was doing a little something different with the Featured Image block, giving users some variety. One of the features I liked about Automattic’s Archeo theme that I reviewed earlier this week was its split-screen single post header.
0 kommentar(er)
