How to Create Headers with Cover Block in WordPress?

It’s been few year after Gutenberg block editor replaced the Classic WordPress editor. Many users still do not want to use Gutenberg due to the change in workflow for publishing content. However, Gutenberg has many blocks that you can use to create beautiful layouts without relying on page builder plugins. Cover is one such block least used and understood by users. In this article, we will explain how to create header with cover block in WordPress site. After reading this article, we hope you will start using cover block in Gutenberg editor. Check out our 500+ free WordPress tutorials and take your site to next level.

What is Cover Block?

Cover is one of the core Gutenberg blocks that you can use to create sections in your pages. The main purpose of cover block is to create hero header sections for pages. However, you can use it for creating full width or wide width sections anywhere on your side. For example, you can insert a call to action section in post content using a cover block.

How to Use Cover Block?

There are two ways to use cover blocks for creating sections:

• Cover block with background image – this is suitable for hero headers
• Cover block with background color – suitable for inserting as a call to action in-between post content.

Let us explain both options in detail.

Cover Block with Image

First, click on the + icon on the content area and add a “Cover” block .

It will look plain with an option to upload or select an image along with list of color buttons.

Make sure you have a fullwidth image with limited height so that it can fit well for a header. Click on “Upload” button and upload your header image to Media Library. Add a title, paragraph and a button blocks and edit your content. Below is the real cover block and as you can see all these blocks will float on the base image background.

Select the block to view the pop-up toolbar.

You can click on the “Change content position” icon to adjust the alignment of the content in horizontal and vertical directions.

Similarly, you can click on the “Change alignment” icon to choose full or wide width for your header.

Cover Block with Color

After inserting cover block, you can click on one of the color buttons instead of uploading an image. This will create a header section with selected background color. You can start adding blocks on top the cover to create wide or full width header sections.

Customizing Cover Block

You can customize each block that you add on the cover block. For example, you can change the color and size of the title and paragraph blocks to match the background. In addition, cover block as such has the following settings to customize the look.

The latest Gutenberg version also offers additional options like adding duotone filter and toggle full height.

Media Settings

This is applicable when you have background image for the cover block. You can choose fixed or repeat background for the image and adjust the focal point. For example, you can change the vertical or horizontal focal point to move the image to align properly.

You can simply click on the “Clear Media” button to remove the image and retain only the background settings.

Dimensions

Enter the height in pixels to fix the height for your cover block. You can use this dimension to create header sections to fit on the visible content area. This is useful to insert cover block within post content with limited height.

Overlay

The overlay setting has both solid and gradient color options. You can simply setup a solid color with opacity or choose gradient and setup the color spread.

When used properly, gradient colors can give professional appeal to your cover block which is even difficult to create with page builder plugins.

Advanced Settings

This is a common setting available for Gutenberg block. You can assign custom HTML anchors to link the block within the page and use CSS classes to modify the style using external stylesheet.

Cover Headers Patterns

Gutenberg also makes your task easy by offering two cover pattern one each for background image and background color.

• Click on the + icon on top left corner of the editor and go to “Patterns” section.
• Choose “Headers” from the dropdown.
• Click on the block to insert on your article.  

• After inserting the pattern, you can replace the image, colors and settings as per your need. Below is the cover block with image inserted from the patterns.

Creating Layouts with Cover Block

Now that you know how to use cover block to create header section in your page. However, the block will be more useful if your theme supports the followings:

• Fullwidth page layout
• Hide title element
• Full or wide width for cover block

Many themes like GeneratePress offers meta box in the editor to adjust the layout setting. However, you need to contact your theme developer if your theme does not support these settings.    

Cover block header may look inappropriate when the page title shows above the block. In fact, you can add the page title inside the cover block to create a header. Below the header cover, you can insert featured section using Columns block. You can use one of the Columns patterns to make layout faster. Make sure to use full width only on pages with no sidebar. Otherwise, you can choose wide width to fit the block within the available width.

Once your layout is ready, you can simply copy and paste the blocks any WordPress site.

Final Words

In future, we expect there will be many readymade patterns and block library plugins. Therefore, it will be super easy to pick up the header design for your need and focus on building the content. Since cover block is part of core WordPress, you do not any additional shortcode. In addition, you can add the layout as reusable block and insert anywhere on your site.