ZeGuten — a collection of blocks for Gutenberg Get for $15.00

Cover block overview

ABOUT THE AUTHOR
Styles customization for Gutenberg blocks. WordPress customizer or CSS. Reusable blocks
Prew post
  • Feb 14, 2020
  • 3 min read
  • 36

Cover block overview

From this quick overview, you will find out more about the image cover background WordPress block. We will also learn how to customize this block in the Gutenberg editor.

Image cover background WordPress block gives you an opportunity to showcase various blocks, from a short text to buttons, with a colored background or with a background image under it.

To cut a long story short, let’s discover hoe the cover block works on our example. Firstly, click on the “+” icon and add a block. After that, you become able to upload a background image from the library or PC or set a background color.

Let’s download an image and take a look at the various features of the image cover background block. In the Media settings, you can make your background fixed, which gives you a parallax effect. You can also set a focal point and horizontal and vertical position.

Move on to the Dimensions settings, where you can set a minimum height in pixels. Overlay settings give you the opportunity to set the color or gradient for overlay and background opacity.

As for the second layer, let’s place a text block over the image cover background. Here you are completely free to set all the options, which are available when editing the paragraph block.

Choose the proper text size, set the color both for text elements and the background. Additionally, we forgot to mention, that as in all the other blocks, you are able to set a CSS class both for cover block and the block inside the cover background.

One more example of the block of the image cover background block is a button element. Not to mention the fact that you are able to style your button, you can use the whole construction as a perfect CTA block.

Congratulations! Now you know what is image background WordPress block and a few ways of how to style its interface.

We hope you liked our simple and quick image cover background WordPress block overview. Subscribe to our newsletter and stay in touch for more useful tutorials and instructions!

0
Appreciate
Building a Welcome hero section with Gutenberg
Next post
Styles customization for Gutenberg blocks. WordPress customizer or CSS. Reusable blocks
Prew post
Building a Welcome hero section with Gutenberg
Next post