Visual stories
Overview
The Visual Stories section combines two visual presentation styles in one layout: a video banner with caption content, and a before/after visual comparison. You can control the before/after starting position and orientation, adjust where the video caption appears, and customize alignment, container width, color scheme, and responsive spacing. The preset includes a video visual banner (caption + video) and a before/after visual area.
Section Configuration:
Before/After settings
| Setting | Description |
|---|---|
| Initial position | Sets the starting split position between the “before” and “after” visuals (percentage-based). |
| Orientation | Sets whether the comparison slider is horizontal or vertical. |
Video banner settings
| Setting | Description |
|---|---|
| Content position (Desktop) | Controls whether the caption content appears at the top or bottom of the video banner on desktop. |
| Text alignment (Desktop) | Controls text alignment on desktop (left, center, right). |
| Text alignment (Mobile) | Controls text alignment on mobile (left, center, right). |
Layout
| Setting | Description |
|---|---|
| Desktop height | Sets the overall visual banner height on desktop (Small: 471px, Medium: 571px, Large: 671px). |
| Mobile height | Sets the overall visual banner height on mobile (Small: 220px, Medium: 260px, Large: 290px). |
| Container layout | Controls how the section is sized on the page: page-width (boxed), contained-content, or container-fluid (full width). |
| Container size (Desktop) | Sets the maximum section width on desktop as a percentage (50%–100%). |
| Color scheme | Applies a theme color scheme to the section styling. |
Inner padding
| Setting | Description |
|---|---|
| Top (Desktop) | Adds space above the section’s inner content on desktop. |
| Bottom (Desktop) | Adds space below the section’s inner content on desktop. |
| Left (Desktop) | Adds space to the left of the section’s inner content on desktop. |
| Right (Desktop) | Adds space to the right of the section’s inner content on desktop. |
| Top (Mobile) | Adds space above the section’s inner content on mobile. |
| Bottom (Mobile) | Adds space below the section’s inner content on mobile. |
| Left (Mobile) | Adds space to the left of the section’s inner content on mobile. |
| Right (Mobile) | Adds space to the right of the section’s inner content on mobile. |
Outer padding
| Setting | Description |
|---|---|
| Top (Desktop) | Adds space above the section (outside the section content) on desktop. |
| Bottom (Desktop) | Adds space below the section (outside the section content) on desktop. |
| Left (Desktop) | Adds space on the left side of the section (outside) on desktop. |
| Right (Desktop) | Adds space on the right side of the section (outside) on desktop. |
| Top (Mobile) | Adds space above the section (outside) on mobile. |
| Bottom (Mobile) | Adds space below the section (outside) on mobile. |
| Left (Mobile) | Adds space on the left side of the section (outside) on mobile. |
| Right (Mobile) | Adds space on the right side of the section (outside) on mobile. |
Blocks Configuration:
Video Visual Banner
A banner area that combines caption text with a featured video.
| Block | Description |
|---|---|
| Caption | Displays the banner’s text content (tagline, heading, description). |
| Video card | Displays the video media within the banner layout. |
Caption: blocks
| Block | Description |
|---|---|
| Tagline | Displays a short line of text above the heading. |
| Heading | Displays the main banner heading/title. |
| Description | Displays supporting text beneath the heading. |
Before/After Visual
A before/after comparison area.
| Block | Description |
|---|---|
| Before | Displays the “before” media layer in the comparison. |
| After | Displays the “after” media layer in the comparison. |