Block: Cover

This is a left aligned cover block with a background image.

The cover block lets you add text on top of images or videos.

This blocktype has several alignment options, and you can also align or center the text inside the block.

The background image can be fixed and you can change its opacity and add an overlay color.

Make sure that the text wraps correctly over the image, and that text markup and alignments are working.

The next image should have a pink overlay color, the text should be bold and aligned to the left:

A center aligned cover image block, with a left aligned text.

This is a full width cover block with a fixed background image with a 20% opacity.

Make sure that all the text is readable.

Our last cover image block has a wide width.

This is a wide cover block with a video background.

Compare the video and image blocks.
This block is centered.

The block below has no alignment, and the text is a link. Overlay colors must also work with video backgrounds.

Tags:

Leave A Comment

Fields (*) Mark are Required

Block Archives Dropdown

Block Calendar

November 2018
M T W T F S S
 1234
567891011
12131415161718
19202122232425
2627282930  

Block Categories Dropdown

Block Latest Comments W/ Avatar

  1. Hi, this is a comment. To get started with moderating, editing, and deleting comments, please visit the Comments screen in…

Block Latest Comments W/O Avatar

  1. Hi, this is a comment. To get started with moderating, editing, and deleting comments, please visit the Comments screen in…

Block Latest Posts W/ Image

  • Hello world!
    Welcome to WordPress. This is your first post. Edit or delete it, then start writing!
  • WP 6.1 Font size scale
    This test post was generated using the block theme Emptytheme in WordPress 6.1.1. Small H2 Heading Medium H2 Heading Large H2 Heading Extra Large H2 Heading Small paragraph Medium paragraph Large paragraph Extra Large paragraph
  • WP 6.1 spacing presets
    This test post was generated using the block theme Emptytheme in WordPress 6.1.1. On this page, some group blocks have border or background color set to increase visibility. This group has a no background color… Read more: WP 6.1 spacing presets

Block Latest Posts W/O Image

  • Hello world!
    Welcome to WordPress. This is your first post. Edit or delete it, then start writing!
  • WP 6.1 Font size scale
    This test post was generated using the block theme Emptytheme in WordPress 6.1.1. Small H2 Heading Medium H2 Heading Large H2 Heading Extra Large H2 Heading Small paragraph Medium paragraph Large paragraph Extra Large paragraph
  • WP 6.1 spacing presets
    This test post was generated using the block theme Emptytheme in WordPress 6.1.1. On this page, some group blocks have border or background color set to increase visibility. This group has a no background color… Read more: WP 6.1 spacing presets

Block Login Link

Block Login Form

Block RSS

  • by Matias
    The easy and compliant way that every theme developer should know.
  • by Ben Dwyer
    When building block themes there is often more than one way to achieve the same thing. It’s often not clear which of these options is preferable. Below I outline some tips and guidelines that I […]
  • by Ben Dwyer
    We have been working on a plugin to help you create a Blockbase child theme. The idea is that you can use the existing tools to make changes to a Blockbase theme, and then export […]

Block Search Text Button Outside

Block Search Text Button Inside

Block Search No Button

Block Search Icon Button Outside

Block Search Icon Button Inside

Legacy Archives Dropdown

Legacy Calendar

November 2018
M T W T F S S
 1234
567891011
12131415161718
19202122232425
2627282930  

Legacy Categories Dropdown

RSS Legacy RSS

  • How to add typographic fonts to WordPress block themes November 28, 2022
    The easy and compliant way that every theme developer should know.
    Matias
  • Block Theme Building Tips February 28, 2022
    When building block themes there is often more than one way to achieve the same thing. It’s often not clear which of these options is preferable. Below I outline some tips and guidelines that I find helpful. The guiding principle here is to remove as much complexity as possible from the theme; instead block themes […]
    Ben Dwyer
  • Create A Blockbase Child Theme November 17, 2021
    We have been working on a plugin to help you create a Blockbase child theme. The idea is that you can use the existing tools to make changes to a Blockbase theme, and then export a bundle of templates and theme.json as a new child theme. I tried to create a new theme called “Typewriter” […]
    Ben Dwyer

Legacy Text

Large image: Hand Coded

Large image: linked in a caption

This image is 960 by 720 pixels. :)

Meat!
Hamburger fatback andouille, ball tip bacon t-bone turkey tenderloin. Ball tip shank pig, t-bone turducken prosciutto ground round rump bacon pork chop short loin turkey. Pancetta ball tip salami, hamburger t-bone capicola turkey ham hock pork belly tri-tip. Biltong bresaola tail, shoulder sausage turkey cow pork chop fatback. Turkey pork pig bacon short loin meatloaf, chicken ham hock flank andouille tenderloin shank rump filet mignon. Shoulder frankfurter shankle pancetta. Jowl andouille short ribs swine venison, pork loin pork chop meatball jerky filet mignon shoulder tenderloin chicken pork.
Smile!
;) :) :-D
Select Element with long value