Add cover images or featured photos in WordPress posts


Add cover images or featured photos in WordPress posts - A lot of interesting new features have been introduced with WordPress 5.0, the Gutenberg Block Editor update. Includes integrating featured images at WordPress into the Gutenberg editor. You can also do things like create content blocks, export, import them to use in other websites.

The feature that will be mentioned today is the Gutenberg Block Editor, which lets you add cover images to your WordPress posts or pages.

The cover image feature has caused some confusion. It seems to be very similar to the featured image that has been in WordPress since version 2.9.

Next, I will explain the difference between the cover photo, the featured image in the block editor. I will also show you how to add WordPress cover images, add WordPress featured photos with Gutenberg Block Editor

What is a cover photo?

Cover image is the wide image that you use with the new section on your website post. The WordPress cover image is under the article. You added the WordPress cover image when you were starting the new section of the article in the block editor.

The Cover option at Gutenberg Block Editor also lets you add text and color to your cover photo.


By adding a text overlay of the same color to match the look or to enhance the message you are trying to overcome, you make the article more engaging.

Previously, websiter used titles, or text titles or subheadings to separate sections in posts at the website. Sometimes add images below the title, sometimes not.

The Block option now offers you a more visually appealing way to split a website's post into sections.

What is a striking image?

The featured image at WordPress, or post thumbnail, is the main article image that represents all the content. The standout image is the image you see when scrolling through the website repository and then trying to select a story to read.

It is also displayed at website in single post. As well as on news, magazines or website homepage.

Featured images are also displayed in social media feeds when you share posts on your social platform.

Featured images are often designed or selected to best represent the content. They are visually appealing, give users a quick look at the content, and prompt them to read the entire article.

You will find the meta box in the post editing screen to add featured images as almost all WordPress themes support featured images.


Where the featured image is displayed will be controlled by the WordPress interface you have chosen to use. You also get linked images highlighting WordPress posts automatically.

How to add cover images in WordPress Block Editor

The new WordPress Block Editor comes with a Cover option for you to add cover images at WordPress posts.

First, create a new post or edit an existing post. In the post editing screen, click the "Add New Block" button, then select "Cover block".


You will find the Block Cover option in the popular block section. When you click Cover, you see the Cover block is added to the content editor with the option to add a new cover photo.

Drag and drop images or videos in block area to load new cover images. You can also choose from media files you have by clicking the online media library button. Or click the upload button to select an image from a computer.


Once you've added your WordPress cover image, you can freely customize it by clicking on the cover image.

Next, you will be shown a toolbar with a custom option above the "Write title ..." image. File in the middle of the image settings, Block settings include the color overlay on the right panel.


Edit image width

In addition to the alignment option, the cover image block provides you with two width options: the wide "Wide width" and the "Full width" width.

The "Wide width" option makes the image look like content. The "Full width" option causes the image to cover the entire browser window.


You have also added a title for the cover photo. When you click on the cover image, you will see the "Write title ..." field in the middle of the cover image.


Finally, on the right side of the cover image, you'll find several other settings. You have enabled the user fixed platform function to create a visual effect when the user scrolls down the page.

Below that, you'll find the "Overlay Color" setting. From here, you will be changing the color overlay with the opacity.

Last but not least, you can add CSS code, add more styles to the cover image by clicking the Advanced option.


Remember, you can repeat the above step and then add as many covers to the article as you want.

See more: How to create a Landing Page

How to add featured images in WordPress Block Editor

When you add a featured image to your post using the WordPress Block Editor, you'll find that the process is still the same. If you've had your WordPress website for some time now, you already know how the featured image is added.

To add featured images to a WordPress post, create a new post or edit an existing image.

When you open the post editing screen, navigate down to the YouTube featured image meta box located on the right panel.


You upload new images using the drag and drop uploader or by selecting images from the media library. Next, you can add titles, captions, alternative text and featured image descriptions. Then click on the "Select" option.


You have added a featured image in the WordPress block editor.

Now, if you are using the latest default theme from WordPress or any modern interface, you are getting to edit the outstanding image overlay colors you have, to some degree.

In the left mouse navigate the column through the interface link that appears and then click the online custom link. That will take you to customizing WordPress directly.


Click on the different colors tab, and switch the default interface color.


Note: The WordPress interface manages the image prominently, so you won't find this option if the interface doesn't support image filters.

Cover photos and featured photos best practices

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

Featured images are common when used by one or more of the following in the form of a post thumbnail or main article image:

  • WordPress website

  • Magazine online

  • News website

  • Entertainment website

Attractive, well-designed featured images will help motivate readers to open the full article. They also work well to make WordPress websites look better and more interactive.

Cover image

Cover image of the article. They are used to separate sections with heading creation. Adding cover images can make the article entertaining and more interactive.

The best way to use cover art in the WordPress block editor is to switch graphics between sections on long posts.

The cover photo is also more unique than the featured photo in the fact that the full width option is available, you add text overlay and color to the image.

When you use the right cover image function, you increase and improve user interaction density at posts and pages in WordPress.


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

Have you started using the new Cover block at Gutenberg yet? You see when it is used, will the article be viewed more?

Source :

Nguyen Diep

My name is Nguyen Manh Cuong. I was born in a poor village in Ba Vi district, HA NOI province - windy and sunny land. Currently

Post a Comment

Previous Post Next Post

Đọc nhiều trong tuần

10 Grands Sites de modèles PowerPoint gratuit
10 Grands Sites de modèles PowerPoint gratuit

PowerPoint est toujours le roi quand il vient à un logiciel de présentation. Il a été autour depuis des siècles et chaque nouvelle version ajoute plus de fonctionnalités et rend …

17 best home jobs in 2020
17 best home jobs in 2020

Earning Money blog access_time April 13, 2020 hourglass_empty 28 least Read Finding work from home is easier thanks to high technology. Not only suitable for tho…

How much RAM is the iPhone 12 Pro?
How much RAM is the iPhone 12 Pro?

The RAM of the iPhone 12 Pro is up to 6GB.
Based on information in the latest Xcode beta from Hiraku, it can be said that both of Apple's new iPhone 12 Pro models have 6GB of R…


JavaScript is a programming language of HTML and WEB. It is lightweight and most commonly used as part of web pages, but their implementation allows Client-Side scripts to interac…