Leadwhite Mosaic Gallery for Elementor

Leadwhite Mosaic Gallery for Elementor adds a Tiled Gallery widget to Elementor that produces a varied mosaic layout driven by image aspect ratios — similar to Jetpack’s Tiled Mosaic gallery but built natively for Elementor with full style controls.

How it works

Images are grouped into rows automatically based on their aspect ratios. Each row uses the best available shape from a library of eight layout patterns (adapted from Jetpack’s open-source grouper):

• Symmetric Row — portrait, two stacked landscapes, portrait
• One Three — portrait + three stacked landscapes
• Three One — three stacked landscapes + portrait
• One Two — single + stack of two
• Two One — stack of two + single
• Four — four singles
• Three — three singles
• Panoramic — single wide image fills the row

Row heights and column widths are calculated from aspect ratios so all images in a row share the same height, with no cropping distortion.

Features

• Tiled mosaic layout with 8 shape types
• Hover overlay with background colour, fade or slide-up animation
• Title and description pulled from attachment metadata (title, caption, alt, description)
• Independent typography controls for title and description
• Image border, border radius, and CSS filters (Normal and Hover states)
• Zoom In hover animation on images
• Responsive — stacks to single column below a configurable breakpoint
• Elementor lightbox integration
• Assets load only on pages where the widget is used

Usage

1. Add the Tiled Gallery widget to any Elementor page
2. Add images via the Gallery Images control in the Content tab
3. Configure layout (gap, mobile breakpoint) and interaction (lightbox, link) in the Content tab
4. Set overlay and image styles in the Style tab
5. Add captions or titles to images in the WordPress Media Library — these are used by the overlay Title and Description controls