Adding Hero Sections With Background Patterns

Your site ships with a library of background patterns. These can be used to place a pattern on a background color or image.

To add one of these, use the Pattern block in the editor.

The block acts like WordPress’ built-in Cover block but offers three new settings on the Style tab:

  • Pattern
  • Pattern Color
  • Pattern Size

When you first add the block, it comes nested in a Cover block. This allows you to add a background color or image to the pattern.

Example showing the Hierarchy of the Pattern block, where it is embedded within a Cover block.

Visual guide to adding a Pattern block:

Adding the block
The default look of the block, with a “placeholder” pattern.
Use the navigation bar in the bottom of the editor to select the Pattern block
Select a pattern
This shows the two size options “Cover” and “Contain, and the color settings
Example showing the “Cover” size option.
Example showing the “Contain” option.
Now select the Cover block
You can set the “Align” option on the toolbar to Full width to make it fill the screen edge-to-edge
Add a background image with the Open Media Library / “Add Media” option
Set the “position” of the pattern by clicking back into the Pattern block and dragging the white circle.
Example showing a finished pattern block – also showing the dropdown to set the “position” of the pattern content in the Cover block.