Beginner's Guide for WordPress / Start your WordPress Blog in minutes

Cover Image vs. Featured Image in WordPress Block Editor (Beginner’s Guide)

Recently a user asked about the difference between a cover image and a featured image in WordPress.

With the WordPress block editor, you can add a Cover block. It lets you add cover images to your posts and pages. This feature has confused some users because it may seem similar to the Featured Image option.

In this article, we’ll explain the differences between cover image vs. featured image in WordPress block editor.

Cover Image vs Featured Image - WordPress Block Editor

What is a Cover Image?

A cover image is usually a wide image used as a cover photo for a new section in a blog post or page. It is part of the overall article. You can use a cover image when you’re starting a new section or a new story within your article.

With the Cover block in WordPress, you can add text and color overlay on your cover image.

Cover image in WordPress

By adding an appropriate color overlay that matches your theme color or content’s mood, you can make your article more engaging.

Similarly, adding text overlay helps your users easily identify where a new section starts in your article and what’s it about.

Traditionally, bloggers use heading text to separate sections in a blog post. With cover images, you now have options to separate sections in a more visually appealing way.

What is a Featured Image?

A featured image (also known as a post thumbnail) is the main article image that represents the content. They’re prominently displayed on your website on single posts, blog archive pages, as well as on the homepage of news, magazine, and blog websites.

Aside from that, featured images are also displayed on social media feeds when an article is shared.

Featured images are designed carefully to make them look attractive. Such images give users a quick glimpse of your content and prompt them to the entire article.

You’ll 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 in WordPress

Where and how featured images are displayed is controlled entirely by your WordPress theme.

For advanced featured image options, you can check these best WordPress featured image plugins.

How to Add a Cover Image in WordPress?

The new WordPress block editor (Gutenberg) comes with a Cover block to allow you to add a cover image in WordPress.

First, you’ll need to create a new post or edit an existing one. On the post-edit screen, simply click on the ‘+’ button to add a new block and then choose the Cover block.

Add cover block in WordPress block editor

You can find the Cover block inside the Common Blocks tab.

Upon clicking on the block, you’ll see the Cover block added to your content editor with options to add your new cover image.

Upload image to cover block

You can simply drag and drop an image or video in the block area to upload a new cover image. Alternatively, you can click the Upload button, choose an image on your computer, and open it to upload.

If you want to add an image that’s already uploaded to your media library, then you can click the Media Library button and select an image from your media gallery.

Upload cover image in WordPress block editor

Once your cover image is added, you can easily customize it by clicking on the cover image.

This will show you a toolbar with customization options above the image, Write title… field in the center of the image, and block settings in the panel on the right side.

Cover image in WordPress

Next, you can add 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.

Simply click on that area to add text. You can write your cover image title and format it using the formatting options that appear on top of the text or on top of the cover image.

Add text to cover image

Finally, there are cover block settings on the right side panel.

For instance, you can enable the options to keep a Fixed background and Repeated background.

Edit media settings of cover image

Below that, there’re color overlay options.

By default, it adds your theme’s color as overlay color with 50% transparency. However, you can change the overlay color and also change the opacity by moving the point.

Color overlay settings

Lastly, you can add CSS code and add more styles to your cover image by clicking the Advanced option.

That’s it!

You can repeat this step to add multiple cover images in a single article if needed.

How to Add a Featured Image in WordPress?

The process of adding a featured image is the same as it was before. If you’ve had a WordPress blog for a while, then you already know how a featured image is added.

To add a featured image, you’ll need to open a post edit screen first and then navigate to the Featured Image meta box on the right-hand side of the screen.

You will need to click the Set featured image option.

Add a featured image

Next, 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 and alt text for your featured image, and then click the Select option.

Upload featured image in WordPress

You have successfully added a featured image to your article.

If you want more detailed instructions, then you can read our beginner’s guide to adding featured images in WordPress.

Once you’ve added your featured image, you can preview your post and see how it looks.

If you’re using the new default theme Twenty Nineteen or other modern themes like Astra, then you may see a color overlay on your featured images as well.

You can remove it or change the color by going to the WordPress customizer.

Simply go to the Appearance » Customize page in your WordPress menu.

Customize option WordPress

Once in the Customize panel, you will need to click the Colors option on the left.

This is where you can change color for your featured images.

Customize colors WordPress twenty nineteen theme

On this tab, you will see your theme’s primary color option and the option to enable or disable the image filter.

The theme will use the ‘Default’ option.

Color options in twenty nineteen theme

You can change your theme’s primary color by selecting the Custom option.

After that, simply choose a color overlay.

Change primary color in Twenty Nineteen theme

If you want to disable the color filter on your featured images, then you can simply remove the check on “Apply a filter to featured images using the primary color” option.

Please note that featured images are managed by WordPress themes, so you may not find this option in your theme if it doesn’t support image filters.

Disable color filter on featured images in Twenty Nineteen theme

Conclusion – Cover Image vs. Featured Image in WordPress

Now that you know how to add a cover image and a featured image, let’s take a look at some best practices.

Featured images have been popularly used by WordPress blogs, online magazines, news, and entertainment websites as post thumbnails or main article images.

Well-designed featured images help attract more users to open an article. They’re great for making your website look attractive and visually interactive.

Cover images are actually parts of your article. A user sees your cover image after they open your article to read. Thus, they make your articles more engaging and fun to read.

The best use of cover images is to add beautiful transition between sections inside a long article.

Cover images are unique from regular post images because they have the full-width option and you have the ability to add text overlay on them.

By properly adding cover images, you can improve user engagement on your posts.

We hope this article helped you to understand the difference between a cover image and a featured image in new WordPress block editor. You may also like to read our article on WordPress SEO and the best design software for small businesses.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

16 CommentsLeave a Reply

  1. Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. There seems to be a bug when using the featured image or cover image (containing a featured image) while creating a new Template in the Site Editor. Only the smallest resolution of the available image will be displayed. Can you confirm?

    • Unless we hear otherwise, it should default to the same featured image size as your theme currently.

      Admin

        • It would depend on the specific theme and its settings. It would be best to check with the support for the current theme you are using and they should be able to assist!

  3. Great tutorial, except after following along I’m still seeing the shading on the Featured Image. Any ideas? When I went to Settings, Customize, Color and got rid of the clicked “Apply a Filter” button, I am now seeing black shading instead of my theme blue shading. Thanks!

    • You would need to reach out to your specific theme’s support for this issue.

      Admin

        • You would go to the WordPress.org website to find your theme and it will have a link to the theme’s support forum :)

  4. I’ve been using featured images to act as thumbnails for the list-category-posts plugin. I just upgraded to WP 5.1 and upgraded the plugin. When I added the featured image, it changed the image for the header, but only on that post.

    Any suggestions on how to fix that (I want the header to revert to what it is on every other page and post) and avoid it happening in the future?

    Thanks!

    • For that, you would want to reach out to the support for your specific plugin and they would be able to assist.

      Admin

  5. Is there an idiots guide to making a nice looking blog post?
    This new block system has completely stressed me out. On day 3 of getting ONE post out.
    I can’t even find how to make paragraph headings!
    If there is any way I can go back to the old and much easier way, I’m all ears!

  6. Great write-up on breaking down the differences. I’ve had a couple people confused and this goes a bit more in-depth than the answer I gave them.

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.