Cover Block

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.

Use the slash command /cover to insert a cover image

Detailed instructions on adding blocks can be found here.

Block Interface

Each block comes with unique toolbar icons and specific user controls that allow you to manipulate the block right in the editor.

The cover block offers many toolbar options

Adding Image

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.

Edit Image

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.

Alignment

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.

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 exclusively available within the Conj - eCommerce WordPress Theme which supports these alignments in any fluid width page template.

Wide will simply break the bounding column, while full will reach to the sides of the page width

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.

The cover block settings can be found in the sidebar

Fixed Background

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.

Overlay Color

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.

Add a color overlay and set its opacity

Background Opacity

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.

This setting is useful if you are using a visually noisy background image and finding the text in the cover block difficult to read.

Advanced

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.