WPBeginner

Beginner's Guide for WordPress

  • Blog
    • Beginners Guide
    • News
    • Opinion
    • Showcase
    • Themes
    • Tutorials
    • WordPress Plugins
  • Start Here
    • How to Start a Blog
    • Create a Website
    • Start an Online Store
    • Best Website Builder
    • Email Marketing
    • WordPress Hosting
    • Business Name Ideas
  • Deals
    • Bluehost Coupon
    • SiteGround Coupon
    • WP Engine Coupon
    • HostGator Coupon
    • Domain.com Coupon
    • Constant Contact
    • View All Deals »
  • Glossary
  • Videos
  • Products
X
☰
Beginner's Guide for WordPress / Start your WordPress Blog in minutes
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

WPBeginner» Blog» Beginners Guide» Cover Image vs. Featured Image in WordPress Block Editor (Beginner’s Guide)

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

Last updated on January 2nd, 2020 by Editorial Staff
210 Shares
Share
Tweet
Share
Pin
Free WordPress Video Tutorials on YouTube by WPBeginner
Cover Image vs. Featured Image in WordPress Block Editor (Beginner’s Guide)

WordPress 5.0 was released with the brand new Gutenberg block editor and a host of cool features. One of them is the Cover block, which 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 which has been in WordPress since WordPress 2.9.

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 block in WordPress block editor

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 post thumbnail) is the main article image which 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 need to create a new post or edit an existing one. On the post edit screen, click on the add new block button and then choose 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.

Cover block with options to upload image

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 in your computer, and open to upload.

If you want to add an image already uploaded to your media library, 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 including color overlay in the panel on the right side.

Cover block options

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.

 Full width cover image in WordPress block editor

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 on your cover image in WordPress block editor

Finally, there are cover block settings on the right side panel. You can enable Fixed Background to create a parallax effect for when users scroll down the page.

Fixed background option in cover block in Gutenberg

Below that, there’re color overlay options. By default, it adds your theme’s color as overlay color with 50% transparency, but you can change the overlay color and also change the opacity by moving the point.

Cover block color overlay options

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.

Featured image meta box in WordPress

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, 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 click on the Appearance » Customize button in your WordPress menu.

Customize option WordPress

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

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.

Color options in twenty nineteen theme

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

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.

Disable color filter on featured images in Twenty Nineteen theme

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.

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 how to update your old WordPress posts with Gutenberg block editor.

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.

210 Shares
Share
Tweet
Share
Pin
Popular on WPBeginner Right Now!
  • How to Fix the Error Establishing a Database Connection in WordPress

    How to Fix the Error Establishing a Database Connection in WordPress

  • How to Properly Move Your Blog from WordPress.com to WordPress.org

  • Checklist

    Checklist: 15 Things You MUST DO Before Changing WordPress Themes

  • How to Start Your Own Podcast (Step by Step)

    How to Start Your Own Podcast (Step by Step)

About the Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Trusted by over 1.3 million readers worldwide.

The Ultimate WordPress Toolkit

10 Comments

Leave a Reply
  1. Meredith says:
    Nov 14, 2019 at 6:45 pm

    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!

    Reply
    • WPBeginner Support says:
      Nov 15, 2019 at 9:59 am

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

      Reply
      • Meredith says:
        Nov 20, 2019 at 2:09 pm

        Thanks! It’s a free theme (twenty nineteen), not sure if there is support for that?

        Reply
        • WPBeginner Support says:
          Nov 21, 2019 at 9:41 am

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

  2. Joe says:
    Mar 4, 2019 at 3:27 pm

    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!

    Reply
    • WPBeginner Support says:
      Mar 5, 2019 at 11:23 am

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

      Reply
  3. Giselle Stafford says:
    Jan 29, 2019 at 2:32 am

    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!

    Reply
    • WPBeginner Support says:
      Jan 29, 2019 at 11:21 am

      You can revert to the classic editor using the method in our article here: https://www.wpbeginner.com/plugins/how-to-disable-gutenberg-and-keep-the-classic-editor-in-wordpress/

      Reply
  4. Al says:
    Jan 18, 2019 at 7:36 pm

    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.

    Reply
    • WPBeginner Support says:
      Jan 22, 2019 at 3:09 pm

      Thank you :)

      Reply

Leave a Reply Cancel 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.

Over 1,320,000+ Readers

Get fresh content from WPBeginner

Featured WordPress Plugin
MonsterInsights
MonsterInsights
Google Analytics made easy for WordPress. Learn More »
How to Start a Blog How to Start a Blog
I need help with ...
Starting a
Blog
WordPress
Performance
WordPress
Security
WordPress
SEO
WordPress
Errors
Building an
Online Store
Useful WordPress Guides
    • 7 Best WordPress Backup Plugins Compared (Pros and Cons)
    • How to Fix the Error Establishing a Database Connection in WordPress
    • Why You Need a CDN for your WordPress Blog? [Infographic]
    • 30 Legit Ways to Make Money Online Blogging with WordPress
    • Self Hosted WordPress.org vs. Free WordPress.com [Infograph]
    • Free Recording: WordPress Workshop for Beginners
    • 24 Must Have WordPress Plugins for Business Websites
    • How to Properly Move Your Blog from WordPress.com to WordPress.org
    • 5 Best Contact Form Plugins for WordPress Compared
    • Which is the Best WordPress Popup Plugin? (Comparison)
    • Best WooCommerce Hosting in 2020 (Comparison)
    • How to Fix the Internal Server Error in WordPress
    • How to Install WordPress - Complete WordPress Installation Tutorial
    • Why You Should Start Building an Email List Right Away
    • How to Properly Move WordPress to a New Domain Without Losing SEO
    • How to Choose the Best WordPress Hosting for Your Website
    • How to Choose the Best Blogging Platform (Comparison)
    • WordPress Tutorials - 200+ Step by Step WordPress Tutorials
    • 5 Best WordPress Ecommerce Plugins Compared
    • 5 Best WordPress Membership Plugins (Compared)
    • 7 Best Email Marketing Services for Small Business (2020)
    • How to Choose the Best Domain Registrar (Compared)
    • The Truth About Shared WordPress Web Hosting
    • When Do You Really Need Managed WordPress Hosting?
    • 5 Best Drag and Drop WordPress Page Builders Compared
    • How to Switch from Blogger to WordPress without Losing Google Rankings
    • How to Properly Switch From Wix to WordPress (Step by Step)
    • How to Properly Move from Weebly to WordPress (Step by Step)
    • Do You Really Need a VPS? Best WordPress VPS Hosting Compared
    • How to Properly Move from Squarespace to WordPress
    • How to Register a Domain Name (+ tip to get it for FREE)
    • HostGator Review - An Honest Look at Speed & Uptime (2020)
    • SiteGround Reviews from 4196 Users & Our Experts (2020)
    • Bluehost Review from Real Users + Performance Stats (2020)
    • How Much Does It Really Cost to Build a WordPress Website?
    • How to Create an Email Newsletter the RIGHT WAY (Step by Step)
    • Free Business Name Generator (A.I Powered)
    • How to Create a Free Business Email Address in 5 Minutes (Step by Step)
    • How to Install Google Analytics in WordPress for Beginners
    • How to Move WordPress to a New Host or Server With No Downtime
    • Why is WordPress Free? What are the Costs? What is the Catch?
    • How to Make a Website in 2020 – Step by Step Guide
Deals & Coupons (view all)
IPVanish Coupon
Get 20% OFF on IPVanish, one of the best VPN service providers for bloggers and WordPress users.
A2 Hosting Coupon Code
A2 Hosting Coupon
Get 66% off A2 Hosting 's premium WordPress hosting.
Featured In
About WPBeginner®

WPBeginner is a free WordPress resource site for Beginners. WPBeginner was founded in July 2009 by Syed Balkhi. The main goal of this site is to provide quality tips, tricks, hacks, and other WordPress resources that allows WordPress beginners to improve their site(s).
Join our team: We are Hiring!

Site Links
  • About Us
  • Contact Us
  • FTC Disclosure
  • Privacy Policy
  • Terms of Service
  • Free Blog Setup
  • Free Business Tools
Our Sites
  • OptinMonster
  • MonsterInsights
  • WPForms
  • SeedProd
  • Nameboy
  • RafflePress
  • Smash Balloon

Copyright © 2009 - 2021 WPBeginner LLC. All Rights Reserved. WPBeginner® is a registered trademark.

Managed by Awesome Motive | WordPress hosting by SiteGround | WordPress CDN by MaxCDN | WordPress Security by Sucuri.