Saturday, May 21st, 2022

How to Create a Post Hero Header With Blocks – WP Tavern

For as long as I can remember, I’ve been obsessed with art direction on the web. The term is often used to describe the act of designing individual pages around content. This is in contrast to how most users usually act when writing a post. The template or design is cut out of the written word.

Jason Santa Maria’s website is likely to be the most cited showcase of such posts. I highly recommend browsing through, especially for Candygram articles.

There are times when stories demand more visual emphasis. Material Design can paint a picture that simply isn’t possible through text. Sometimes, these are detailed, full-page layouts. In others, it is the insertion of images and other elements that capture the reader’s attention.

This is one of the reasons I’ve recently enjoyed using the Archeo theme by Automattic. Its patterns bring back memories of early, pre-domestic-internet magazines, each featured story with its own layout.

Over the years, I’ve tried to develop several systems for per-post design, but they always fell short of where I wanted them to be. Part of the problem was that I didn’t have a solid framework that was future-proof enough that I still wouldn’t be able to fix its problems a decade or more down the road.

When WordPress launched its block editor, those old ideas started coming back to the surface. Could it allow people to visually tell their stories and have some assurance that the layouts won’t break some releases later?

Today, I believe WordPress makes it more possible than it ever has been. There are a few things it could do better, like expanding its shared CSS toolkit and bringing the range of its design controls into more blocks. But, at its heart, Block Editor is a design language that allows end users to tell their stories through visual and textual elements. It will only get better with version 6.0 and above.

I wanted to offer a small glimpse of how users can create more visually-unique stories using these tools. This entry in the Building With Blocks series is meant to provide a jumping-off point.

For those who follow along, we’ll create a post header/intro section for a fictional story about Gotham City:

It’s not a full-page design, but I hope it helps people start experimenting more with their content. WordPress has a ton of solid design tools to work with right now.

I actually sewed two different patterns together for this tutorial. However, I didn’t feel comfortable with the methods I used for the original:

Image background with full-width hero section bleeding through.  On the left, the post title, byline, and content are in one column.

In particular, aligning content to the left and in a max-width container has its problems. There are at least two ways to go about it. The most commonly used method is to insert a 50/50 column block, using the first column for content and leaving the second blank. It has the most cross-theme compatibility, but it can get messy at some screen sizes.

The second is to rely on the cover block’s position control to align the inner group block to the left. This is the best option for pure reactive layout. However, its output was inconsistent when testing against multiple block themes.

In the end, I put the first layout aside. However, I wanted to at least share it with those who wanted to take a crack at it.

Creating a Post Header Hero

For this pattern, I worked with version 12.9 of the Gutenberg plugin. I tried to stick with the features available to WordPress 5.9 users, but the old interface feels slow and heavy compared to recent updates to the plugin.

I also used a custom block theme. Either one should work, but it should have a “blank” template or equivalent full-width, open-canvas option. If not, you can create one with the built-in template editor. Only the post content block will be needed inside it.

Step 1: Creating the Background

WordPress post editor with cover block inserted.  On the right, the Overlay Colors panel pops up with the gradient selected.
Adding a cover block with a background image and gradient overlay.

Cover blocks are my go-to choice when creating multiple layouts. It is one of the most versatile options in WordPress, giving way to a wide variety of designs. It’s no surprise that I started here.

The first step is to insert a new cover block and select an image for it. Then, set it to full-width and toggle on the full-height option.

Depending on the image chosen, you can customize the overlay option to match it. I selected the gradient “Vivid Cyan Blue to Vivid Purple” with 70% opacity. I wanted enough of a background image to see it through, but not so much that it overwhelms everything else.

Step 2: Spacers and a Group

WordPress post editor with two spacer blocks and a group nested inside a cover.  On the left, the list view is open, showing the hierarchy.
Adding a group between two spacer blocks.

At this point, we are still creating the overall layout for the content. Inside the cover from step #1, add a spacer, group, and another spacer.

set each spacer to 2rem or your preferred price. It’s only meant to show a bit more of the background image above and below the pattern. Alternatively, you can adjust the padding option on the outer cover block to achieve a similar effect.

For the group block, I only changed the border settings. i chose 3px For width, set the style to solid, and choose white for the color.

note: The group block at this stage will be unnecessary in the future. Ideally, we can just stay in cover from step #3. However, it doesn’t support custom borders yet. There is an open ticket to add the feature. It is not clear whether WordPress will offer it for Covers in the upcoming 6.0 release. For now, we have to add an extra cover.

Step 3: Inner Cover

The WordPress post editor is nested inside a group block with a cover block nested inside another cover.
Adding a cover inside a group inside a cover.

Add a new cover block inside the group from step #2. Set it to full-width alignment and enable full height. Then, select the background color of your choice and adjust the opacity to something that fits your design. This layer should be deep enough that your text can be read. Depending on how everything looks, you may choose to modify it later.

For those testing with the latest version of Gutenberg, see the note at the end of the next step.

Step 4: Group the Contents

A group block inside a cover inside a cover in the WordPress post editor.
Another container layer.

I promise it’s the last layer of nested containers to make this pattern work. For this step, insert a new group block inside the cover from step #2.

The only setting required is to switch on the “Inherit Default Layout” option in the Block sidebar panel. I adjusted the “block spacing” setting 4rem To give the material plenty of breathing space, but it can change from theme to theme. You should also select white or another light color for the text and link color options.

note: This, once again, is a scenario where WordPress 5.9 shied away from offering the tools we need to cut back on some of the cruft. The cover block from step #3 required a transparent background. However, WordPress 6.0 allows users to adjust the opacity of any color. For those testing with the Gutenberg plugin, you can simply use a group block in this step and put a transparent background on it.

Step 5: Captivating Title

WordPress post editor with a large size and bold post title.
Grow up or go home with the post title.

Now, we’re getting to the fun part – the actual stuff. Just remember that with WordPress 6.0 it may be possible to halve the earlier steps.

Wanting extra space between the title and its container, I inserted a spacer block containing a 2rem Height inside the group block from step #3. After that, I added the post title block and set it to full-width alignment. Remember, we are using a “blank” template for this post, so we need to add the title somewhere.

This is where things go awry, and I almost chose to share this specific tutorial in its entirety. The font size in WordPress is only as good as your active theme. The core platform has no responsive handling of them and their associated line heights, and each theme can be wildly inconsistent with the options it offers.

The best option is to choose a significantly larger font size when offered by Theme for Post Title Block. A well-rounded design will provide a wide variety of options and help with resizing them for smaller screens. If unavailable, you’ll need to add a custom font-size and line-height. The values ​​used in my setup are 6rem And 1respectively.

Then, select the “Black” option for the Appearance or Weight options, depending on which is available.

Step 6: Add an Image

WordPress post editor with full-width image with a demo caption and a black border.
Adding a full-width image to the post.

You have two options for this step: Post Featured Image or Image Block. WordPress 5.9 doesn’t have nearly as many settings as before. Your active theme may make some custom styles available for one and not the other.

I mainly opted for the image block because I wanted to add a caption to the photo. Then I set it to full-width alignment and selected the “border” style provided by my theme to separate it a bit from the background.

Step 7: Wrapping It Up

WordPress post editor with an image followed by a paragraph and spacer inside a set of containers with a purple background.
Adding paragraph and spacer blocks.

From this point forward, just enjoy things. I added a lead for my fictional story and another spacer block, but you can tinker with other options like displaying post author and date.

It felt like doing a lot of things at once. However, WordPress 6.0 should make things a lot simpler.

Source link