Adding a cover image to your post or page will positively transform any regular content into a sleek, professional looking article.
To add a cover, click on the Add Block button and select the Cover block. Alternatively, you can start typing
/cover in a new paragraph block, then press enter.
Each block comes with unique toolbar icons and specific user controls that allow you to manipulate the block right in the editor.
Upon adding the cover block, you have two options to chose from, Upload and Media Library. The upload button allows you to 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.
This is the secondary option in the cover block’s toolbar. Clicking on the pencil icon will enable you to select a new image file for your block. You may use this if you need to replace the already existing image file in your cover block.
A block-specific toolbar will appear whenever you select the cover block. Three of the options are for the block’s alignment, right, center, and left. Choosing the right or left will allow you to place another block alongside the cover block moreover picking center will return the block to its default, taking up the full width of the post or page content.
In addition to the options found in the block’s toolbar, you may locate the block specific settings in the editor sidebar panel. Clicking on the cog icon next to the publish button will toggle the visibility of this panel.
Within the block settings panel on the sidebar, you have several other options to modify this block, the first of which is a toggle for a Fixed Background. Enabling this toggle field allows the cover block to fix the position of the image while user scrolls along with your page, nevertheless leaving this toggle off embeds the image in block’s wrapper, so the image doesn’t scroll.
The following option allows you to 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 range slider allows you to set the opacity of the cover image’s overlay. Moving the slider up toward 100 makes the overlay darker and muddier, and moving it down toward 0 makes the overlay lighter and more transparent. At 100, the overlay is entirely dark, and the cover image is no longer visible. At 0, the overlay disappears completely, leaving only your image.
The advanced tab lets you add a CSS class to your block, allowing you to write custom CSS and apply styles to the block as you see fit.