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.

Important Note

Each pattern consists of several blocks. Only adjust the content and color block settings. The structural settings (padding and margins) are pre-configured for responsiveness. Modifying structural settings may break the pattern.

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