WordPress For Non-Techies: Free WordPress Tutorials – WPCompendium.org

Cover Block

WordPress Block Editor – Cover Block

This tutorial is part of our series WordPress Gutenberg: The Ultimate Guide For Non-Technical WordPress Users.

***

Cover Block – Description

The Cover block lets you give your post or page a sleek, professional look by adding a background image or a video cover with superimposed text (e.g. a heading).

Cover block.

This is useful for adding image headers with overlaid text to your posts and pages.

Create image headers for your posts and pages using the Cover block.

And video cover headers.

Create video headers using the Cover block.

How To Use The Cover Block

In this section, we’ll cover:

For more details on using blocks (e.g. how to move blocks around your content), see this tutorial: How To Use Blocks.

Adding A Cover Block

To add a Cover Block:

Let’s go through the above steps.

First, create a new post or page or open an existing post or page and either:

Click on the Add Block tool and select a Cover block…

Select the Cover block using the Add Block tool.

Or, select a Cover block using the Inserter tool in the Content Area.

Use the Inserter tool to add a Cover block to your content.

Either of the above options will add a Cover block to your content.

The Cover block includes the following options for adding an image or video file to your content:

Cover block added to content.

After adding a Cover block, you can add an image or video cover:

Let’s go through each of these methods.

Add A Cover Using Drag & Drop

To add a cover image or video using drag and drop:

Let’s go through the above steps:

First, make sure you have your media files folder open (you may have to resize your browser to view your post and your media folder)…

Open your media file folder and drag an image over the Cover block to upload it.

The image will automatically upload to your Cover block.

Drag an image to upload it to a Cover block.

Add A Cover Using Your Web Browser Uploader

To add a cover image or video using your web browser uploader:

Let’s go through the above steps:

First, click on the ‘Upload’ button in the Cover block…

Click on the Upload button.

This brings up the ‘Upload Media’ window on your browser.

Select an image or video for your cover from your media files folder and click the ‘Open’ button to import the media into the Cover block and add it to your post/page.

Uploading images to the Cover block.

Add A Cover From Your Media Library

To add a cover image or video from your media library:

Let’s go through the above steps:

Hover over the Cover block and click on the ‘Media Library’ button…

Click on the Media Library button.

Choose an image or video from your media library (or upload one from your media folder) and click on the ‘Select’ button.

Upload an image from your media library.

The media file will be imported to the Cover block and added to your post or page.

Media file added to Cover block.

Add Text Over A Solid Background

When you add a Cover block to a post or page, you can simply add a colored background instead of an image or video background by clicking on one of the colors in the block’s color selector.

Add a colored background to your Cover block.

After adding an image, video, or colored background to your Cover block, you can edit and configure your block settings, then save, publish, or update your post or page.

How To Edit A Cover Block

To edit a Cover block:

Let’s go through some examples of what you can do.

Formatting Your Cover Block Text

After typing or pasting in your text, you can format it in various ways, including bold, italics, adding hyperlinks, changing text alignment, and more.

Format the text in your Cover block.

You can also change its typography, color, and text settings.

Change the settings of your Cover block text.

Note: The default Cover block text is a Paragraph block.

You can change the text element to another type of block (e.g. a Heading block) or simply add other blocks to create a sleeker-looking cover image.

Add additional text blocks to your Cover block.
Formatting Your Cover Block Background Image Or Video

You can change the alignment of your background image or video, using the alignment buttons.

Cover block editor – Alignment buttons.

This lets you wrap text around your Cover block.

Wrap text around your Cover block.

You can also change the height display of your image or video in the Cover block using the Toggle full height button.

Toggle Full Height button.

Select full height or adjust the height of your Cover block background media file by dragging the resize handle. Use the Cover settings to further adjust the focal point of your image or video, add a color overlay (change its opacity), set the minimum height of your cover, and more.

Adjust the height of your media file.

For example, you can adjust media settings, like:

Add a repeated background to your Cover block background.

Choosing Fixed background keeps a background image fixed as your visitors scroll the page.

Cover block – Fixed background.

Select Repeated Background to repeat the same image and add a patterned background to your Cover block.

Cover block – Media Settings

Note: You can use the Repeated background toggle in combination with Fixed background (Fixed background does not have to be turned on).

Focal Point Picker

If the fixed background option is turned off in your Media settings, you can use the focal point picker tool to select and highlight an area of your cover’s background image or video.

Click and drag the focal point picker tool to a region of the image, or enter co-ordinate percentages into the ‘Left’ and ‘Top’ fields to set the horizontal and vertical position manually.

Use the focal point picker tool to select and highlight an area of your background image.
Change Content Position

In addition to highlighting a specific area of your cover’s background, you can also change the position of the content on your cover image or video.

Cover block – Change content position button.

Use this feature to quickly offset the position of your Cover block text.

Change the position of your content on the Cover block.

You can easily replace your Cover block image or video background by clicking on the Replace button and selecting a new media file.

Cover block – Replace button.

Select a new image or video from the Media Library, or upload one from your hard drive.

Easily replace your Cover block image or video background.

You can also select Solid or Gradient background overlay options for your Cover block.

Select Solid or Gradient background overlay options for your Cover block.

These options and settings give you fine control of your Overlay color choices.

For example, use the color selectors to colorize the overlay in your image or video backgrounds…

Change the overlay color in the Cover block settings.

Or, use the gradient tool to select and edit preset gradient options or add linear or radial gradients to your overlays.

Gradient Overlay option.

You can also change the opacity of your overlay.

Overlay settings – Opacity.

Move the slider to change the opacity of your Cover block overlay. 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.

Change the opacity of your Cover block overlay.

WordPress’s built-in user accessibility features will warn you if your color choices are hard to read with the message: “This color combination may be hard for people to read. Try using a darker background color and/or a brighter text color.”

WordPress warns you if your color combination is hard to read.

Remember to update and publish your post or page to save your settings.

How To Remove A Cover Block

To delete or remove a Cover block from your content:

Use the More Options menu to remove a Cover block from your content.

Additionally…

Cover Block Tools, Options & Settings

The Cover block includes tools, options, and settings for:

Cover Block Editor

Cover block editor.

The Cover Block Editor includes tools that let you perform the following operations:

Note: The Cover block also includes an embedded Paragraph block as the default Text element.

Cover block – Text editor.

Hovering over the block icon displays the Parent Cover block icon.

Click on the Parent icon to bring up the main Cover block editor menu.

Cover block editor tools.

You can also change the default Paragraph block into other blocks for the text element of your Cover block.

Change the default Paragraph block in the Cover block.

Cover Block Settings

Cover block settings.

Cover block settings include:

Cover Block – Additional Info

You can convert the Cover block into the following block types:

Change the Cover block into other block types.

Notes:

Additionally:

Installing plugins or themes on your site may also add new functionality, options, or settings to the Cover block.

Add image and video covers to your posts and pages using the Cover block.

Congratulations! Now you know how to use the WordPress content editor’s Cover block.

To learn how to use other blocks, go here: WordPress Block Editor – How To Use Blocks

***

"I love the way your email series "Infinite Web Content Creation Training Series" is documented and presented. It is very absorbing and captivating. The links and tutorials are interesting and educational. This has motivated me to rewrite my content following the concepts I am learning from the email series." - Mani Raju, www.fortuneinewaste.com

***

We are not affiliated, associated, sponsored, or endorsed by WordPress or its parent company Automattic. This site contains affiliate links to products. We may receive a commission for purchases made through these links.

Stock video by Videezy

For a white label version of this tutorial visit WPTrainingManual.com.