Uncovering the Cover block

Transcript

Introduction

Today, we are exploring the Cover block. It is an excellent tool for creating headers, banner-style displays, call-to-actions, and more. The Cover block allows you to display text and other content on top of an image or video. In this session, we will create two different designs. But first, let’s take a quick look at some key features and settings we need to know before continuing.

Key features and settings

The important thing to understand is that the Cover block is a container block that can hold other blocks within it. When you add a Cover block to your page, you can upload an image or video from your computer or Media Library. You can also select the ‘Use Featured Image’ option to set the cover as the featured image of your page or post. Then, you can click on the colored circles to add an overlay color to your Cover block, which you can update later in the sidebar settings.

Let’s add an image from our Media Library. It is also worth noting that WordPress automatically adds an overlay color that complements the image. Once inserted, select your Cover block in your List View and then use the block toolbar to change the alignment to full width. You can also change the content position to the top left, middle left, or elsewhere. Additionally, you can toggle your Cover block to full height and add a duotone filter if desired. In the sidebar settings, we can select ‘Fixed Background’, creating a parallax effect. The Repeat Background option is useful when an image isn’t the size of the space it fills. The focal point picker allows you to identify an image’s most important visual point, especially for mobile viewing. Also, remember to add alt text to describe the purpose of the image for screen readers and SEO. Below Styles, you can edit the color overlay and change its opacity to make it darker or lighter. Next, you can add padding to create more space around the content in your Cover block.

Banner example

Now, we can move on to some examples. I wanted to show you how I created the following banner in the first example. We can go ahead and add the Cover block and then select an image from our Media Library. Next, I will ensure that I select the Cover block and then change the alignment to full width. And then, I will change the content position to the top middle. Then, we can go ahead and add some text. In this case, I will write ‘Explore the mountains’ and then change the size of the text to a custom size. And for this example, we’ll change it to ‘4 rem.’ I will also change the text’s appearance to ‘medium.’

To change the alignment of the text, I’m going to wrap the Paragraph block or the text in a Group block. And then, deselect ‘Inner blocks use content width.’ Once I’ve done that, I can change the alignment of the Group block to full width. Then I will select the Cover block, open Styles. Then, I will leave my overlay opacity at 50%, and we can add some padding or space around our block’s content. Now we can close the List View in the sidebar settings, and now that the design is finished, we can also check to see what it will look like on a mobile device.

If you do not want your image cropped, as we see here, you can change the aspect ratio. To do that, we can return to the page, open Styles, and then scroll down to Aspect Ratio. I will go ahead and select a Classic 3×2 aspect ratio. When we view it on mobile, the image is not cropped. The image scales appropriately and maintains its proportions.

Parallax example

In the next example, I want to show you how I created this cool parallax effect, blending the two images together. I added a Cover block to create this design and selected an image from my Media Library. Once inserted, I selected the Cover block, changed the alignment to full width, and toggled the block to full height. Then I open the sidebar settings and selected Fixed Background to create the parallax effect. Then I will click on the three vertical dots of my block tool bar and duplicate.

Once the block is duplicated, I will add a new image. Next, I will open my List View, select both Cover blocks, and add them to a Group block. As I want to remove the space between the two images, I will open up the Styles of the Group block, make my way to block spacing, and change it to zero. Please note that if you don’t see the block spacing setting, it might be because of the theme you are using. And then our design is done. We can also view it on a smaller screen.

More options

Finally, I want to show you some other designs I created using the Cover block. In this case, I used the Cover block to create this call-to-action for a portfolio website. Also, don’t forget to go to the Patterns Directory to find awesome patterns built with the Cover block. In the last example, I used one of those header patterns to create a header for my Owl Sanctuary website with the logo and site title on the top left and my navigation menu on the top right. And here we can also view it on mobile.

Conclusion

Enjoy using the Cover block, and always double-check that your designs appear correctly on smaller screens.

Practical

Use WordPress Playground to test your knowledge:

1. Add a Cover Block:
   • Insert a Cover block in your post or page.
2. Insert Image:
   • Upload and add the provided mountain image to the Cover block: https://unsplash.com/photos/snowy-mountain-g30P1zcOzXo
3. Add Text:
   • Enter the text: “Exploring the Mountains” over the image.
4. Create a Banner:
   • Design the banner to resemble the example shown in the video.
5. Test on Mobile:
   • Preview and on mobile to ensure it looks good and functions properly.
     • Optionally, adjust the aspect ratio of the image as needed.