The Layout & Styling section controls the overall look of the Lightbox — the color theme, how items fill the viewport, the mobile layout mode, and which interface elements are visible. Most of these settings are visual defaults that apply across the entire Lightbox session.
Location Gallery Settings → Interactions → Lightbox Settings → Layout & Styling
Lightbox Theme #
| Setting | Lightbox Theme |
| Options | Dark Light Custom |
| Default | Dark |
Selects the built-in color scheme for the Lightbox backdrop, toolbar, navigation controls, and info panel.
- Dark — Deep dark backdrop with light controls. Works well for most photography.
- Light — White/light-grey backdrop with dark controls. Better suited to product galleries or bright editorial contexts.
- Custom — Every color token is individually configurable. See Lightbox: Custom Colors.
Overlay Blur #
| Setting | Overlay Blur |
| Options | Light (8px) Strong (24px) None |
| Default | Light (8px) |
Controls the blur intensity applied to the page behind the Lightbox backdrop. Light gives a subtle frosted-glass effect. Strong makes the background heavily blurred. None removes the blur entirely, leaving only the backdrop color.
Fit Media to Screen #
| Setting | Fit Media to Screen |
| Default | Off |
When enabled, items are scaled up to fill the available viewport area, even if the item’s natural dimensions are smaller than the screen. When off, items are never displayed larger than their natural size — only downscaled if they exceed the viewport.
Mobile Layout #
| Setting | Mobile Layout |
| Options | Mobile Optimized Desktop |
| Default | Mobile Optimized |
Controls how the Lightbox lays out its panels on narrow viewports (typically below 768px).
- Mobile Optimized — The info panel and thumbnail strip move to the bottom of the viewport regardless of their configured position. Controls are spaced for touch interaction.
- Desktop — The Lightbox uses the same layout as on desktop, regardless of screen width. Use this if your site has a fixed desktop-width layout.
Fullscreen Button #
| Setting | Fullscreen Button |
| Default | Off |
Adds a fullscreen toggle button to the Lightbox toolbar. When a visitor activates it, the browser enters native fullscreen mode with the Lightbox filling the entire screen. The button is hidden on browsers that do not support the Fullscreen API.
Button Tooltips #
| Setting | Button Tooltips |
| Default | On |
Controls whether hover tooltips are shown on Lightbox toolbar buttons (close, info, fullscreen, zoom, download, and similar). Turn off for a minimal UI or when tooltips conflict with a custom overlay.
Enable Shadow on Full Image #
| Setting | Enable Shadow on Full Image |
| Default | Off |
Adds a soft drop shadow beneath the main item in the Lightbox. Useful for light-themed Lightboxes where the item needs visual separation from the backdrop. The shadow color is configurable via the Full Item Shadow Color token when using a Custom theme.
