Cover Block

To give your post or page a sleek, professional look, you can add a 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.

Block Interface Block Interface

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.

Top ↑

Adding Images Adding Images

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.

Top ↑

Edit Image Edit Image

This is another option in the cover block’s toolbar. Choosing this 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.

Top ↑

Titling Titling

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 choose to align the title to the left, right, or center. You can even turn the title into a link!

Top ↑

Alignment Alignment

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.

Top ↑

Edit Media Edit Media

Also found on the cover block’s toolbar, you can use the Edit Media button to select another image or add a title, caption, alt text, or description.

Top ↑

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.

Top ↑

Fixed Background Fixed Background

In the block settings on the sidebar, you have some other options, the first of which is 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.

Top ↑

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

Top ↑

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

Top ↑

Advanced
Advanced

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.

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

Changelog

  • Updated 2020-04-28
    • Changed Category to “Common Blocks”
  • Updated 2019-11-27
    • Updated animated GIF to video
  • Created 2020-03/07