BA2019 Cover Image Block and Variants

We have a few options on how to create this ‘padded block with background image’ using WP’s Cover Block. See below for variants and use this guide as a reference on options.

  • The background image should be 1440px wide at a minimum.
  • Using the editor options you can choose:
    • Screened overlay or none/dark or light text
    • Background position of the image
    • Normal (wide) or full width (for wide template pages, will go to edge of viewport)
    • left, center, or right aligned text

This first example has the default settings in place.

Default Centered Headline should be h2

Subhead should be h3

To adjust alignment or color of text, you’ll need to add certain classes to Additional CSS Class in the block settings. Options:

  • text-left or text-right – does what you think 😉
  • text-dark – changes text to dark (good for light images without screened background)

Right aligned

Dark Text, removed the screened bg

alignfull can’t go edge to edge unless you use the wide template. Note we are using WP’s sizing functionality here. alignwideis not currently in use

Align Full

Will have different effects on normal vs wide template

Home page has a special version ‘with-related-posts’. Currently that second block is hardcoded HTML. The parent cover block must include the with-related-posts class.

Was this article helpful?
YesNo