Step-by-Step Guide
If you have any further questions on proper setup, please fill out our Hive Service Request form and someone from the team will help you.
Page Examples:
For visuals of the component, please see the anchored page link below:
Section Image Dividers
What it does: A full-width image used as a visual break between page sections. Supports an optional heading, expandable description, a parallax expand mode, an image blur effect, and whitespace controls.
When to use it: Between major sections on long landing pages to create visual rhythm and pacing.
How to Add
- Edit the page node.
- Click Add Component → Section Image Dividers.
- Place the component between the two content sections it separates.
Fields to Fill In
| Field Label | What to Enter | Required? | Notes |
|---|---|---|---|
| Section Divider Image | Upload or select a wide, landscape image; alt text required | No | If purely decorative, leave alt text empty |
| Section Divider Heading | Optional heading displayed over the image | No | — |
| Section Divider Description | Additional text | No | Only displays when Expand Section Divider is toggled on |
| Expand Section Divider | Toggle for larger parallax effect | No | Also enables the Description field to show |
| Blur Image Divider | Adds a gradient blur at the bottom of the image into the next section | No | — |
| Enlarge Description? | Enlarges the description text | No | Use when there is no heading |
| Reduce Whitespace | Tightens vertical spacing | No | — |
How to Update
- Edit the page, open the Section Image Dividers component.
- Swap the image by clicking Replace Media.
- Update alt text if the new image differs meaningfully from the old one.
- Save.