You can add a cover block by going to Add Block > Media > Cover. You can also find it by searching for Cover:
Once you add a cover block, it will give you the option to upload an image, choose from your media library, or pick a color to use as the background image. Alternatively, you can drag an image from your desktop onto the block as another way to upload an image. If the image from the original website is not readily available for use, reach out to the website contact to obtain the image:
After you choose an image, video, or color to use as your background, you are presented with many options:
- By default, a paragraph block will be automatically placed within the cover block.
- You are able to add additional blocks as you would normally.
- By toggling “Fixed background,” the background image will stay in place when you scroll the page, only moving the text on top. By toggling “Repeated background,” the background image will get fixed onto it’s original dimensions and repeat the image when necessary to fill the cover.
- By moving the circle in the Focal point picker, you are able to choose where you want the image to be centered in the background.
If you have more text to add, you can add a paragraph block and insert your desired text. Note: the text doesn’t always look as it does in the editor. To check if the layout is how you want it, click on the preview button in the top right corner.
Optional: If you only have one row of text and it looks odd stretched out across the entire image or you just want to have larger margins on the sides for your text, you can add a paragraph block within a column rather than just a paragraph itself. To do so, add a column and pick one of the 3 column options (highlighted in yellow below) and add a paragraph block to the middle column. When you click on preview, your text should now appear with larger margins on the sides:
If you find that the text is hard to read, there are two things you can do to increase readability:
- You can change the opacity of this overlay to make the color more opaque, increasing contrast between the text and image. Find the options by clicking on your Cover Block > Settings > Block.
- You can change the text color. To do so, click on the paragraph block within your cover block > Block > Color.
- You can change the background color of the text as well. To do so, click on the paragraph block within your cover block > Block > Color.
You can find more information regarding adding cover blocks using Wordpress at: https://wordpress.org/support/article/cover-block/