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
ortext-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. alignwide
is 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.