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

When I first started using WordPress, I often confused featured images with cover images. As a result, some of my early blog posts didn’t quite hit the mark. Either they were missing key visuals, or the images were misplaced, leaving the design a bit off.

Luckily, I quickly learned that these two types of images serve uniquely important roles.

Cover images are used within your content to set the tone and engage readers. By contrast, featured images act as a visual summary, showcasing the essence of your post before it’s even opened.

In this guide, I’ll share everything I’ve learned about cover images and featured images in the WordPress block editor.

Before I discuss the specifics of using cover and featured images in WordPress, here’s a quick overview of what I will cover:

What Is a Cover Image?

A cover image is the main image that typically appears at the top of a post. Cover images can also be videos, but this is more common for Facebook or YouTube content.

Cover images capture the reader’s attention immediately and set the overall tone for the content, providing a visual introduction to what follows.

I’ve noticed that cover images are popular with bloggers, marketers, and creatives who use them to make posts more engaging.

They’re especially common on websites that rely heavily on storytelling or visual content, such as travel, lifestyle, and portfolios.

The ‘Cover’ block in WordPress allows you to add a cover image. It also lets you add text and color overlays to your images.

You can also customize these overlays to match your site’s color or set the mood for different content sections. Later in the article, I’ll show you more about this customization option.

For the best look, I recommend using cover images that are 1920×1080 pixels. This size makes sure the images are high-quality and fill the top area of your posts nicely.

What Is a Featured Image?

A featured image is like the face of your blog post, providing a visual representation that draws readers in.

Also known as a post thumbnail, it appears on your homepage and blog archive pages. It also shows up on social media feeds when an article is shared.

These images are crafted to be visually appealing, encouraging readers to click and explore your WordPress blog or website.

For example, at WPBeginner, my team and I ensure each featured image is unique while maintaining our brand’s consistent style.

Keep in mind that featured images depend on the WordPress theme you use because the theme decides the best size for these images.

For example, many themes opt for a standard 16:9 aspect ratio, using sizes like 680×382 pixels. Some themes might even use featured images as header images, with dimensions such as 1200×675 pixels.

If you need more detailed insights, check out this comprehensive guide on WordPress image sizes.

How to Add a Cover Image in WordPress

The WordPress block editor, which is also known as Gutenberg, makes it very simple to add cover images using the handy Cover block.

To start, you need to create a new post by going to Posts » Add Post.

You can also edit the one you already have by navigating to Posts » All Posts, finding the post you want to edit, and clicking on the post title to open it in the editor.

In the post editor, tap the ‘+’ button to add a new block and select the ‘Cover’ block from the list.

You’ll find the ‘Cover’ block under the ‘Media’ tab. Alternatively, you can also type ‘/cover’ in the block search field to easily find it.

After selecting the ‘Cover’ block, you’ll see it pop up in the content editor. You’re now ready to add your cover image.

Simply drag and drop your favorite image or video into the block area. Alternatively, you can hit the ‘Upload’ button to select a file from your computer.

And if you’ve already got something great in your media library, click the ‘Media Library’ button to choose an image from your media gallery.

Hit the ‘Select’ button to add your image to the post.

Now, it’s time to customize it.

Simply click on the image, and a toolbar will open for tweaks. The panel on the right offers even more options.

Let’s start by adding a title. Just click the ‘Write title…’ area in the middle of your cover image and type in your text.

You’ll have handy formatting options that appear above the text for customization.

Next, check out the panel on the right side for additional settings.

Here, you’ll see two tabs – ‘Settings’ and ‘Styles.’

In the ‘Settings’ tab, you can customize the layout options. By default, the layout is set to full width, so you can leave this setting as it is.

Then, choose between a fixed or repeated background to suit your design. A fixed background is perfect for creating a parallax effect, giving your image a dynamic feel. A repeated background helps when you’re using tiled images.

Then, adjust the image’s focal point to highlight essential parts. You can also set the resolution to choose how sharp and clear you want your images to be.

Move to the ‘Styles’ tab next and adjust the overlay opacity. It refers to how see-through a color layer is on your image.

By default, it’s set to 50% transparency, but you can adjust it to fit your post’s mood. This helps ensure the text stays easy to read while letting you control how much color shows.

Lastly, you can experiment with filters to change your image’s style. Try different ones to find the best fit for your post.

For those who like to get creative, dive into the Advanced settings to add some custom CSS and give your cover image a unique feel.

And there you go! Feel free to repeat these steps to add more cover images if your post needs them, creating a dynamic and engaging reading experience.

Once you’re done, feel free to preview and publish your post to make sure everything looks good on the front end.

How to Add a Featured Image in WordPress

Adding a featured image to your WordPress post is a simple way to make it stand out. The process is almost the same as adding a cover image.

Whether you’re new to blogging or need a quick refresher, here’s how to do it.

To start, open the post you want to edit. The Featured Image meta box is on the right.

Simply click the ‘Set featured image’ option to get started.

Now, let’s add your featured image.

You can upload a new image by either using the drag-and-drop uploader or selecting an image from your media library.

After that, you can add a title and alt text for your featured image, and then click the ‘Set featured image’ button. You have successfully added a featured image to your article!

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

After adding your featured image, you can customize it. However, the customization options will depend on the type of WordPress theme you’re using.

In this step, I’ll explore two methods to customize your featured images: using a theme customizer and the Full Site Editor (FSE).

Using the Theme Customizer

This method works for classic themes in general, but I’ll use the Sydney theme for this article. Sydney offers user-friendly design options that make it easy to improve the look and feel of your site.

To start, you first need to install and activate the theme. If you need help, read my team’s guide on installing a WordPress theme.

Next, start by navigating to your WordPress dashboard and going to Appearance » Customize. This will open the Customizer.

Here, you can tweak many aspects of your site’s visual presentation, including your featured image.

Within the Customizer, you can also explore sections like ‘Header’ to access settings related to your featured images.

You can also adjust the header’s presets and mobile layout. Once you’re happy with the changes, click ‘Publish’ at the top left to save them.

For more details, feel free to check this guide on using the theme customizer.

Using a Full Site Editor (FSE)

For those using block-based themes, the Full Site Editor (FSE) allows you to tailor your featured images to fit perfectly with the rest of your content.

Start by heading over to Appearance » Editor from your WordPress admin panel. This will open the site editor.

Once you’re in the editor, go to Navigation » Styles. Then, scroll down and choose “Blocks” from the list.

This will open the list of blocks you can customize within the editor.

Next, look for the ‘Featured Image’ block. To find it faster, you can type “featured image” in the search bar.

Here, you’ll see the customization options for your featured image, including changing the dimensions (padding and margin).

You can also add the image’s border, shadow, and radius. Feel free to experiment with these settings and see how they affect the appearance of your featured image.

Once you’re happy with the changes, take a moment to preview them before publishing. This ensures that everything looks perfect on all devices.

If you need more information, check out our complete beginner’s guide to WordPress Full Site Editing.

Expert Guides on WordPress Images

Check out these handy tools and tips to make your WordPress images even better:

• Best Featured Image Plugins and Tools for WordPress (Compared)
• How to Crop and Edit WordPress Post Thumbnails
• How to Create Additional Image Sizes in WordPress
• How to Add a Hero Image in WordPress (Works for All Themes)
• Image Alt Text vs Image Title in WordPress – What’s the Difference?
• How to Optimize Images for Web Performance Without Losing Quality
• Ways to Prevent Image Theft in WordPress

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.