It’s been a few years since the Gutenberg block editor replaced the classic WordPress editor. Many users still don’t want to use Gutenberg due to the Kuwait WhatsApp Number List change in workflow for publishing content. However, Gutenberg has many blocks that you can use to create beautiful layouts without relying on page builder plugins. Cover is one of those blocks that is least used and understood by users. In this article, we will explain how to create a header with cover block in WordPress site. After reading this article, we hope you will start using the cover block in the Gutenberg editor. Contents What is the cover block? How to use the cover block? Cover block with image Cover the block with color Cover Block Customization Media Settings Dimensions Cover Advanced settings
What Is the Cover Block?
Cover is one of the main Gutenberg blocks that you can use to create sections in your pages. The main purpose of the cover block is to create hero header Kuwait WhatsApp Number List sections for pages. However, you can use it to create full-width or wide-width sections anywhere on your side. For example, you can insert a call-to-action section into the post content using a cover block. How to use the cover block? There are two ways to use cover blocks to create sections: Cover block with background image – this is suitable for hero headers Cover block with background color – suitable for insertion as a call to action between post content. Let’s explain both options in detail. with image First, click the + icon in the content area and add a “Cover” block. Cover Block in WordPress Cover Block in WordPress It will look simple with an option to upload or select an image with a list of colored buttons.
Cover the Block With Color
Cover block inserted Cover block inserted Make sure you have a full-width image with a limited height so it can fit well on a header. Click the “Upload” button and upload your header image to the media library. Add title, paragraph and button block and edit your content. Below is the real cover block and as you can see all of these blocks will be floating on top of the base image background. Title of your header Brief description of the cover block to explain some details… It’s my button Select the block to display the context toolbar. Cover block with other elements Cover block with other elements You can click the “Change content position” icon to adjust the content alignment in horizontal and vertical directions. Change content position Change content position Similarly, you can click on the “Change Alignment” icon to choose full width or width for your header.