Someone's hand drawing a robot on a notebook with a pen

With the WordPress block editor, Gutenberg, you have a large set of blocks with which you can create great page and post layouts. One of the new blocks that opens up many new design possibilities is the Cover block.

Common blocks of the Gutenberg editor.
Within the set of common blocks of the Gutenberg editor.

The cover block allows you, as its name suggests, to put a cover image. You can overlay this image with a color filter that fits your theme and you can add a header, text, or even a button. This makes a very useful block for creating separations between sections of pages.

For example, here’s a section that you can create with a cover block to separate sections of a page. In this case, the orange filter is 100% opaque, covering any color that has been loaded. Includes a header, a call to action button and additional text.

Build and retain your base of loyal readers with Nelio Content


The all-in-one editorial calendar for WordPress

And it’s important not to confuse the cover block with the featured image of post or page. Let’s see first the properties that come with the featured image.

The Featured Image

The featured image of a post, also known as the thumbnail image of a post is the image that represents the content of a post. It is an image that is shown when viewing the post itself or when viewing the list of post, but also what we see in RSS readers or in social networks when sharing the post.

Neliosoftware blog screencapture.
Tweet on @NelioSoft_ES.

To add a featured image to your post, go to the sidebar of the post you are editing, and in Document you will find the section Featured Image where you must click on the Insert Image button that takes you to the media library to select the image in question.

Featured imaged inserted in this post.
Featured imaged inserted in this post.

Notice that nothing prevents you from inserting an animated image like the one we show you in this post.

And the display of the featured image in your post is totally predetermined by the theme. For example, if you use the theme Twenty Nineteen of WordPress that is totally compatible with the block editor, Gutenberg, the images are shown by default with a blue filter.

Showing the featured imaged of a post.
Showing the featured imaged of a post.

This theme allows you to change the filter color of the featured image. To do this, on the left side menu of the Dashboard, click on the Appearance » Customize option to customize the appearance of the theme.

Customize the appareance of your website.
Customize the appareance of your website.

And in the Colors option you’ll see the different options you have.

Option to change Colors of the theme Twenty Ninenteen.
Option to change Colors of the theme Twenty Ninenteen.

By default, you have the blue filter that you saw in the previous image.

Blue color filter.
Filter applied to the featured images by default in the Twenty Nineteen theme.

But you have the option to select that no filter is applied to featured images.

Featured image with no filter.
Disabled the option to apply filter to featured images.

Or customize the primary color filter you want to apply to featured images:

Feataured images with yellow color filter
Custom selection of the filter color to apply to the highlighted images.

Note that these options shown are those of the Twenty Nineteen theme, but depending on the theme you have installed you may have other options. And finally, I recommend reading Antonio’s post, How to get WordPress Featured Images Right, to learn more about featured images.

The Cover Block

As we mentioned at the beginning of this post, the new version of Gutenberg’s editor comes with a Cover block with a wide range of options. When you create a new block and select the Cover type, you have the option of dragging an image (it can also be an animated image), or uploading a new one or selecting it from the media library.

Creating a new cover block.
Creating a new cover block.

Once the image is uploaded and selected, the cover block allows us to customize many properties:

Inserting an image in a cover block
After inserting an image, you have several options to customize the cover block.

As you can see in the image above, the alignment can be like any other image: left, centered, right, wider or occupying the entire width of the post.

You can adjust the center of the cover image, and add an overlay a filter of the color and level of opacity you want. Here I show you three different examples.

In the previous image, the image of the cover block does not have any type of filter applied.

The previous image of the cover block includes a blue filter with an opacity of 50%.

A red filter with an opacity of 100% has been applied to the previous image in such a way that the selected image is not visible.

In a cover image you can also indicate where you want the center of the image to focus:

You can also add paragraphs, headers, and buttons or any combination of all of them to a cover image, creating the design you like best.

If you want to master how to create different designs with cover blocks and other types of blocks, sign up for the course we have designed Content creation with the Gutenberg block editor (now only available in Spanish) in which we explain many details and tricks that we use in the creation of our post and pages.

Do not wait until Christmas.
Sign up now for the course
Content creation with Gutenberg!

As you see, cover images, with the option of full width alignment option, are particularly useful for creating transitions on long pages or posts. Just browse through different parts of our site to find lots of examples in which we use the cover block to create more attractive pages.

Featured image of rawpixel in Unsplash.

Leave a Reply

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

I have read and agree to the Nelio Software Privacy Policy

Your personal data will be located on SiteGround and will be treated by Nelio Software with the sole purpose of publishing this comment here. The legitimation is carried out through your express consent. Contact us to access, rectify, limit, or delete your data.