Uncovering the Cover Block

The Cover block allows you to display text and other content on top of an image or video. It is a great block for headers, banner-style displays, call-to-actions, and more. Explore various ways you could utilise this container block.

Learning outcomes

1. Identify the key features and settings.
2. Create a call-to-action.
3. Blend images using the fixed background setting.
4. Create a video banner.
5. Apply the window effect to an image.
6. Build a header.

Comprehension questions

1. What are the three options when selecting a background for a Cover block?
2. How do you create a parallax scrolling effect?

Transcript

Welcome to Learn WordPress. Today we are exploring the Cover block. It is a great block to use for headers, banner-style displays, call-to-actions, and so much more. The Cover block allows you to display text and other content on top of an image or video. In this session, we will use the Cover block to create a call-to-action, parallax images, a video banner, a window effect and a header. But firstly, let’s take a quick look at some of the key features and settings that we need to know before continuing. The important thing to understand is that the Cover block is a container block that can contain other blocks within it.

When you add a Cover block to a page, you have the option to upload an image or video from your computer or Media Library. At the bottom, you can add a colour overlay, and in the block toolbar, you also have the option to use the featured image. But let’s go ahead and add an image from our Media Library. Once inserted, I will select my Cover block, and then use the block toolbar to change the alignment, in this case, to full width. And next to that, you also add the feature to change the content position to the top left, middle left or anywhere else. Then we can also toggle our Cover block to full height and add a duotone filter if you wish.

In our sidebar settings, we have an option to select Fixed background, which creates that parallax effect. The Repeat background is only something you should use when an image isn’t the size of the space it fills. And the focal point picker allows you to identify the most important visual point of an image, especially viewed on a mobile phone. Please also remember to add your alt text to describe the purpose of the image for screen readers and SEO. In the sidebar settings, you can also add a cover overlay, and then we can change the opacity to darker or lighter. Lastly, you can use padding to add extra space around your Cover block, and you also have the option to change the minimum height of your Cover block.

So let’s jump straight into our examples. And first up is a call-to-action. Let me show you how I created this call-to-action for a portfolio website. I will add my Cover block and select an image from my Media Library. Then I will select my Cover block and change the alignment to full width and the toggle to full height. Once I’ve done that, I will change the alignment of the text to left, and when I select the Cover block, I’ll change the opacity to zero. Thereafter I will add the text; I’m Roger Lister, Software Developer and then change the size of the text to 80 pixels. Then I’m going to select the text below and change the colour. When you open the text colour, you can use one of the default colours or add a custom colour. I will click on Show detailed inputs and add a hex code of a colour that blends in with Roger’s shirt and then change the text to bold. Once I’ve done that, I will select the text and group them and change the block spacing to zero.

Below the Paragraph block, I will add a Buttons block and type Learn more in capital letters. Next, I will change the background colour of the Buttons block by copying the hex code of the software developer text. And once I copy the hex code, I’ll return to the Buttons block, click on Background, open the custom option, click on Show detailed inputs and paste the hex code. After that, I will change the size of the Buttons block to large, change the text to bold and lastly, change the radius to 100 pixels to give it that rounded effect. Then I’m going to change the focal point picker and drag it to the left to ensure that the text displays correctly on mobile. And finally, you can also play around with the opacity. Now we can see what it will look like on the front end and mobile.

Next, I will show you how to create parallax images, such as this example. To create parallax images, I will add a Cover block and select an image from my Media Library. And once I’ve done that, I will select the Cover block and change the alignment to full width and select full height. Then I will use my sidebar settings and select Fixed background and change the opacity to zero. And in my block toolbar, I will click on the three vertical dots and then duplicate the image, and now merely replace the second image with a different picture. And there you have it, parallax images that flow into each other.

Now we move on to a video banner. Let me show you how I created a video banner such as this example.
When I add my Cover block, I will select a video from my Media Library and click on Select. Then I will select the Cover block and change the alignment to full width, and I’ll drag it slightly larger. Then I will open up my sidebar settings and change the opacity to 60, which is slightly darker and will help the text to stand out. Then I will add a Heading block and add the words Great food, even greater people and then align it to the centre. And then lastly, I will select the text and change the size to 80 pixels. And there you have your video banner.

Let’s move on to our next example, the window effect, which allows you to create a beautiful visual display like this. To create the window effect, we first need to add a Columns block and select two equal columns. Then I’ll open my List View, select the parent block and change the alignment to full width. Then in the left column, I’ll add a Cover block and select an image from my Media Library. Select the Cover block and change the opacity to zero. Now we are going to duplicate to make life easier for ourselves. So click on the three vertical dots and duplicate the Cover block and then duplicate it again. Now we’re going to open up our List View, select the left column and then duplicate the column as well. Now you can go ahead and delete the third column. The last step is to click on every Cover block and select the fixed background option. And there you have your window effect.

Finally, let’s talk about headers and see how we can create a header with a featured image such as this example. To create a new header, make your way to Appearance and click on the Editor. This will take you into your Site Editor. Click on the WordPress icon or site icon and make your way to template parts and then add a new template part. Select a header and then name it appropriately. In this case, I’m going to call it a Cover block. Now we’re going to go ahead and insert our Cover block and select an image from our Media Library. Then I will select full height and change the opacity to zero. Thereafter I’m going to add a Row block and then add my Site Logo and my Navigation block. Once inserted, I will open my List View, select the Row block and change the justification to Space between items. Then I will click on the three vertical dots next to the Row block and insert a Spacer block after. Once I’ve added the Spacer block, I will enlarge it to send the Row block to the top. Then I will enlarge the site logo, followed by editing the navigation menu. I’ll select the navigation menu and then deselect Allow to wrap to multiple lines to ensure that everything’s in one line. And then, I’ll change the Appearance of the navigation menu to extra light and the text size to 30 pixels. And there you have your header built with a Cover block. And this is what it will look like on mobile.

So as you can see, there are many things you can do with the Cover block. Visit Learn WordPress for more tutorials and training material.