Lightbox
The lightbox is a full-screen viewer that opens when a visitor clicks an image. It shows the image large, with optional captions, navigation controls, and styling that matches your section.
Opening the Lightbox Settings panel
The lightbox is configured per section. Open a section's images in the lightbox while editing to bring up the Lightbox Settings panel on the right.
The panel opens on the image that was clicked, with a live preview at the top — use the on-image arrows to step through the images and see your changes applied instantly.
Background
By default the lightbox reuses your section background (color, gradient, or image, including any overlay) so it feels like an extension of the page.
- Use Section Background — on by default. Turn it off to set a lightbox-only background.
- When off, a BG swatch appears so you can pick a solid color or gradient, with opacity control.
If the section has no background of any kind, the toggle is disabled and the lightbox falls back to a dark backdrop.
Visual controls
Visual Controls sets how visitors move between images:
| Option | What visitors see |
|---|---|
| None | No on-screen controls (keyboard, mousewheel, and swipe still work) |
| Arrows | Left/right navigation arrows |
| Dots | A row of pagination dots |
| Thumbs | A thumbnail strip |
When Arrows is selected, two extra controls appear:
- Arrow Size — S, M, L, or XL.
- Arrow Behavior — Static (fixed arrows on both sides), Subtle (one arrow on the side your cursor is on), or Animated (one arrow that follows your cursor and navigates on click).
Keyboard shortcuts
Keyboard Shortcuts is on by default. When on, visitors can use:
| Key | Action |
|---|---|
| ← / → | Previous / Next |
| Space | Next image |
| Esc | Close |
| + / − | Zoom in / out |
| 0 | Reset view |
| R | Rotate 90° |
Turning this off suppresses everything except Esc, which always closes the lightbox.
Mousewheel
Set what the scroll wheel does: Cycle (move between images, the default), Zoom, or Off.
Colors
A paginated color-preset card at the top of the Colors group lets you set the background, caption, and link colors together in one pick. Below it you can fine-tune individual colors:
- Caption — caption text color
- Arrows — arrow button color
- Dots — pagination dot color
- Link / Hover — caption link colors
Captions
Captions come from each image's caption text. Caption Display controls where they appear:
- Below — caption shown under the image
- Overlay — caption shown over the bottom of the image
- Hide — no caption
When Below or Overlay is active, typography controls reveal:
- Caption Font Size — S, M, L, XL
- Font Family and Font Weight
- Text Transform and Letter Spacing
Logo
Turn on Show Logo to display your site logo inside the lightbox. Logo Size options:
- Match — the logo mirrors your navigation header (same size, font, and position).
- XS / S / M / L — a compact logo floated in the top-left.
The logo uses the lightbox's UI color, so it stays consistent with the arrows and counter.
UI elements
The UI Elements group controls two small pieces of chrome, each with a size selector (S/M/L/XL):
- Image Counter — the "1 / 4" indicator. On by default.
- Close Button — the X in the top-right. On by default.
How visitors use it
On a published site, visitors:
- Click an image to open the lightbox, and click the image again (or the background, or the X) to close it.
- Navigate with the arrows, dots, thumbnails, keyboard, or mousewheel — depending on your settings.
- Zoom and rotate on desktop using the keyboard shortcuts above, then drag to pan when zoomed in.
- Swipe on touch devices to move between images, and swipe up or down to dismiss.
Related
- Add and arrange images in Image Blocks
- Set per-image alt text and captions in your Media library
- Style the section background in Section Settings