Blocks »Cover Block

To give your post or page a sleek, professional look, you can add a Cover block.

Table of Contents

Add the Cover Block

Get started by clicking the + Inserter icon. You can also quickly add one by typing /cover in a new paragraph block, then press enter.

Use the slash command /cover to insert a cover image.
Use the slash command /cover to insert a cover image.

Detailed instructions on adding blocks can be found here.

↑ Table of Contents ↑

Add an Image

Once you create the block, you have two options, Upload and Media Library. Upload lets you upload a new image from your device and Media Library allows you to select an image you’ve already uploaded to your site’s Media Library.

↑ Table of Contents ↑

Add Text and Other Content

Now that you’ve got your cover image selected, 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.

↑ Table of Contents ↑

Block Toolbar

Every block comes with unique toolbar icons and block specific user controls that allow you to manipulate the block right in the editor.

The cover block offers many toolbar options.
The cover block offers many toolbar 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 a Wide and Full width alignment that is useful for creating unique headers and widescreen effects. These two options are only available if your Theme supports this kind of alignment. 

Wide will simply break the bounding column, while full will reach to the sides of the page width.
Wide will simply break the bounding column, while full will reach to the sides of the page width.
Content Position

Use the Content Position option to adjust where the text and other content sits on the image:

Cover Block - Content Position Option
Moving the content inside the block using Content Position
Replace Image

This is another option in the Cover block’s toolbar. Choosing Replace will allow you to select a new image file for your block. Use this if you need to replace the image file in your Cover block.

↑ Table of Contents ↑

Block Settings

Every block has specific options in the editor sidebar in addition to the options found in the block toolbar. If you do not see the sidebar, simply click the ‘cog’ icon next to the Publish button.

The block settings can be found in the sidebar.
The block settings can be found in the sidebar.

Use the Styles in the Cover block settings to add a wave effect to the top or bottom of the cover image.

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.

Turn your cover block into a fixed image.
Turn your Cover block into a fixed image.
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:

Repeated background toggle turned on in the Cover block settings.
It’s just one image repeated many times using the Repeated background option.

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. 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.


You can set the minimum height of the cover image (in pixels), guaranteeing it will always be displayed at least as high as you set it, no matter what size screen someone is using to view the page.

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.

Add a color overlay and set its opacity.
Add a color overlay and set its 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.

↑ Table of Contents ↑

Video in the Cover block

Does your site have the Premium, Business or eCommerce plan? You can use a video in the Cover block! It works best with videos in .mp4 format, but feel free to upload your videos in other formats; you can find the list of accepted formats in our VideoPress FAQs.

Insert the Cover block as you would normally, but instead of choosing an image, you can choose to add a video you’ve already uploaded (or of course upload a video directly):

Recording: inserting a Cover block, choosing to insert image from the media library and selecting the video tab in the media library popup.

Then, you can select the video you’d like to insert, and possibly adjust the width settings of the block:

Recording: selecting a video to insert in the block and adjusting the block width.

You’re then ready to add any text or buttons you’d like on top of your cover video!

↑ Table of Contents ↑


The advanced tab lets you add a CSS class to your block, allowing you to write custom CSS and style the block as you see fit. Learn more.

The advanced section lets you add a CSS class to your block.
The advanced section lets you add a CSS class to your block.

Not quite what you're looking for?

Get Help