Overlap with images
Overview:
The Overlaps Images section creates a visually dynamic and interactive scrolling experience using a grid of overlapping images. This section supports two layers of imagery—featured and overlay—and includes animated heading text that scales as the user scrolls. Ideal for storytelling, showcasing product ranges, or enhancing landing pages with visual depth.
Section Configuration:
Content
| Setting | Description |
|---|---|
| Section Heading | Sets the main heading for the section. Each letter is animated individually to scale on scroll. |
| Heading Weight | Adjusts the font weight (thickness) of the heading, ranging from light (300) to black (900). |
| Section Description | Optional description displayed below the images. Supports rich text formatting. |
| Description Size | Controls the text size of the description—available in small and large. |
| Description Weight | Controls the font weight of the description text, ranging from light (300) to black (900). |
Columns – Images
Each of the three image columns (One, Two, Three) supports a pair of images:
| Setting | Description |
|---|---|
| Image (Column One / Two / Three) | Uploads the primary image for each column, displayed on the initial scroll layer. |
| Image Overlay (Column One / Two / Three) | Uploads the secondary image shown on scroll after the first image is clipped away. |
Layout
| Setting | Description |
|---|---|
| Container Layout | Determines the overall width behavior of the section: contained within page bounds or full width. |
| Container Padding | Toggles horizontal padding inside the container. Disabling this removes default side spacing. |
| Color Scheme | Applies a predefined color scheme to the initial image group and background. |
| Overlay Color Scheme | Applies a different color scheme to the overlay image group that appears during scroll. |