Adding a Cover Image Block to a WordPress Page or Post

The cover image is the first thing visitors see when they land on your webpage or post, so use them to make a great first impression!

Why Change the Default Cover Image?

You’ve probably heard this before, but your site visitors are going to give you 10 seconds or less to decide whether they want to stay on your page or bounce. And since the cover image will be the very first thing visitors see on your site, it provides the perfect opportunity to clearing communicate, at a glance, what the page or post is about.

Creating and adding cover images to your website makes your site unique and uniquely you or your brand. Selecting an image that aligns your brand to your target audience will help to ensure the right visitors (i.e., your ideal clients) hang around and the visitors who aren’t a match for you move on. Be sure your cover images accurately represent your business and the topic of the page.

Note that the cover image is different from the featured image (also known as the thumbnail image), which is the one that will display when you share the link to the page/post on social media.

Creating a Cover Image

In order to use the cover image block, you will need to have an image that not only represents your brand and what the page/post is about, but to also fits the dimensions of the block. Different WordPress themes may have different sizes for cover images, so you will need to check on that. Here’s an explanation from WordPress on the importance of using a properly sized image:

If your WordPress Theme features a fixed width content area of 600 pixels and the image you want to use is 800, the image will push the sidebar and layout of your web page around, messing up your design. Images within that 600 pixel width need to be restricted to that maximum width in order to protect the layout of your page. It’s up to you to determine what size they should be from there, matching the image to your overall layout and styles.

Another reason to ensure you have an image that is big enough is that WordPress will stretch images that are smaller than the block size to fill in the entire block. This will make your image appear fuzzy – and that’s not what makes a good first impression! If the image you want to use doesn’t quite fit the dimensions, there are tools that can help you resize the image, such as img2go.com.

Next, if you don’t have your own photo to use, you’ll want to make sure you grab one that you can legally use. If you don’t already have a site your use to find royalty-free images, here’s a list of over 80 options for free stock photos. Personally, we like Unsplash, Pixabay, and Canva (one of our favorite tools!).

How to Add a Custom Cover Image

Once you know what image to use, go to your WordPress dashboard and create a new page or post. To add the cover block you need, click on the ‘plus’ icon in the top toolbar and choose cover image block, which can be found in the ‘media’ grouping of blocks.

The placeholder block for the image prompts you to add the image in one of two ways – by selecting an image that already exists in your WordPress media library or by uploading one from your computer. Select the option based on where your image currently “lives.” If it lives in your media library, simply choose the image you want to use and add the alt-text, caption (optional), and description.

Add Text to the Image

Once the image loads, you’ll see the image in the block and a cursor in the middle of it where you can add and format text. Simply type (or paste) in the desired text and WordPress will add it as an overlay to the image. If the image you’re using already includes text or you want to skip adding the text overlay for another reason, simply click out of the image and save the block. If you are adding text, next you’ll simply use the formatting menu that appears at the top of the block to get the look you desire.

Click on the icon with the three lines to change the text justification (center is the default). The next set of icons are for bold and italicized text and for adding a hyperlink to the text. To the right of those is a drop-down menu that includes strikethrough and sub- and superscript text, as well as the option to change the text color.

Adding text is another opportunity to differentiate your site. You might include your tagline, a quick summary of the content below, or an intriguing “hook.”

Additional Settings

On the right-hand sidebar, under the “Block” tab, you’ll see another place that allows you to change the color of the text, as well as to set a background color and customize the text size. If you do not see this settings sidebar, click on the ‘gear’ icon on the top right of the window.

Switching to the “Document” tab in the settings sidebar provides you with additional tools, including the option to add categories and tags.

Advanced Cover Image Options

That covers the basics of adding a cover image to a specific page on your blog. WordPress also offers a way to make a cover image the default image on every page of your site for branding consistency. This is set up through the settings for your theme. Another option is to designate a specific cover image for a specific category on your blog. This could be a useful clue for people who visit your site repeatedly. For example, a health and wellness coach might have blog categories food, exercise, and habits. If she created a created a cover image for each of those categories, visitors would always have a visual cue as to the topic at hand.

Wrapping Up

Cover images can enhance your brand and your visitors’ user experience. If you have existing pages on your site that don’t include cover images and you want to add them, you can add a cover image in the editor. Now go get creative and make some cover images that will knock your visitors’ socks off!