Cover Block

The Cover Block lets you add an image or video cover with a text overlay to WordPress …

WordPress Gutenberg Blocks – Cover

WordPress Gutenberg - Cover Block

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

***

Cover Block Description

The Cover Block lets you add an image or video cover with a text overlay to WordPress …

Add image and video covers to WordPress using the Cover Block

(Add image and video covers to WordPress using the Cover Block)

This is useful for adding image content headers to your posts and pages …

Add image cover headers to your posts & pages

(Add image cover headers to your posts & pages)

And video cover headers …

Add video cover headers to your posts & pages

(Add video cover headers to your posts & pages)

How To Use The Cover Block

To add a Cover Block:

  • Either:
    • Click on the ‘Add Block’ tool in the Editing Toolbar section and select a ‘Cover’ block (in Most Used or Common Blocks section), or
    • Add the ‘Cover’ block in the Content Area.
  • Drag or upload a new image or video, or select a media file from the Media Library.
  • Use the tools in the Cover Block Editor or Block Settings section to edit, format, or customize your cover.

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 …

'Add Block' Tool - Add Cover Block

(‘Add Block’ Tool – Add Cover Block)

Or, select a Cover Block in the Content Area

Add a Cover Block from the Content Area

(Add a Cover Block from the Content Area)

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

  • Using drag and drop.
  • Using the web browser uploader.
  • From your media library.

Add A Cover Using Drag & Drop

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

  • Make sure you have your ‘media files’ folder open (you may have to resize your browser to view your post and your media folder).
  • Select an image or video for your cover from your media files folder and drag it onto the active (shaded) gallery upload tool.
  • The cover image or video will be automatically uploaded to your media library and inserted into your Cover Block.

Add an image or video cover to WordPress using drag and drop

(Add an image or video cover to WordPress using drag and drop)

Add A Cover Using Your Web Browser Uploader

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

  • Make sure you know where your ‘media’ folder is located.
  • Hover your cursor over the Cover Block and click the ‘Upload’ button to open your web browser’s image uploader window.
  • Select an image or video for your cover from your media folder and click the ‘Open’ button to import the image or video.
  • The cover image or video will automatically be uploaded to your media library, imported to your Cover Block, and added to your post/page.

Let’s go through the above steps:

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

Cover Block - Upload button

(Cover Block – Upload button)

This will bring up the ‘Upload Media’ window on your browser. Select an image or video for your cover from your media folder and click on ‘Open’ to import the media into the Cover Block and add it to your post/page …

Upload a media file

(Upload a media file)

Add A Cover From Your Media Library

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

  • Make sure that your media files (image or video) have been uploaded to your media library (if you need help with this step, see our How To Use The WordPress Media Library tutorial).
  • Hover your cursor over the Cover Block and click on the ‘Media Library’ button.
  • Click on an image or video from the Media Library to select it.
  • Click on the ‘Select’ button.
  • Your media file will be imported to the Cover Block and added to your post or page.
  • Update or publish your post or page to save your changes and update your content.

Let’s go through the above steps:

Hover your cursor over the Cover Block and click on the ‘Media Library’ button …

Cover Block - Media Library upload button

(Cover Block – Media Library upload button)

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

Upload a media file from the Media Library

(Upload a media file from the Media Library)

The media file will be imported to the Cover Block and added to your post or page …

Media File added

(Media file added)

After adding image or video covers:

  • Edit and configure block settings,
  • Save, publish, or update your post or page.

How To Edit A Cover Block

To edit a Cover Block:

  • Click inside the Cover Block to select it.
  • Use the Block Editor tools to:
    • Change the alignment of the cover image or video (left, center, right).
    • Change the width of the cover image or video (wide or full)
    • Change the alignment of the cover text (left, center, right).
    • Format the text (bold, italics, strikethrough).
    • Add a hyperlink to the cover text.
  • Use the Block Settings to:
    • Change overlay color and background opacity.

Type or paste in your cover text …

Type or paste in your cover text

(Type or paste in your cover text)

Change the alignment of your cover image or video and text …

Edit a Cover Block

(Edit a Cover Block)

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:

  • Click inside the Cover Block to select it.
  • Select the ‘More Options’ tool in the Block Editor.
  • Click on ‘Remove Block’.
  • The block will be removed from your post or page.

Remove a Cover Block

(Remove a Cover Block)

Additionally …

  • You can reposition your block using the ‘Move Up’ and ‘Move Down’ arrows or the Drag and Drop handle tool (see our ‘How To Use Blocks‘ tutorial if you need help with this step).
  • You can also convert Cover Blocks into Reusable Blocks.

Cover Block Tools, Options & Settings

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

  • Cover Block Editor
  • Cover Block Settings

Cover Block Editor

Cover Block Editor

(Cover Block Editor)

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

  • Change Block Type (See ‘Cover Block – Additional Info’ section below.)
  • Align Image
    • Align image left
    • Align image center
    • Align image right
  • Cover Width
    • Wide width
    • Full Width
  • Align Cover Text
    • Align text left
    • Align text center
    • Align text right
  • Format Cover Text
    • Bold
    • Italics
    • Strikethrough
  • Add Hyperlinks
    • Paste link URL
    • Type to search and link to existing content
    • Hit ‘Enter’ or click ‘Apply’ button to create link
    • Option to open link in new tab
  • More Options

Cover Block Editor

(Cover Block Editor)

Cover Block Settings

Cover Block Settings

(Cover Block Settings)

Cover Block settings include:

  • Block description area
  • Cover Settings
    • Fixed Background – This setting applies to images only and fixes a section of the image as the cover image background.
  • Overlay Settings
    • Overlay Color – Use the color selectors and color palette to set a overlay color.
    • Background Opacity – Use the slider or type in a value (0-100) to set the opacity of the overlay (100 = solid color, no image visible)
  • Advanced Settings
    • Additional CSS Class

Cover Block Settings

(Cover Block Settings)

Cover Block – Additional Info

The Cover Block can be converted into the following block types:

Change Block Type - Cover Block

(Change Block Type – Cover Block)

Info

Notes:

  • If no image or video is selected for the Cover Block, you can change the Cover Block into an Image, Heading, or Video Block.
  • If an image is selected for the Cover Block, you can only change the Cover Block into an Image or Heading Block.
  • If a video is selected for the Cover Block, you can only change the Cover Block into a Video or Heading Block.

Change the Cover Block into other block types

(Change a Cover Block into other block types)

Additionally:

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

***

Congratulations! Now you know how to use the WordPress Gutenberg content editor Cover Block.

WordPress Gutenberg - Making WordPress Easier For Non-Techies

***

"Wow! I never knew there's so much to learn about WordPress! I bought one of the WordPress for Dummies three years ago, such authors need to be on this course!" - Rich Law, Create A Blog Now

Stock video by Videezy

Recommended Video Courses For WordPress Users

Keyword Research ToolsKeyword Research Tools

This video course shows you how to do keyword research using tools like the Google Keyword Planner.

More info: Keyword Research Tools

Recommended Video Courses For WordPress Users

WordPress Traffic & User EngagementWordPress Traffic & User Engagement

Learn how to drive more targeted traffic to your website and discover ways to improve user engagement with your business online.

More info: WordPress Traffic & User Engagement

Recommended Video Courses For WordPress Users

Build A WordPress Site ... Fast!Build A WordPress Site ... Fast!

Need a new website or blog in a hurry?

This video course shows you how to quickly install and configure a WordPress website or blog on your own domain name and be up and running in no time!

More info: Build A WordPress Site ... Fast!

Recommended Video Courses For WordPress Users

Google ToolsGoogle Tools

This video course will help you learn the basics of using Google Tools like Google Analytics and Gmail.

More info: Google Tools

Recommended Video Courses For WordPress Users

Why Your Business Needs WordPressWhy Your Business Needs WordPress

Learn about the unique features, benefits, and advantages of using WordPress to start or grow your business online.

More info: Why Your Business Needs WordPress

Recommended Video Courses For WordPress Users

WordPress 101: How To Use WordPressWordPress 101: How To Use WordPress

Learn how to unlock the power of the WordPress content management system (CMS) using the many powerful features inside your WordPress administration area.

More info: WordPress 101: How To Use WordPress

Author: Martin Aranovitch

Martin Aranovitch is the owner of WPCompendium.org and the author of The WordPress User Manual. WPCompendium.org provides hundreds of FREE tutorials that show you how to use WordPress to grow your business online with no coding skills required! Get our FREE "101+ WordPress Tips, Tricks & Hacks For Non-Techies" e-course with loads of useful WordPress tips!

Originally published as Cover Block.