Do you know how to use WordPress Gutenberg Cover Block? If you are looking for a detailed guide regarding the way to use this block, then you don’t miss our blog. We will give you the best practices of how to utilize it. Now, let’s check it out.
How is Cover Block useful in Gutenberg editor?
As you know, the release of the Gutenberg Block editor in WordPress 5.0 has brought you many advantages for enhancing the design of your website. This new editor allows you to create eye-catching content and build a professional website via a wide range of useful blocks instead of using code as before. And the cover block is one of the most helpful blocks that is built in the Gutenberg editor. This effective block allows you to add a title over a background image. If you would like to add a hero header such as a section on a post/ page or feature a selected quote, then using this block is a perfect solution.
However, if you haven’t ever used this block, in today’s blog, we will show you a detailed guide to help you easily use WordPress Gutenberg Cover Block. Now, let’s get started!
How to add a cover block to your post/page
In order to add a WordPress Gutenberg Cover block to your post/page. First of all, you click on the Add block button(+) displayed in the top left corner of the block editor and use the search bar to look for the cover block.
Then, simply click on the Cover block to add it to your content. Alternatively, you can use the Add block button within your content to add a cover block.
How to use a cover block in Gutenberg editor
Choose a cover block background
There are various options that allow you to choose a background. You can use create a background with an image, video, solid color, or gradient. Below, we will cover all options.
Solid color and gradient color
The cover block comes with some solid colors, you can choose one of them and use it as a background color.
However, if these solid colors are not suitable for your designs, you can use gradient colors. To do that, first of all, you need to choose a solid color and then click on the Cover block.
Next, have a look at the color options on the right sidebar and click on the Color option. Then, it will open a popup window with two tabs, you simply move to the Gradient tab and customize the background color as you want.
Image or video
Once the cover block has been added to your content, you will see a placeholder with two buttons that allows you to add a background image or video. You can click upload from your computer or select an available image from your media library.
After adding an image, you can add a caption over the image. By default, the caption is a paragraph block. However, you still change it to other types of blocks like a video block.
Use cover block toolbar controls
In order to see the toolbar of the cover block, you simply click on any position to open its toolbar.
Change block type or style
The first setting allows you to change the number of columns, group it or even change it into an image. It also provides you with a preview on the right side.
Change alignment
When you click on the second setting option, this will display a list of options in the drop-down menu. These options allow you to simply align your cover block to the left, center, or right. In addition, you can also set wide-width or full-width.
Change content position
This option enables you to move the content within the image by selecting the location of a dot. You can see this in the screenshot below.
Toggle full height
If you want to set the image to display the full height instead of resizing it, you can click on the Toggle Full Height option in the block’s toolbar.
Apply duotone filter
If you want to apply a duotone filter, first of all, you need to choose a duotone from your preselected options. Then, adjust one color for the shadows and another for the highlights.
In addition, you can also select a color on the slider by adjusting it.
Replace
In addition, you can change another image by uploading it from your computer or choosing another from your media library.
Additional options
Moreover, on the cover block toolbar, there are many additional options included in the WordPress Gutenberg Cover Block:
- Hide more settings: When clicking on this option, the right sidebar will be hidden
- Copy: This option allows you to copy the cover block and then you can paste it to any position on your post/page
- Duplicate: You can create a duplicated of the cover block and place it under the original by clicking on this option
- Insert after: This option allows you to add space below the Cover Block for another block
- Insert before: This option enables you to add space above the Cover block for another block
- Add to reusable blocks: You can add the block to your reusable blocks that help you quickly use it on any post/page
- Group: You can use this option to add the cover block to a group and adjust them as a single unit
- Lock: This option allows you to disable movement or prevent removal
- Remove cover: This option allows you to delete the cover block
Use cover block resize
If you want to resize the image, simply drag the circle at the bottom of the image.
Use cover block settings
The setting options of the WordPress Gutenberg cover block are displayed in the right sidebar. You simply click on the cover block or the gear at the top right color of the screen.
Media settings
The fixed background option allows you to let the image stay in place as the text scrolls, creating a parallax effect. In order to enable this option, you need to move a circle to the right.
The second setting option allows you to create impressive patterns with small images. In addition, from here, you can also clear the media and specify the focal point by moving a circle or specifying the left and top positions.
Overlay
When you click on the Color option displayed below the Overlay section, then it will show a popup window where you can select a solid color or a gradient. You will see the changes in real time.
If you choose the gradient option, you can select the two colors that will showcase. Simply select between linear and radial. Additionally, you are also able to set the opacity of the colors.
Dimensions
This option allows you to adjust the height pixels by entering it into the given space.
Advanced
This setting option comes with two fields. The first field is where you can add an HTML anchor. In the second field, you can add additional CSS classes. Moreover, this option also allows you to create custom CSS to customize your block.
The bottom line
To conclude, the WordPress Gutenberg cover block is one of the most useful WordPress Gutenberg Blocks. If you can take advantage of this block, it is a great chance to create dynamic and attractive content for your website. In addition, if you want to extend the functionality of the Gutenberg editor, you can refer to a list of top-notch WordPress Gutenberg Plugins.
Hopefully, via our blog, you can use this WordPress Gutenberg cover block effectively. If you have any queries, don’t hesitate to contact us by leaving a comment below. Besides that, are you looking for a beautiful design for your Gutenberg editor? Then, don’t miss a list of eye-catching WordPress Gutenberg Themes.
Last but not least, you can spend a little time visiting our website to discover a wide range of stunning free WordPress themes on our website that are totally compatible with the Gutenberg block editor.
- Taking Inspiration From One of the World’s Leading Eyewear Ecommerce Sites: Eyebuydirect - March 22, 2024
- Navigating Success: The Role of UX/UI Agencies in Business Growth - March 12, 2024
- 4+ Best Woocommerce Private Store Plugins - March 8, 2024
Recent Comments