Image Gallery
The Image Gallery element displays a carousel of images with navigation arrows, dot indicators, thumbnails, captions, and configurable aspect ratios.
Overview
Add a scrollable image gallery to your page. Users navigate between images using arrows, dots, or thumbnail strips. Each image supports an optional caption.
Adding an Image Gallery
- Open the Website Builder
- Find Image Gallery in the Elements panel (under Media)
- Drag it onto your page
- Add images and configure the gallery in the General Tab
Properties
General Tab
| Property | Description | Default |
|---|---|---|
| Aspect Ratio | Image display ratio: 16:9, 4:3, 3:2, or 1:1 | 16:9 |
| Show Arrows | Display left/right navigation arrows | true |
| Show Dots | Display dot indicators below the image | true |
| Show Thumbnails | Display a thumbnail strip below the gallery | false |
| Show Captions | Display the caption text below the current image | true |
Image Entry Fields
Each image in the gallery has:
| Field | Description |
|---|---|
| Image URL | URL to the image file |
| Caption | Optional text displayed below the image |
Aspect Ratios
| Ratio | Description |
|---|---|
| 16:9 | Widescreen -- video and hero images |
| 4:3 | Standard -- traditional photo format |
| 3:2 | Photo -- common camera aspect ratio |
| 1:1 | Square -- social media style |
Data Source
| Property | Description | Default |
|---|---|---|
| Data Source | Where images come from: Static or From Element | static |
| Source Element ID | Element ID to pull images from (when From Element) | Empty |
| Content Field | Field name on the source element | images |
Managing Images
- Click + Add to add a new image
- Enter the image URL and optional caption
- Use the up/down arrows to reorder images
- Click x to remove an image
- A preview thumbnail appears when a valid URL is entered
Use Cases
- Product galleries -- showcase product photos from multiple angles
- Portfolio pages -- display work samples or project images
- Photo albums -- event or travel photography collections
- Property listings -- real estate or rental image slideshows
- Tutorials -- step-by-step visual instructions
Questions?
If you have any questions, please don't hesitate to contact us.