Blocks

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

↑ Table of Contents ↑

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.

↑ Table of Contents ↑

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.

↑ Table of Contents ↑

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!

↑ Table of Contents ↑

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.

↑ Table of Contents ↑

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.

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

↑ Table of Contents ↑

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.

↑ Table of Contents ↑

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.

↑ Table of Contents ↑

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.

↑ Table of Contents ↑

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.

Not quite what you're looking for?

Get Help