DSWP Hero Image With Title

Overview

This pattern creates a hero section with a background image and an overlaid content box. It's designed to create impactful page headers that combine visual imagery with text content while maintaining accessibility and readability.

Pattern Components

1. Heading

   • Callout-styled heading

2. Paragraph

   • Multiple paragraph blocks
   • 1.7 line height for readability

3. Background image

   • Full coverage background image

Common Tasks

Changing the Background Image:

1. Select the cover block
2. Click "Replace" in the block toolbar
3. Upload or select a new image
4. Adjust focal point if needed

Modifying the Heading:

1. Click on the heading text
2. Type your new heading
3. The styling will automatically apply

Modifying the Paragraph:

1. Click to edit paragraph text
2. Start Typing new content

Changing the border left color:

1. Click the group block (as seen in the gif below)
2. Click block styles
3. Scroll down to border-left
4. Select a new color

Layout Considerations

• The content box automatically aligns left
• Background image remains full-width
• Content maintains readability on any background
• White box provides consistent contrast

Block Documentation

For detailed instructions on modifying specific blocks, refer to WordPress's official documentation:

• Cover Block
• Heading Block
• Paragraph Block
• Border