The Cover Block is a powerful, versatile tool that enables you to overlay content on top of an image or a solid color. There are many uses for this core WordPress block. In this tutorial we’ll explore how to use it for a website’s Hero image that includes a CTA (Call To Action).
The Hero image is a large photo, artwork, or video placed prominently at the top of a website page. Its intention is to grab the attention of visitors and provide a glimpse into what the website is all about. To increase its impact, Hero images are often accompanied by text and Call(s) to Action.
Default Settings
Let’s get started by inserting a Cover block. Choose one the following options for “Add block“:
- Type a forward slash “/” at the start of a new paragraph. Type the word “cover” after the forward slash and select “Cover“.
- Click on the Block Inserter “+” symbol in the content area to open a pop-up window that displays an abbreviated list of common blocks. Type “cover” in the search field OR click on “Browse all” to display the full list.
- Click on the Block Inserter “+” symbol above the left sidebar listview to display the full list. Scroll the list or type “cover” in the Search field.
Next, select your image from the options presented: Upload, Media Library, or Featured image. I usually upload my image before inserting the Cover block; I then select it from my Media Library. But, use whatever process you like the best. Instead of an image, you could select a background color by clicking on one of the large dots below the image options. You can always change the image and/or background color later.
Default layout – image
Write title…
Cover block Settings
- Align (toolbar) = None
(defaults to content width) - Layout = Inner blocks use content width
- Image Focal Point = centered (50% left and top)
Cover block Styles
- Overlay Color = varies by theme
- Overlay Opacity = 50%
Paragraph block Styles
- Font Size = Large
Default layout – background color
Write title…
Cover block Settings
- Align (toolbar) = None
(defaults to content width) - Layout = Inner blocks use content width
Cover block Styles
- Overlay Color = #169ac2 (default is black)
- Overlay Opacity = 100%
NOTE: WordPress automatically changes the text color to achieve the best contrast against the background color. These colors vary with each theme.
Paragraph block Styles
- Font Size = Large
Style Changes
Next, we’ll write a title. Then, we’ll make a few style changes.
Custom website design
for small businesses, nonprofits, and artists.
Wide Width
Cover block Settings
- Align (toolbar) = Wide width
Cover block Styles
- Overlay Color = #169ac2
- Overlay Opacity = 20%
- Minimum Height = 800px
(resize by moving the handle up or down)
Text Styles – H4 and Paragraph blocks
- H4 Color = White (#ffffff); Size = XL
- Paragraph Color = White (#ffffff); Size = L
- Paragraph Line Height = 1.2
Full Width
Cover block Settings
- Align (toolbar) = Full width
- Content Position (toolbar) = Top Center
- Layout = Inner blocks use content width
- 1020px
- changed in next example to 1280px
- Image Focal Point = 53% left and 72% top
Cover block Styles
- Minimum Height = 400px
(resize by moving the handle up or down) - Dimensions > Top/Bottom Padding = preset 3
Text Styles – H4 and Paragraph blocks
- Align text = Left
Full Width
Cover block Settings
- Layout = Inner blocks use content width
- Content and Wide widths = 1280px
Text Styles – H4 and Paragraph blocks
- H4 and Paragraph placed inside a Group
- Justification = Left
Button block Styles – all defaults, except:
- Align Text = Center
- Fill Style
- Text = White; Background = Purple (#ba3db1)
Video Tutorial
Learning by watching is fun! Check out my video tutorial that shows how to use the Cover block for Hero images and Calls to Action.
Leave a Reply