The Cover block displays an image or video that you can add text and other content on top of — great for headers and other banner-style displays. This guide will show you how to use the Cover block to give your post or page a sleek, professional look.
In this guide
Video Transcript
The cover block is a great way to add some visual interest to your pages and posts. It allows you to use an image, video, or solid color as a background, and then add content blocks to the foreground.
To add a cover block, click the Block Insertor button, and then search for the cover block. Or type a forward slash on a new line, followed by the word “cover.” then press Enter to add the cover block.
Next, select one of the preset colors from your theme to use a solid color as the background. Or you can upload a background image or select an existing image from your media library, your Google Photos account, or the Pexels Free Photo Library.
Generally speaking, abstract or decorative images work best, since the full image may not always display, and you’ll likely add some text or other content over the image.
Once you’ve selected a cover image, you can add any text you like. You can use this, for example, to title a new section of a post, or create a header for a page. But you could also add other blocks, like a quote or a button block.
To select the parent cover block, click the button on the left side of the toolbar. Then, you can change the width and the alignment of the cover block.
And you can change the position of the content within the block by selecting one of the content position options.
If you want, you can toggle the full height option to show the entire cover image. Or you can change the height of the cover block by clicking the handle at the bottom and then dragging it up or down.
If you’d like to get a little more creative, you can apply a duotone filter to create a two-tone color effect. You can select one of the preset color combinations, or choose the colors you’d like to use for the shadows and the highlights. To remove the effect, click the Clear button.
And of course, you can always replace this image with another one any time you like.
From the Options menu, you can show a few additional settings for the cover block.
First, you can choose how the background image behaves when you scroll up and down the page. A fixed background means the cover image will stay in place while your content scrolls along with your page. If you use a smaller image, you can choose to repeat it like a pattern to cover the entire background of the block.
If the Fixed Background option is turned off, you can also set the main point of interest, or focal point, within the photo. Click on the picker to drag it to the spot you want, or use the horizontal and vertical position percentages below to set it manually.
It’s always a good idea to add an alternative text description, which not only gives search engines an idea of what this image is, but also helps your visually impaired visitors to know what the image represents.
To remove the cover image and use a solid background color instead, click the Clear Media button.
By default, the cover block adds a gray transparent overlay to darken the background image, but you can choose any color you like, or even a gradient if you prefer. You can also set the opacity of the overlay color. Move the slider to the left to make the overlay color more transparent, or to the right to make it darker and more opaque.
You can change the padding within the cover block by entering a value here.
And finally, you can set the minimum height of the cover image in pixels. So it will always be displayed at this height. no matter what size screen your visitors may be using.
With all these options, the cover block is a great way to add some visual interest to your pages and posts. For more help with the cover block, please visit wordpress.com/support.
To add the Cover block, click on the + Block Inserter icon and search for “cover”. Click it to add the block to the post or page.
💡
Using your keyboard, you can also type /cover on a new line and press enter to quickly add a new Cover block.
For more, visit our detailed instructions on adding blocks.
Once you insert the block, you have two options to set an image or video: Upload and Select Media:
- Choose Upload to add a new image or video from your device.
- Choose Select Media to choose from an existing image or video on your site, Google Photos, Pexels Free Photos, or Openverse.
You can also select the Use featured image option to set the cover as the featured image of your page or post.
Alternatively, you can click on the colored circles to use the respective background color for your cover. You can later change it to any other color in the block settings.
Tips for Choosing an Image
- Decorative or abstract images work best since the full image may not always display.
- Type any text on top of the image, as opposed to designing the text inside the image itself. This ensures it 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 different size devices. If you have content in the image that needs to be displayed for all device sizes, you would want to use an Image block instead.
Now that you’ve selected your image, you can write a title over it. You can use this, for example, to title a new section of a post or page. You can also add other blocks to show on top of the Cover block, such as a Button block or Paragraph block.
This feature is available on sites with our WordPress.com Premium, Business, and Commerce plans. If your site has one of our legacy plans, it is available on the Pro plan.
You can use a video in the Cover block. This works best with videos in .mp4 format, but feel free to upload your videos in other formats. See the list of accepted formats.
Please note that the Cover block will not play any sound from the video file. If you want your video to have sound, use the Video Block instead.
Insert the Cover block as you would normally, but instead of choosing an image, you can choose to add a video. Then, you can select the video you’d like to insert and adjust the width settings of the block as needed.
You’re then ready to add any text or buttons you’d like on top of your cover video.
After adding a Cover block, you can select it from the List View to reopen its toolbar and settings panel on the right sidebar:
When you click on the block, a toolbar of options will appear above it:
These options are:
- Change block type.
- Drag the block.
- Move the block up or down.
- Align the image (left, right, and center; plus wide and full-width options if supported by the theme)
- Change content position
- Toggle full height
- Apply duotone filter
- Use featured image
- Replace the current image with a new one
- More options
Like many other blocks, you can align the Cover block itself to the left, right, and center from the toolbar. When using the left or right alignment, you can put another block beside the Cover block.
The Cover block also has Wide and Full-width alignment options that are useful for creating unique headers and widescreen effects. These two options are only available if your theme supports this kind of alignment.
Content Position
Use the Content Position option to adjust where the text and other content sits on the image:
Full Height Alignment
To set the image to always show the full height, you can set the Toggle Full Height option in the block’s toolbar that appears when you click on it.
The duotone filter option allows you to set image colors from the block toolbar. Think black and white photos, but in any color combo of your choosing. To get started, select the Duotone Filter button in the toolbar, then choose from the examples shown, or set your own colors.
To set your own colors, select the dots within the color bars:
Use the Cover block if you want to automatically display your featured image at the top of your post or page as well.
- In your post or page, add a featured image.
- Add a Cover block by clicking the + Block Inserter icon or typing /cover on a new line, then press enter.
- On the Cover block’s toolbar, click Add Media, then select Use featured image. This will automatically pull in your current featured image and add it to the Cover block.
This is another option in the Cover block toolbar that shows up after you’ve added an initial image or video. Choosing Replace will allow you to select a new media file for your Cover block.
You will find additional block settings in the right sidebar when you click on the block. If you do not see the sidebar, you may need to click the Settings icon in the top-right corner to bring up the settings. This icon looks like a square with two uneven columns:
Fixed Background
In the block settings on the sidebar, you will see a toggle for a fixed background. A fixed background means the cover image scrolls along with your page. Turning this option off embeds the image in place, so the image doesn’t scroll.
This feature, also called a parallax effect, may be disabled on some mobile devices to improve the page’s performance.
Repeated Background
The repeated background option lets you repeat the same image to form a pattern in the Cover block. For example, if you have a small image of a balloon and you want it to repeat multiple times in the Cover block, you can toggle this option on. Here’s what that would look like:
💡
Use a small image to repeat it multiple times. The smaller the image, the more it will be multiplied.
You can use the Repeated background toggle in combination with Fixed background, but Fixed background does not necessarily have to be turned on. Feel free to play around with these options to find what suits your needs.
Focal Point Picker
If the fixed background option is turned off, you will see the focal point picker. This tool lets you identify the main point of interest in the photo and highlight it. Click on the picker to drag it to the spot you want, or use the horizontal and vertical position percentages below to set it manually.
Alternative Text
In the text field, you can write an Alternative Text description, which is important for accessibility and SEO.
Clear Media
To clear the cover image in order to use a solid colored background, use the ‘Clear Media’ option as seen here:
The advanced settings allow you to create an HTML anchor for the current block which can be used to create a hyperlink to it, add additional CSS classes and also add/remove space from top/bottom of the block.
Learn more about HTML anchors here. You can also learn more about adding additional CSS classes to blocks here.
In the block settings sidebar, click on the Styles icon to access the design settings for the block:
Text Color
Set the default color for any text added to the Cover block. You will still be able to add custom text colors to any text (paragraph, header, etc) block you add within the Cover block.
Overlay Color
Using the overlay color options, you can add a color overlay to the cover image. By default, this is a gray, transparent overlay, but with the overlay color options, you can switch that color to any other color of your choice.
Overlay Opacity
This slider lets you set the opacity of the cover image’s overlay. Moving the slider up toward 100 makes the overlay darker and more opaque, and moving it down toward 0 makes the overlay lighter and more transparent. At 100, the overlay is completely opaque and the cover image is no longer visible. At 0, the overlay disappears completely, leaving only your image.
💡
If you’re adding a title to your cover image, we recommend making the overlay at least somewhat opaque to make the title easier to read.
Adjust the appearance of the block’s text with the following settings.
If you don’t see the setting, click the three dots to the right of Typography (as shown on the right.) You can then choose the option you want to access:
- Font size
- Font family
- Appearance
- Line height
- Decoration
- Letter case
- Letter spacing
Font size allows you to adjust the size of the text. You can choose from preset sizes like small, medium, and large.
You can also set a specific value by clicking the slider icon directly above the default selections, marked with a 1 in the screenshot below. You can change the units by clicking where a number 2 is marked in the screenshot below. Choices are pixels, em or rem.
Font family gives you the option to change the font style used. Choose from a list of fonts in a drop-down menu.
Appearance allows you to change the text’s style between regular and italic, ranging from thin to extra bold.
Line Height sets the spacing above/below the text. If you select zero, be sure to check your site on mobile.
Decoration includes options for underline and strikethrough (if available.)
Letter case allows you to set the text to all caps, the first letter capitalized, or all lower case.
Letter spacing sets the space between each character of the text. You can change the units from the default (pixels) to percentage, em, rem, vw, and vh. Learn more about relative units here.
On certain themes, the block will include a setting for Dimensions, with options for padding or margin.
Click on the + icon next to Dimensions to select and activate the Padding and Margin dimension settings.
The Padding setting affects the space around the block’s content, inside of its borders.
The Margin setting affects the space outside of the selected block’s borders.
You can type in a custom value in the text field if you want the same spacing all around the block.
For more specific control, click the link icon to set different spacing values for the top, right, bottom, and left of the block.
To change the unit for the margin or padding setting, click on PX to display a dropdown with the other supported units: %, EM, REM, VW, and VH.
Block Spacing
The block spacing option allows you to set the space between the blocks added within the Cover block. For example, if you want to have a Heading and a Navigation block, but have some spacing between them, this setting will let you accomplish that.
Minimum Height of Cover
Set the height of the Cover block to a specific value. Click on PX to display a dropdown with the other supported units: %, EM, REM, VW, and VH.
By default, these settings control the values on all four sides. To make specific adjustments to the top, right, bottom, and left sides, click the link icon.
Border
Use the border settings to add a border line around your content. You can choose the color, the size, and the unit of size (px, %, em, rem, vw, and vh.)
Radius
The Radius allows you to give your block’s borders a rounded appearance. Setting the radius to 0 means the block has sharp edges.
