 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 are going to 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 and that means it 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 color 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 have the feature to change the content position to top left, middle left or anywhere else. Then we can also toggle our cover block to full height and add a deotone 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 for 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 portfolio website. I will add my cover block and then 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 color. When you open the text color, you can use one of the default colors or add a custom color. I will click on show detailed inputs and add a hex code of a color 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 together 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'm going to change the background color 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 opacity. And now we can see what it will look like on the front end and on 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 fix 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 a liner to center. 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, which is the window effect, which allows you to create a beautiful visual display, such as this example. 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 will 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 my 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. Then I'll change the appearance of the navigation menu to extra light and the size of the text to 30 pixels. There you have your header built with a cover block. 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 materials.