Today we are exploring the Cover block.
An excellent tool for creating headers, banner-style displays, call-to-actions and 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 create two different designs.
But first, let's take a quick look at some of the key features and settings we need to
know before continuing.
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 have the option to 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.
And then you can click on the coloured circles to add an overlay colour 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 colour 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 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 have an option to select 'Fixed Background' which creates
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 the most important visual point of an image,
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 colour overlay and change its opacity to make a darker or
lighter.
Next, you can also add padding to create more space around the content in your Cover block.
Now we can move on to some examples.
In the first example, I wanted to show you how I created the following banner.
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 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'm also going to change the appearance of the text 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.'
And once I've done that, I can go ahead and 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 then we can add some padding or some
space around the content of our block.
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 did not want your image to be cropped as we see here, you can change the aspect
ratio.
To do that, we can return to the page and open up Styles and then scroll down to aspect
ratio.
I will go ahead and select a Classic 3x2 aspect ratio.
And now, if we view it on mobile, we will see the image is not cropped.
The image scales appropriately and maintains its proportions.
In the next example, I want to show you how I created this cool parallax effect, blending
the two images together.
To create this design, I added a Cover block and then selected an image from my Media Library.
Once inserted, I selected the Cover block and changed the alignment to full width and
I 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 up 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, then I will open up the Styles
of the Group block, make my way to block spacing and change it to zero.
Please note, 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.
And then we can also view it on a smaller screen.
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 that have
been 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 top left and my navigation menu top right.
And here we can also view it on mobile.
Enjoy using the Cover block and always double check that your designs appear correctly
on smaller screens.