The WordPress Gutenberg block editor has empowered content creators
like never before. It has brought the ability to craft page layouts
that can feature multiple content types, all without the need for a
page builder plugin. WordPress Gutenberg blocks provide you with the
basics and more.
Gutenberg comes with a variety of default block types to get you
started. Some are aimed at utility, while others are more
design-oriented. But none allow your content to stand out quite like
the Cover block.
The Cover block is a fully-customizable element that can serve a
number of purposes. It could be used as a classic hero banner, with a
full-width photo background and text overlay. Or it might be the perfect
way to feature a selected quote or call-to-action. The look and
content are yours to decide.
Today, we’ll introduce you to the Cover block and show you how to
get the most out of it. Along the way, we’ll provide some examples that
demonstrate what is possible with this versatile feature. Here we go!
Download Design Assets for Your Cover Block at Envato Elements
Of all Gutenberg blocks, the Cover block is a high-impact design
element. Take advantage by adding an amazing photo, graphic or video
background from Envato Elements.
A subscription provides you with access to hundreds of thousands of top-quality stock videos, photos and graphics. You’re sure to find the design assets that will make your Cover block a masterpiece.
Why the Cover Block Rocks
First, let’s take a look at what makes the Cover block is so
appealing. It combines a number of Gutenberg’s best features, including:
Plenty of Custom Background Possibilities
You can choose between a number of background types, including
image, video, solid color and gradient. Backgrounds can optionally be
set to a fixed position, providing a parallax-like effect upon scroll.
In addition, a color or gradient overlay can be added to image
backgrounds for both a unique visual effect and to make text more
legible. The overlay’s opacity can also be adjusted to your liking.
Multiple Typography Options
While you could utilize the Cover block for its background alone,
adding text is a great way to attract attention to important content.
Thankfully, there are several options that can serve different needs.
By default, a Paragraph block is inserted within the Cover. With it,
you can tweak font size and color, or add a drop cap. But by no means
is that the limit. Other text-based WordPress Gutenberg blocks such as
List, Quote and Heading are also available.
Add More Gutenberg Blocks for Various Content Types
Cover block content doesn’t have to be text-only. Virtually all
other WordPress Gutenberg blocks can be utilized as well. Layout
elements such as columns or buttons can be added in, along with
multimedia embeds or even custom HTML.
This opens the door to all sorts of creative use cases. Your Cover block can be a fully-custom element.
Create and Customize a Cover Block
Now that we’ve looked at what the Cover block can do, let’s put it
to good use. Here’s how you can add one to your own WordPress website.
1. Ensure That the Gutenberg Block Editor Is Active
Before you can use the Cover block, you’ll want to make sure that
your website is set to use the block editor. The Gutenberg block editor
has been a part of WordPress core since version 5.0. However, many
users chose to stick with the “Classic” editor via a plugin.
If you have the Classic Editor plugin installed, navigate over to Settings > Writing within
WordPress. From there, select whether you want to the Block editor to
be the default choice or allow your site’s users to switch editors as
Configure the plugin in any way that suits you. The key is in ensuring that the block editor is available to use.
2. Add a Cover Block to Your Content
Next, it’s time to add a Cover block to your content. This can be
any new or existing page or post within your website.
Within the block editor, click on the Add block button (consisting of a white “+” symbol on a black or blue background), located on the upper left of the screen.
You’ll see a comprehensive list of available Gutenberg blocks. The
Cover block is listed within the Media category. Alternatively, you may
use the search box to more easily find the Cover block.
Click on the block to add it your page.
3. Set the Block Alignment
The Gutenberg block editor is in many ways theme agnostic – meaning
it works with just about any WordPress theme. But there are a couple of
exceptions. Block alignment is one of them.
Aligning a Cover block to the left, center or right should be
supported by most any theme. However, wide or full-width alignments need
to be specifically supported in order to work on your website.
So, if you don’t see options for Wide width or Full width alignments in your Cover block, it’s likely because your theme doesn’t yet support it.
Since our theme supports these additional alignments, we will choose a Wide width.
4. Choose a Cover Block Background
Here’s where the fun starts! Once the Cover block has been added to
your page, you’ll have the option to choose a background. This could be
an image, video, solid color or gradient.
There are a few items to keep in mind, depending on which option you choose:
A solid color offers a simple way to make a bold statement. However,
it’s important to keep color contrast ratios in mind, as they can
If you’re unsure of a color combination’s contrast, use a tool such as the WebAIM Contrast Checker to test it out.
If you’d like to use a gradient background, you must first select a
solid color. From there, click on your Cover block and edit the color
options on the right side of the editor screen.
Image or Video
When it comes to images and videos, size matters. Ideally, the
resolution of your Cover block’s image or video background will match
the maximum width and height of the block.
If you’re using a full-width block alignment, that means the
background should be cropped to look good at that size. Otherwise, the
background may become pixelated on larger screens.
At the same time, file size should also be a concern. Videos that
are several megabytes in size could slow down load times and frustrate
users on slower connections. Look to optimize files when possible.
For this example, we’ve found the perfect nature photo from Envato
Elements to use in our Cover block. It has been cropped to a resolution
5. Add Text and More
As previously mentioned, a Cover block could contain just about any type of content. But paragraph text is the default option.
Want to use something else? There are a couple of ways to switch out your content type:
Change the Block Type or Style
Clicking on the Change block type or style button
provides the ability to switch the type of block used. By default, only a
small selection of related Gutenberg blocks is offered.
In this case, we could switch to a Heading, List, Quote, Group,
Preformatted, Pullquote or Verse block. For our purposes, we’ll go with
If text-based Gutenberg blocks don’t meet your needs, don’t worry.
By removing the included Paragraph block (you can do so by clicking the More options button and choosing Remove Block), you’ll open up a whole world of new choices.
Once the Paragraph block is removed, click into an empty area of
your Cover block. Gutenberg will now allow you to add any type of block
Tips for Creating a Compelling Cover Block
1. Use Relevant Visuals
Cover blocks offer a lot of creative freedom. However, it’s still
important to ensure that colors, graphics, photos and videos fit in with
both your website’s design and the subject matter of your content.
Doing so will help to get your message across more effectively.
2. Consider Small Screens
A full-width Cover block can be used to stunning effect on a large
screen. But what about mobile devices? Take some time to test your Cover
block’s design and content on phones and tablets to see how they hold
up. A few adjustments to your WordPress theme’s CSS may be in order.
3. Feel Free to Experiment With Block Placement
If you’re looking to make an immediate impact, placing a Cover block
at the top of a page or blog post makes a lot of sense. But the nature
of WordPress Gutenberg blocks is that they can be placed anywhere. For
example, you might use a Cover block to separate sections within longer
passages of content. Feel free to experiment and find what works best
4. Wider Isn’t Always Better
The ability to create wide and full-width Cover blocks is truly
awesome. Still, there’s something to be said for blocks that span the
same width as the rest of your content. It offers a more subtle effect
that may be a better fit for some websites.
5. Keep It Simple (and Accessible)
With visual features such as the Cover block, simpler is often
better. Whether it’s a section title, call-to-action or a quote, the
block should be easy to read. In practice, that means limiting the
amount of text, maintaining good color contrast and using legible
An Easy Way to Make Your Content Stand Out
Gutenberg blocks allow for a more detail-oriented approach to
content creation. Now, there’s an easy way to craft pages and posts that
match your site’s personality. And the Cover block may just be the
most exciting item in Gutenberg’s toolbox.
The Cover block empowers you to break out of the traditional
constraints of design and help you create attention-grabbing visuals.
Combine it with your imagination to build something beautiful.
Learn More About the Gutenberg Editor with Tuts+
Get started with Gutenberg by watching our quick beginner’s guide, learn tips and tricks with our tutorials, or dive into Gutenberg themes and assets with one of our roundups!
WordPressWhat Is WordPress Gutenberg?
WordPress GutenbergHow to Create Custom Blocks for Gutenberg
WordPress GutenbergThe Best WordPress Gutenberg Themes for 2020, Available Now (Free & Premium)
Go to Source
Author: Eric Karkovack