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 they please.
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:
Solid Color
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 impact accessibility.
If you’re unsure of a color combination’s contrast, use a tool such as the WebAIM Contrast Checker to test it out.
Gradient
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 of 1920x500.
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 a Quote.
Start Fresh
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 you wish.
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 for you.
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 fonts.
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)
No comments:
Post a Comment