Before-After with content
Overview:
The Before/After Content section is designed to visually showcase transformations using "before" and "after" images with descriptive headings and content. It allows customization of layout, text, image settings, and interactive display.
Section Configuration:
| Setting | Description |
|---|---|
| Section Heading | Add a heading to the section. |
| Heading Size | Choose the size of the section heading. Options: h1, h2, h3, h4. Default: h3. |
| Heading Weight | Select the font weight for the heading. Options: bold, semi-bold, medium, normal. Default: bold. |
| Caption | Add a caption to accompany the section heading. |
| Caption Size | Set the size of the caption text. Options: h3, h4, h5, h6. Default: h6. |
| Caption Weight | Choose the font weight for the caption text. Options: bold, semi-bold, medium, normal. Default: medium. |
| Description | Add a detailed description for the section. |
| Description Size | Set the size of the description text. Options: small, medium, large, xlarge. Default: medium. |
| Description Weight | Choose the font weight for the description text. Options: bold, semi-bold, medium, normal, light. Default: light. |
| Max Header Size | Specify the maximum width of the heading text as a percentage of the page width. Default: 100%. |
| View More Label | Add a label for the "View More" button. . |
| View More Button Type | Choose the button style. Options: primary, secondary. Default: primary. |
| View More Link | Specify a URL for the "View More" button. |
| Open Link in New Window | Open the "View More" link in a new tab. Default: false. |
Image and Layout Settings
| Setting | Description |
|---|---|
| Make Image Full Width | Stretch the image to the full width of its container. Default: false. |
| Before/After Image Height | Set the height for the before/after images. Options: small, medium, large. Default: small. |
| Section Media Order | Arrange the media column order. Options: row (default), row_reverse. |
| Content Alignment | Align the content vertically. Options: top, middle, bottom. Default: middle. |
Text Alignment and Color Scheme
| Setting | Description |
|---|---|
| Desktop Text Alignment | Align the text on desktop devices. Options: left, center, right. Default: left. |
| Mobile Text Alignment | Align the text on mobile devices. Options: left, center, right. Default: center. |
| Color Scheme | Select a predefined color scheme for the section. Default: scheme1. |
Spacing Settings
| Setting | Description |
|---|---|
| Top Padding | Add padding to the top of the section. Range: 0–100 px. Default: 50 px. |
| Bottom Padding | Add padding to the bottom of the section. Range: 0–100 px. Default: 50 px. |
Blocks Configuration:
Before Block
| Setting | Description |
|---|---|
| Image | Upload an image for the "Before" state. |
| Heading | Add a heading for the "Before" block. |
| Heading Size | Choose the size of the heading. Options: h5, h6. Default: h5. |
| Heading Weight | Set the font weight for the heading. Options: bold, semi-bold, medium, normal. Default: semi-bold. |
| Subheading | Add a subheading for additional context. Default: "Subheading". |
| Subheading Weight | Choose the font weight for the subheading. Options: bold, semi-bold, medium, normal. Default: medium. |
After Block
| Setting | Description |
|---|---|
| Image | Upload an image for the "After" state. |
| Heading | Add a heading for the "After" block. |
| Heading Size | Choose the size of the heading. Options: h5, h6. Default: h5. |
| Heading Weight | Set the font weight for the heading. Options: bold, semi-bold, medium, normal. Default: semi-bold. |
| Subheading | Add a subheading for additional context. Default: "Subheading". |
| Subheading Weight | Choose the font weight for the subheading. Options: bold, semi-bold, medium, normal. Default: medium. |