The cover block lets you insert cover images or cover videos to your posts or pages. A cover image or cover video is a wide image (or video) used as a cover photo for a new section of a post or page. It allows you to add text and cover overlay to your cover image or cover video and lets you create sections in your articles in a more visually appealing way rather than using heading text.
Here’s what it looks like when it’s added to the Block Editor.
To add a cover block to a page you click on the + icon at the left of any empty block or at the top left of the editor then search for cover, or locate it in the Common Blocks section, and click on the Cover icon.
More detailed instructions for adding blocks can be found here.
Add Your Cover Image or Video
Once you have added the Cover block, you click on Upload or Media Library to add your cover image, video or select a background color.
Upload lets you upload an image or video from your device while Media Library is used to select an image or video you’ve already uploaded to your site’s media library.
Add Your Cover Title
After you have added your media file you will see an option to add your cover title. Type the text you want to appear on your Cover.
Click on the Link icon then paste the URL of the page you want to redirect readers to into the link field and click Apply to link your title text to another page or website URL.
Nest other blocks inside Cover Block
With the cover block you can add other blocks inside it which enables you to add buttons, paragraphs, and headers to easily create a call of action. The Add Block icon (+ icon) appears when you hover your mouse over the cover block.
Click on the + icon and search for the block you want to add.
You reveal the block’s toolbar by selecting the block. The cover block toolbar includes options to change block type, change alignment, and edit media.
The change block type or style icon is used to transform the block into an image block or a group block. The Edit media is used for replacing the cover image or video with a new image or video.
The alignment of the file block is changed by clicking on the change alignment icon and selecting the preferred alignment. Choosing right or left allows you to place another block alongside the cover block. Selecting center returns the block to the default and the cover block will take up the full width of the post or page.
- Align left: used to align cover left.
- Align Center: used to center align cover.
- Align Right: used to align right cover.
Additional options for the button block are located in the editor sidebar of the block editor. Click on the Settings icon next to the Publish/Update button if you don’t see the editor sidebar.
In the Media Settings you can change to fixed background. A fixed background means the cover image or cover video scrolls along with your page. The Focal Point Picker allows you to change the alignment of the image, and where the main focus point is. Depending on the size of your image and how it’s displayed by your theme, you may or may not see much of a difference when changing this.
Dimensions is used to change the height of the cover block.
The overlay color options allow you to add a cover overlay to your cover block. By default, this is a gray transparent overlay. The background opacity allows you to set the opacity of the cover image’s overlay. Moving towards 100 makes the overlay darker and more opaque while moving towards 0 makes the overlay lighter and more transparent.
The advanced tab lets you add a CSS class to your block allowing you to write custom CSS and style the block.