The lightbox effect enlarges images in a centered overlay with a dimmed background when clicked. This feature helps visitors view images in detail while maintaining a clean user experience. Here's how to enable and customize lightbox settings across different Squarespace elements:

Gallery Sections (Version 7.1)

To enable lightbox in grid layouts:

1. Click Edit on the page and hover over gallery section
2. Choose Grid: Simple, Grid: Strip, or Grid: Mosaic layout
3. Enable the Lightbox option
4. Click Save

To customize lightbox colors:

1. Open Site Styles and select Colors
2. Click the pencil icon on matching theme
3. Adjust lightbox Background and icon settings
4. Save changes

Note: Captions don't display in lightbox, and clickthrough URLs override lightbox functionality.

Image Blocks

Lightbox works with:

• Inline layout (7.0 and 7.1 classic editor)
• Dynamic Editor sections

Enable lightbox:

1. Open image editor
2. Select Design tab
3. Choose Inline layout
4. Enable Lightbox
5. Select Dark or Light Overlay

Grid Gallery Blocks

Setup:

1. Add images to gallery
2. Click Design tab
3. Check Lightbox
4. Choose Dark or Light Overlay

Notes:

• Captions show on hover
• Not available for slide/carousel/stacked galleries
• Videos need Use Thumbnail enabled
• URLs override lightbox

Summary Blocks

Features:

• Automatic lightbox for wall/grid layouts
• Dark overlay only
• Captions visible on hover
• URLs override lightbox initially
• URLs disabled in lightbox view

Mobile Considerations:

• Lightbox zoom unavailable on mobile
• Captions appear via dot icon
• Some templates disable lightbox on mobile

Template-specific features vary by version and layout. Check your template's documentation for specific functionality details.

Remember: Enable Inline layout where required, and consider URL behavior when planning image interactions.

Related Articles

Previous Articles