The cover block is a great way to add some visual interest to your pages and posts. It allows you to use an image, video, or solid color as a background, and then add content blocks to the foreground.
To add a cover block, click the Block Insertor button, and then search for the cover block. Or type a forward slash on a new line, followed by the word “cover.” then press Enter to add the cover block.
Next, select one of the preset colors from your theme to use a solid color as the background. Or you can upload a background image or select an existing image from your media library, your Google Photos account, or the Pexels Free Photo Library.
Generally speaking, abstract or decorative images work best, since the full image may not always display, and you’ll likely add some text or other content over the image.
Once you’ve selected a cover image, you can add any text you like. You can use this, for example, to title a new section of a post, or create a header for a page. But you could also add other blocks, like a quote or a button block.
To select the parent cover block, click the button on the left side of the toolbar. Then, you can change the width and the alignment of the cover block.
And you can change the position of the content within the block by selecting one of the content position options.
If you want, you can toggle the full height option to show the entire cover image. Or you can change the height of the cover block by clicking the handle at the bottom and then dragging it up or down.
If you’d like to get a little more creative, you can apply a duotone filter to create a two-tone color effect. You can select one of the preset color combinations, or choose the colors you’d like to use for the shadows and the highlights. To remove the effect, click the Clear button.
And of course, you can always replace this image with another one any time you like.
From the Options menu, you can show a few additional settings for the cover block.
First, you can choose how the background image behaves when you scroll up and down the page. A fixed background means the cover image will stay in place while your content scrolls along with your page. If you use a smaller image, you can choose to repeat it like a pattern to cover the entire background of the block.
If the Fixed Background option is turned off, you can also set the main point of interest, or focal point, within the photo. Click on the picker to drag it to the spot you want, or use the horizontal and vertical position percentages below to set it manually.
It’s always a good idea to add an alternative text description, which not only gives search engines an idea of what this image is, but also helps your visually impaired visitors to know what the image represents.
To remove the cover image and use a solid background color instead, click the Clear Media button.
By default, the cover block adds a gray transparent overlay to darken the background image, but you can choose any color you like, or even a gradient if you prefer. You can also set the opacity of the overlay color. Move the slider to the left to make the overlay color more transparent, or to the right to make it darker and more opaque.
You can change the padding within the cover block by entering a value here.
And finally, you can set the minimum height of the cover image in pixels. So it will always be displayed at this height. no matter what size screen your visitors may be using.
With all these options, the cover block is a great way to add some visual interest to your pages and posts.
Previous Web Design posts
Pingback: How to create the Window Effect with WordPress - Alain Website Design and SEO
Pingback: How to create Parallax Images with WordPress - Alain Website Design and SEO