1. Home
  2. WordPress Tutorials
  3. How To Add a Cover Image or a Featured Image in WordPress Gutenberg Block Editor

How To Add a Cover Image or a Featured Image in WordPress Gutenberg Block Editor

WordPress has now unleashed 5.0, better known as the Gutenberg Block Editor update, and with it a lot of really cool features have been released. You can now do things like build content block, save them, and then export them and import them for use on other websites.

Another great feature that WordPress released with the Gutenberg Block Editor is an item called the “Cover” block. This block allows you to add cover images to your WordPress post or page.

The cover image feature has confused some people, because it seems to be a lot like the featured image feature that has been a part of WordPress since version 2.9.

In this tutorial, I will explain the difference between the cover image option and the feature image option in the WordPress Block Editor. I will also show you how to add a WordPress cover image and add a WordPress featured image using the Gutenberg Block Editor.

What is a Cover Image?

A cover image is actually a wide image that you use for a new section in a blog post or in a page. The WordPress cover image is part of the overall article. You would add a WordPress cover image when you are starting a new section of your article within the block editor.

The Cover block option in the Gutenberg Block Editor also allows you to add text and color overlay to the cover image.

Cover block sample

By adding appropriate text and color overlay to match your theme or to further push the point you are trying to get across, you can make your article more engaging.

In the past bloggers have used headings, or heading text, or sub-headings to separate sections in a blog post. Sometimes adding an image below the heading, sometimes not.

The Cover block option now gives you a more visually appealing way to break up your blog post into sections.

A featured image, also known as a post thumbnail, is the main article image that represents all of the content. The featured image is the image you see when scrolling through blog archives and trying to pick a story to read.

It is also commonly displayed on your website on single posts, as well as on the homepage of news, magazine, and blog websites.

Furthermore, the featured image is also displayed on your social media feeds when an article is shared across your social platforms.

Featured images are usually designed and chosen specifically to represent the content as best you can. More often than not they are visually attractive and give users a quick glimpse of your content and prompt them to read the entire article.

You will find a meta box in your post edit screen for adding a featured image because almost all WordPress themes support featured images by default.

Featured image sample

Where and how your featured images are displayed is controlled by the WordPress theme you have chosen to use. You can also link featured images WordPress posts automatically like this.

How To Add a Cover Image in the WordPress Block Editor

The new WordPress block editor, better know and the Gutenberg block editor, comes with a Cover block option that allows you to add a cover image in your WordPress article.

First you want to do is create a new post or edit an existing one in your WordPress admin dashboard. On the post edit screen, click on the add new block button and then choose Cover block.

Add the cover block

You will find the Cover block option inside the “common blocks” section or the “most used.” When you click on the block, you will see the Cover block added to your content editor with options to add your new cover image.

Simply drag and drop an image or video in the block area to upload a new cover image. You can also select from your current media files by clicking on the “Media Library” button. Or, if you need to, you can click the Upload button, choose an image on your computer, and open to upload.

cover image upload options

Once you have had the chance to add a WordPress cover image you can easily customize it how you want by clicking on the cover image.

When you click on the image you will be shown a toolbar with customization options above the image, Write title… field in the center of the image, and block settings including color overlay in the panel on the right side.

Options on display for the cover image

Aside from alignment option, the cover image block gives you the two width choices: Wide width and Full width.

The wide width option makes the image look as wide as your content. The full width option makes your image cover the whole window screen.

The full width image option

You can also write a title for your cover image. When you click on the cover image, you will see the “Write title…” field in the center of your cover image.

Text overlay option on cover image bloack

Finally, on the right side of your cover image you will find a few more settings. You can enable “Fixed Background” to create a parallax effect for when users scroll down the page.

Below that you will find the color overlay settings as well. From here you will be able to change the color overlay and opacity.

And last but not least, you can add CSS code and add more styles to your cover image by clicking the “Advanced” option.

Right sidebar settings for cover image block

Remember, you can repeat the steps above and add as many cover images to your article as you want.

When you go to add a featured image into your post using the WordPress block editor you will find that the process is still the same. If you have had a WordPress blog for a while then you already know how a featured image is added.

To add a featured image to your WordPress post you need to create a new post or edit an existing one from your WordPress admin dashboard.

When you open the post edit screen you simply navigate down to the Featured Image meta box located on the right side of the screen.

Featured image meta box

You can upload a new image by either using the drag and drop uploader or selecting an image one from your existing media library. After that you can add title, caption, alt text, and description for your featured image, and then click the “Select” option.

Add title, caption, alt text, and description

That’s it! You have successfully added a featured image in the WordPress block editor.

Now, if you are using the newest WordPress default theme or any modern theme you can also edit the overlay color of your featured image, to an extent.

Click on Appearance > Customize and go to the live WordPress customizer.

Click on appearance then customize

Now click on the “Colors” tab and switch the default colors of your theme to what you want.

Click on the colors tab

Note: Featured images are managed by WordPress themes, so you may not find this option in your theme if it doesn’t support image filters.

Now that you understand how to add a cover image and how to add a featured image in the WordPress Gutenberg block editor, let’s take a look at some best practices.

Featured Images

Featured images are popular when used by one or more of the following as post thumbnails or main article images:

  • WordPress Blogs
  • Online Magazines
  • News Websites
  • Entertainment Websites

Well-designed and attractive featured images will help drive readers to open the full article and read on. They also work well for making your WordPress website look more attractive and interactive.

Cover Images

Cover images are actually a part of your article. The are used to separate sections and create headings. Adding cover images can make your article more visually entertaining and interactive.

The best way to use cover images in the WordPress block editor is as a beautiful transition between sections within a long article.

Cover images are also more unique than featured images in the fact that there is a full-width option available and you can add text and color overlay to the image.

When you use the cover image function properly you can increase and improve user engagement on your posts and pages in WordPress.

I hope this article was helpful to you. Now you should have a much better idea of the differences between cover images and featured images in the WordPress block editor. You should also understand how to easily add both.

Have you started using the new Cover block in Gutenberg yet? Have you found that when used your articles get more engagement?

Author: Jeremy Holcombe

Updated on April 1, 2019

Was this article helpful?

Related Articles

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.