Wait! Are you leaving?

Try Gutenix subscription for Free !

  • +6 Free templates for Elementor and Brizy
  • Free Gutenix theme
  • Warm hugs from Gutenix team!

Cover block overview

ABOUT THE AUTHOR

I’m the SEO specialist at Webcodebuilder and ZEMEZ, companies that create templates powered by Gutenberg WordPress editor and Elementor page builder . We also have ZeGuten multipurpose plugin, which expands Gutenberg's possibilities.

List WordPress Block Experience-Based Overview
Prew post
  • Feb 14, 2020
  • 3 min read
  • 402

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.

In case, you are a fan of the Gutenberg editor and looking for the products for better work of this page builder, take a look at the Gutenix subscription with a whole set of products compatible with the Gutenberg.

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

How the Cover block works

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.

Cover image block

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 the whole section a slight parallax effect. You can also set a focal point and horizontal and vertical position.

Style up the WordPress Cover Image block

Cover image block

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.

Cover image block for Gutenberg

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, 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 with the image cover background is a block with the button element. You are able to style your button, you can use the whole construction as a perfect CTA block that is distinct due to its background.

WordPress cover image block

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

1
Appreciate
Image Block WordPress - an Experience Based Overview
Next post
List WordPress Block Experience-Based Overview
Prew post
Image Block WordPress - an Experience Based Overview
Next post

Get Gutenix Subscription

Create unlimited websites with dozens of templates, premium Gutenberg blocks and lightweight theme — all in one toolkit.

Meet Gutenix, the devoted team of developers that stands behind ZeGuten plugin and Gutenix free theme. We're inspired by WordPress, and are always looking for an opportunity to make WordPress easier for everyone.
Subscribe to get the news from Gutenix! Be the first to know of updates & discounts!
Enter a valid email!
Server error. Please, try again later!
Form was successfuly submited!
Follow Us:
Copyright © 2020 Gutenix. All Rights Reserved.