FrameGrid
Lightweight image galleries with grid, masonry and justified layouts, hover effects, filters and a built-in lightbox. For Gutenberg, Divi 5, Divi 4 and other page builders.
See it in action
A saved gallery placed with [framegrid id="139"]: justified rows, zoom on hover, filter buttons and the lightbox. Click a photo to open it.
What it does
FrameGrid adds a gallery block, a native Divi 5 module with a live Visual Builder preview, and a [framegrid] shortcode. Build a gallery once under Galleries and place it anywhere.
- Grid, masonry and justified-row layouts
- Separate column counts for desktop, tablet and mobile
- Hover effects: zoom, lift, grayscale to color, dim
- Captions below, as an overlay, or on hover
- Built-in lightbox with keyboard, swipe, captions and a counter
- Filter buttons built from per-image tags, and per-image custom links
Built to stay small
The three layouts are pure CSS. The only script is under 4 KB gzipped, needs no jQuery, and loads only on pages whose galleries use the lightbox, filters or entrance animations.
- Responsive
srcsetand native lazy loading from WordPress core - Fade or fade-and-rise entrance animations, skipped for visitors who prefer reduced motion
- Adjustable spacing, corner radius and shadows
- No settings page, no custom tables, no external services
FAQ
Can I use it with Divi 4 or another page builder?
Yes. Create the gallery under Galleries > Add New Gallery, publish it, and paste its [framegrid id="…"] shortcode into any text or code module. Editing the gallery updates every page that uses it.
Does it work without JavaScript?
Yes. Layouts, hover effects and captions are CSS. Without JavaScript, lightbox images open as plain image files and filter buttons stay hidden.
How do I set a custom link or filter tags for an image?
Open the image in the Media Library and fill in Gallery link and Gallery filters. Both are saved on the image, so they apply in every gallery that uses it.