WordPress Block Editor – Cover Block

This tutorial is part of our series on How To Use The WordPress Block Editor (Gutenberg).

• To learn more about using the WordPress block editor interface, go here: The WordPress Block Editor – Content Area
• To learn more about using blocks, see this tutorial: How To Use WordPress Block Editor Blocks
• To learn more about using media with WordPress, see these tutorials:
  • How To Use The WordPress Media Library
  • Using Images In WordPress
  • How To Add Videos In WordPress

***

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).

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

And video cover headers.

How To Use The Cover Block

In this section, we’ll cover:

• How to add a Cover block to your content.
• How to edit and configure your Cover block and block settings.
• How to remove the Cover block from your content.

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:

• Either:
  • Click on the ‘Add Block’ tool in the Editing Toolbar section and select the Cover block (in Most Used or Media 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…

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

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:

• Upload – select this option to upload a new image from your media storage device.
• Media Library – choose this option to select an image you’ve already uploaded to your site’s Media Library.

Note: The Cover block’s color palette is controlled by the active theme installed on your site.

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

• Using drag and drop (Upload button).
• Using the web browser uploader (Upload button).
• From your media library.
• Or, you can just add text over a colored background.

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:

• Select an image or video for your cover from the media files folder in your storage device and drag it onto the block.
• The cover image or video will be automatically uploaded to your media library and inserted into your Cover block.

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)…

The image will automatically upload to your Cover block.

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 the media files folder is located on your media storage device.
• Hover 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…

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.

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 tutorial on How To Use The WordPress Media Library).
• 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 over the Cover block and 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.

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

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.

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:

• 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 width, full width)
  • Toggle the height of your cover image or video height
  • Change the alignment of the cover text (left, center, right).
  • Format the text (e.g. bold, italics, strikethrough, subscript, superscript, etc.).
  • Add a hyperlink to the cover text.
• Use the Block Settings to:
  • Change overlay color and background opacity.
  • Change media settings.
  • Change image dimensions.
  • Add advanced settings.

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.

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

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.

Formatting Your Cover Block Background Image Or Video

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

The alignment options let you wrap text around your Cover block.

It also lets you specify whether to display your cover image or video in wide width (stick out on either side of normal content) or full width (stretch across the width of the entire browser).

You can also change the height display of your image or video in the Cover block using the 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.

For example, you can adjust media settings, like:

• Fixed background
• Repeated background

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

• Turning Fixed background on separates the cover title from the background image, so the image stays fixed while the cover title scrolls along with your page.
• Turning the option off makes both the cover and the image scroll together.

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

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.

Add Padding

You can adjust the spacing of your Cover block text by specifying uniform or independent padding values.

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.

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

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

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

You can also 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…

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

You can also change the opacity of your overlay.

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.

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.”

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:

• Click inside the Cover block to select it.
• Select the ‘More Options’ tool in the Block Editor.
• Click on ‘Remove block’.
• This will remove the Cover block from your content.

Additionally…

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

Cover Block Tools, Options & Settings

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

• Cover Block Editor
• Cover Block Settings

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.)
• Drag & Drop Tool
• Move Up and Down Tool
• Change Alignment
  • Align left
  • Align center
  • Align right
  • Wide width – wide-aligned media elements stick out from normal content on either side.
  • Full width – cover elements set to full-width stretch the entire width of the browser window (normal content remains within margins on either side).
• Toggle Full Height
• Change Content Position
  • Top Left
  • Top Center
  • Top Right
  • Center Left
  • Middle
  • Center Right
  • Bottom Left
  • Bottom Center
  • Bottom Right
• Replace
  • Open Media Library
  • Upload
• More Options – See How To Use Blocks to learn how to use this section.

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

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.

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

Cover Block Settings

Cover block settings include:

• Block description area
• Styles – The styles displayed in this section depend on the theme and plugins installed on your site. For example, default, borders, etc.
  • Default Style – Use the drop-down menu to select a default style for the block.
• Media Settings
  • Fixed Background – This setting applies to images only and fixes a section of the image in the cover image background.
  • Repeated Background – This setting applies to images only and repeats the image in the cover image background.
  • Focal point picker – The focal point picker lets you select the main point of interest in your image or video background and highlight it in your cover. This tool displays if the fixed background option is turned off and applies to both images and video backgrounds.
    • 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.
    • Click the ‘Clear Media’ button to remove your image or video background and return the Cover block to its default position.
• Dimensions – Enter a minimum height for your cover image (in pixels). This guarantees that your image will display the minimum height you have set regardless of the size screen used to view your page.
  • Click on the Toggle Full Height button to set the dimension at 100% vertical height.
  • Drag the image resize tool on the block to change the values in the Dimensions field accordingly.
• Overlay Settings
  • Overlay Color – Add a color overlay to your cover image.
    • Use the tool, selectors, and preset palettes to select overlay color options.
    • The default is a gray, transparent overlay. Use the overlay color options to switch colors or select the custom color picker tool to add any color of your choice.
    • After adding a color overlay, you can set its opacity (see below).
  • Solid/Gradient – Choose solid or gradient overlay options and adjust these using the color tools, selectors, and preset palettes.
    • Gradient overlay options include:
      • Linear – Change control points and control point colors using the control point tool, and linear angles by entering values or dragging the angle wheel.
      • Radial – Change control points and control point colors using the control point tool.
  • Background Opacity – This slider lets you set the opacity of the cover image’s overlay.
    • Use the slider or type in a value (0-100) to set the opacity of the overlay (100 = solid color, no image visible)
    • Move the slider up toward 100 to make the overlay darker and more opaque, or move it down toward 0 to make the overlay lighter and more transparent.
    • Note: If you’re adding a title to your cover image, we suggest making the overlay somewhat opaque to make the title easier to read.
• Spacing
  • Padding – Set padding values for your cover image or video text. Select a unit from the drop-down menu:
    • PX (Pixels)
    • EM (Font size) 
    • REM (Root em)
    • VH (Viewport Height)
    • VW (Viewport Width)
  • Link/Unlink sides
    • Link sides –  Set up uniform padding values for the left, right, top, and bottom sides of your cover image or video text.
    • Unlink sides – Set up different padding values for the left, right, top, and bottom sides of your cover image or video text.
    • Reset – Resets padding values to default (no padding).
• Advanced Settings
  • HTML Anchor – Create a unique web address to send users directly to the block using a unique jump link URL. To learn more about using HTML Anchors, see our tutorial on How To Use Blocks.
  • Additional CSS Class(es) – This field lets you add multiple CSS classes to your block separated with spaces. This allows you to write custom CSS and style the block as you see fit. Note: This requires having knowledge of CSS (Cascading Style Sheets).

Cover Block – Additional Info

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

• Columns block
• Group block
• Image block
• Video block
• Reusable block

You can also select a style for your Cover block from this menu.

Notes:

• If no image or video background is selected for the Cover block, you can transform the block into a Columns or Group block.
• If an image background is selected for the Cover block, you can transform the block into a Columns, Group, or Image block.
• If a video background is selected for the Cover block, you can transform the block into a Columns, Group, or Video block.

Additionally:

Installing plugins or themes on your site may also add new functionality, options, or settings to a 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

***

Stock video by Videezy

Updated: July 5th, 2024