Blocks

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 ↑

Choose an Image

Once you insert the block, you have two options: Upload and Select Media:

  1. Choose Upload to add a new image from your device.
  2. Choose Select Media to choose from an existing image on your site, Google Photos, or the Pexels Free Photo library.
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.

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

Wide width image above a full-width one, showing that Full extends further out.
Wide will simply break the bounding column, while full will reach to the sides of the page width.
Full Height Alignment

To set the image to always show the full height, you can set the “Toggle Full Height” option in the floating toolbar for the block.

Gif showing how to set the Cover Block to full Height
Content Position

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

Clicking the Content Position button in the toolbar gives you options to set where any content added to the Cover block aligns.
Moving the content inside the block using Content Position
Replace Image

This is another option in the Cover block 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.
Styles
The Styles section  has 3 options, a default, one with a Bottom Wave, and one with a Top Wave.

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.

The fixed image means that as you scroll, the frame for the image moves.
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:

The repeated background toggle is under the Media settings option in the sidebar for the Cover block.
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.

Clear Media

To clear the cover image in order to use a solid colored background, use the ‘Clear Media’ option as seen here:

Clear Media button
Select ‘Clear Media’ to remove your cover image
Dimensions

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.

The Color Overlay option is in the sidebar under Overlay, and allows you to choose from a set of colors, set a custom color, and set opacity.
Add a color overlay and set its opacity.
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 ↑

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

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

Not quite what you're looking for?

Get Help