Skip to content

DSWP Image & Text ​

Overview ​

This pattern creates an asymmetrical layout with an image on the left and text on the right. It's designed for content sections that need visual balance while maintaining 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 ​

Pattern Components

  1. Featured Image
    • Square image container (1:1 aspect ratio)
  2. Heading
    • Card title (H5)
  3. Description
    • Body text

Layout Considerations ​

  • Image column maintains fixed width
  • Text column is vertically centered
  • Spacing columns ensure consistent margins
  • Pattern adapts to mobile with stacked layout Responsive behavior

Common Tasks ​

Image Modification ​

  1. Select the image block
  2. Click "Replace"
  3. Upload or choose new image
  4. Image width maintains 198px Image replacement

Modifying the Heading ​

  1. Click on the heading text
  2. Type your new heading

Modifying the Heading

Modifying the Paragraph ​

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

Modifying the Paragraph

Block Documentation ​

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