How do I use the cover block feature? How do I add text over a background image in Gutenberg?
You can find the cover block under the common blocks drop down menu. You can also find it by searching 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 title 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 moving the blue 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 after the Heading block, you can add a paragraph block and insert your desired text. It doesn’t always look as it does in the editor so to check to see if it’s how you want it, click on the white 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, something you can do instead is add a paragraph within a column rather than just a paragraph by 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 color overlay on the image to be one that contrasts with the text color (additionally, you could also change the text color). Gutenberg gives you the option of solid colors and premade gradients.
- You can change the opacity of this overlay to make the color more opaque, increasing contrast between the text and image.
You can find more information regarding adding cover blocks using Gutenberg at: https://wp-tutoring.com/adding-a-cover-block-in-gutenberg