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.
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.
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.
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.
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.
And in the Colors option you’ll see the different options you have.
By default, you have the blue filter that you saw in the previous image.
But you have the option to select that no filter is applied to featured images.
Or customize the primary color filter you want to apply to featured 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.
Nelio Content
I’m so happy about Nelio Content that I will sound like a payed advocate… but here’s why you’ll love it: it works as promised, its auto-scheduling feature is top-notch, Nelio’s value for money is unmatched, and the support team feels like your own.
Panozk
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.
Once the image is uploaded and selected, the cover block allows us to customize many properties:
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:
Image with the focus of the image centered on the bottom of the image. Image with the focus of the image centered on the central part of the image. Image with the focus of the image centered on the upper part of the image.
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