Design System WordPress Theme
Home
Github
Home
Github
  • Site Editor

    • Patterns

      • How to use patterns
        • DSWP Card With Hyper Link List
        • DSWP Vertical Cards
        • DSWP Default Heading
        • DSWP Footer With Territorial Acknowledgement
        • DSWP Heading with Paragraph(s)
        • DSWP Horizontal Card No Shadow
        • DSWP Icon with Excerpt
        • DSWP Hero Image with Title
        • DSWP Horizontal Card
        • DSWP Horizontal Card Large Image Left
        • DSWP Horizontal Card Large Image Right
        • DSWP Image And Text
        • DSWP Image And Text Flipped
        • DSWP Information Contact Socials
        • DSWP Link With Arrow
        • DSWP Secondary Hero Image With Title
        • DSWP Team Pattern
        • DSWP Vertical Cards With Icon
      • Patterns Overview
  • Developers

    • Patterns Troubleshooting
    • Template Parts

DSWP Horizontal Card Large Image - Right

Overview

This pattern creates a full-width horizontal layout with content on the left and a large image on the right. It features a reverse layout from the left-image variant, making it ideal for alternating content sections on a page.

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

Each section consists of the following blocks:

  1. Content

    • H3 heading
    • Multiple paragraphs (1.7 line height)
    • Outline-style button
  2. Image

    • Full-size image

Layout Options

The pattern supports both desktop and mobile layouts: Layout Options

Common Tasks

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

Button:

  1. Click to edit button text
  2. Start Typing new content
  3. Select the button again
  4. Selet "Link" icon
  5. Edit the link for the button

Modifying the Button

Image Replacement:

  1. Select the image block
  2. Click "Replace"
  3. Upload or choose a new image

Image Replacement

Block Documentation

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

  • Heading Block
  • Paragraph Block
  • Button Block
  • Image Block
Contributors: ASpiteri-BCGov
Prev
DSWP Horizontal Card Large Image Left
Next
DSWP Image And Text