Creative section with a large title and decorative images scattered around it. Optional parallax effect for a premium editorial look.
Image Scatter
The Image Scatter section displays a large typographic title at the center with decorative images scattered creatively around it. Each image is individually positioned, sized and rotated. This is an editorial-type section, ideal for brand pages, lookbooks and creative announcements.
3 presets
| Preset | Description | Style |
|---|---|---|
| Editorial | Large bold title with dynamic images | Bold, uppercase, dark overlay |
| Lookbook | Elegant title with portrait images | Light, mixed case, portrait images |
| Minimal | Clean title with few images | 2 images only, no overlay |
Main settings
Title
| Setting | Description | Options | Default |
|---|---|---|---|
| Heading | Title text (rich text) | Free text, bold for emphasis | "Make a statement" |
| Title size | Title level | H1 / H2 / H3 | H1 |
| Title scale | Additional size factor | 100-300% | 150% |
| Text weight | Font weight | Light (300) / Regular (400) / Bold (700) / Black (900) | Bold (700) |
| Transform | Text case | None / Uppercase / Lowercase | Uppercase |
Bold text
Text in bold within the title can receive special visual treatment:
| Setting | Description | Options | Default |
|---|---|---|---|
| Bold style | Bold text treatment | Default / Color / Highlight | Color |
| Bold color | Bold text color (Color/Highlight mode) | Accent 1 / Accent 2 / Text | Accent 1 |
| Highlight background | Background color (Highlight mode) | Accent 1 / Accent 2 / Text | Accent 1 |
| Highlight text | Text color on background (Highlight mode) | Background / Text | Background |
💡Use the bold tag in your title to create a strong visual accent. For example, "Explore the Collection" will display "Collection" in the chosen accent color.
Container
| Setting | Description | Options | Default |
|---|---|---|---|
| Desktop height | Scatter area height | 400-1000px | 600px |
| Mobile height | Height on mobile | 300-800px | 500px |
Text overlay
| Setting | Description | Options | Default |
|---|---|---|---|
| Overlay opacity | Darkens images to make the title stand out | 0-80% | 0% |
Parallax
| Setting | Description | Options | Default |
|---|---|---|---|
| Enable parallax | Depth effect on scroll | On / Off | On |
| Intensity | Parallax effect strength | 0-50% | 10% |
Available blocks
Scatter Image block
Each image is an individually positioned block. Maximum 8 images.
| Field | Description | Range | Default |
|---|---|---|---|
| Image | Image to display | Image picker | - |
| Position X | Horizontal position | 0-100% | 50% |
| Position Y | Vertical position | 0-100% | 50% |
| Size | Image size (desktop) | 5-60% | 20% |
| Mobile size | Size on mobile | 10-80% | 30% |
| Rotation | Tilt angle | -30 to 30deg | 0deg |
| Z-index | Stacking order | 1-10 | 5 |
| Image ratio | Forced proportions | Adapt / Square / Landscape / Portrait | Adapt |
| Border radius | Corner rounding | 0-50% | 0% |
| Image overlay | Individual opacity | 0-80% | 0% |
| Visible on mobile | Show on mobile | On / Off | On |
| Parallax intensity | Parallax intensity override | 0-100% | 0 (auto) |
Use cases
Brand / About page
- Editorial preset with uppercase brand title
- 4-5 product or lifestyle images
- Parallax enabled at 15% for depth
- Text overlay at 30-40% for readability
Collection announcement
- Lookbook preset with collection name
- 3 images in Portrait ratio of hero pieces
- Slight rotation (-5 to 5deg) for a magazine effect
- No overlay for bright images
Minimalist hook section
- Minimal preset with a short message
- 2 images only, well positioned
- Weight Light (300) for an airy look
- No parallax, no overlay
Event landing page
- Large title: "BLACK FRIDAY"
- 5-6 images of products on sale
- Weight Black (900) + Uppercase
- Bold style Highlight with Accent 1
⚠️The Scatter section uses absolute positioning: images may intentionally overlap. Test the result on mobile as relative positions change. Use the Visible on mobile setting to hide images that hinder readability on small screens.
ℹ️The parallax effect is calculated based on each image's Z-index: the higher the z-index, the faster the image moves on scroll, creating a natural depth effect. You can also override the intensity per image.