Add a banner to your site

Often referred to as a “hero” or “banner” image, the Cover block is used to add a large image, video, or text banner to your site. This guide will show you how to add a banner and select the image, video, or color to display.

You can add a banner image to your site using the Cover block. To add a banner to a page, post, or template, take the following steps:

1. Go to your site’s dashboard.
2. Depending on where you want to add the banner, navigate to a page, post, or template and edit or create a new:
   • Page: Go to the Pages section of your menu.
   • Post: Go to the Posts section of your menu.
   • Template: Go to Appearance → Editor and select the template.
3. Click the + (block inserter) icon and search for “cover”.
   • Or, type /cover wherever you see “Type / to choose a block”.

4. Click the cover icon to insert the Cover block: 

After you have added a Cover block, select the media that will be displayed. You can choose from the following options:

• Upload: Click the “Upload” button to select a file from your computer.
• Select Media: Find media in one of these places:
  • Media Library: Images and videos you have already uploaded to your site’s media library.
  • Your phone: Use the Jetpack mobile app to upload media directly from your phone.
  • Generate with AI: Provide a brief description of the type of image you want to use, and AI will create the design.
  • Google Photos: Select media from your connected Google Photos account.
  • Pexels: Search for free images from the Pexels library.
  • Openverse: Search for free images from the Openverse library.
• Use featured image: Displays the page or post’s featured image when set. Adding a Cover block to a template and selecting this option automatically displays the featured image from any page or post using that template.
• Color: Instead of adding an image or video, select a solid color for the banner.

You can then add content like text and buttons to the banner, customize the banner’s layout, and adjust the banner’s design.

Consider the following when selecting an image for your banner:

• Decorative or abstract images work best, since the full image may not always display in full on mobile devices.
• Type any text on top of the image, rather than designing the text inside the image itself. This ensures the text will scale effectively for all screen sizes.
• The Cover block uses the image as a background image, and will not resize to show the entire image width on smaller-sized devices. Using the focal point picker setting, you can select which part of the image to focus on when viewed on smaller screens.
  • If you have content in the image that needs to be displayed in its entirety on all device sizes, you can use an Image block instead.

The Cover block supports images, videos, and solid colors. To upload a video to the Cover block, you must have a WordPress.com plan that supports video uploads. Video uploads are included in the Premium plan and higher. With a plan that includes video uploads, you will be able to select videos when you choose your banner media.

The Cover block is decorative rather than functional, so it will not play any sound from a video file. Instead, use the VideoPress block for videos to play with sound.

After you add a Cover block, you can change the media at any time. To replace or remove the media in your banner:

1. Go to your site’s dashboard.
2. Navigate to the page, post, or template where the banner is located.
3. Select List View in the top-left corner of the editor.
4. Click the Cover block item in the list view.

5. In the block toolbar, click the Replace button to choose a new image or video.

You can choose a new media file using one of the following options:

• Open media library: Choose an existing image or video from your Media Library or other sources like Google Photos, Pexels, or Openverse.
• Upload: Select a new image or video from your device.
• Use featured image: Use the page or post’s featured image.
• Reset: Clear the banner media, displaying a solid color.