BLACK FRIDAY: 50% OFF all Pro plans
Pro from $18 a year or $60 lifetime, no code needed
Ends Cyber Monday, 30 Nov. Lock in the price today
Get 50% Off
Pro widget

Masonry Gallery Widget for Elementor Pro

A Pinterest-style image gallery with captions, lightbox and load more.

Overview

What Masonry Gallery does

Masonry Gallery packs images of different heights into tidy columns. Pick many images from the Media Library at once, or build custom items with their own title, text and link. Use it for portfolios, photo collections and any page where images should keep their own shape.

Features

What it can do

  • Two image sources: a Media Library selection or custom items with title, description and link.

  • Natural image shapes, or a repeating ratio pattern such as 3/4, 1/1, 4/5.

  • Row by row or column by column ordering, with 1 to 8 columns per device.

  • Five caption modes: overlay on hover, slide up on hover, always on image, below image, or none.

  • Image hover effects: zoom in, zoom out, slow pan, grayscale to color, blur and lift card.

  • Click opens the Elementor lightbox, the image file, the attachment page or a custom link.

  • Load more with a button or infinite scroll, with a set number of images per load.

  • Entrance effects (fade, fade up, zoom, flip up) with a delay between images.

Use cases

When to use it

Photography portfolio

Show portrait and landscape shots together without cropping them to one shape.

Project showcase

Use custom items so every image carries a title, a short description and a link to the project page.

Long image collections

Show the first images and let visitors load the rest with a button or by scrolling.

Uniform product shots

Apply a ratio pattern so images of the same shape still build a varied masonry.

Setup

How to set it up

A few steps from adding the widget to a finished result.

  1. Drag Masonry Gallery onto the page and open the Images section.

  2. Set Source to Media Library to pick many images at once, or keep Custom Items and fill in Image, Title, Description and Custom Link for each item.

  3. In Layout, set Columns, Column Gap and Row Gap for desktop, tablet and mobile.

  4. Choose the Order (left to right or top to bottom) and the Image Shape. For a pattern, type the ratios in Ratio Pattern.

  5. Pick a Caption mode, an Image Hover Effect and the Click Action.

  6. For long galleries, open Load More, choose Button or Infinite Scroll, and set Images Shown First and Images per Load.

  7. Finish in the Style tab: item borders and shadows, overlay, caption text, hover icon and the load more button.

FAQ

Questions and answers

Can each image link to a different page?

Yes. Set Source to Custom Items and fill in Custom Link for the item. An item with a custom link uses it instead of the Click Action.

How does the ratio pattern work?

Type width/height pairs separated by commas, for example 3/4, 1/1, 4/3. The pairs repeat in order across the images. A colon also works, such as 3:4.

Does load more fetch images from the server?

No. All images are in the page and load lazily. The button or infinite scroll only reveals more of them.

Where do captions come from for Media Library images?

From the fields saved with each image. Choose them with Caption Title From and Caption Text From.

Bright Addons Pro

Get Masonry Gallery with Bright Addons Pro

Bright Addons Pro has 80 Pro widgets plus all 53 free widgets, 10 extensions, a Theme Builder and 32 dynamic tags. From $18 a year, with a 14-day money-back guarantee.