---
title: "How to Create an Elementor Masonry Image Gallery?"
url: https://theplusaddons.com/docs/create-elementor-masonry-image-gallery/
date: 2023-06-16
modified: 2026-06-07
lang: en
author: "Aditya Sharma"
description: "Are you looking to show your Elementor image gallery in a masonry layout? The masonry layout arranges images of different heights into a grid that fills vertical gaps automatically, giving..."
image: https://theplusaddons.com/wp-content/uploads/2023/06/How-to-Create-an-Elementor-Masonry-Image-Gallery_-1024x536.jpg
word_count: 315
---

# How to Create an Elementor Masonry Image Gallery?

## 

- Utilizes the Gallery Listing widget from The Plus Addons for Elementor to create a masonry image gallery.
- Selects Masonry from the Layout section under the Layout tab to achieve the desired grid layout.
- Manages grid columns through the Columns Manage tab for optimal image presentation.

Are you looking to show your Elementor image gallery in a masonry layout? The masonry layout arranges images of different heights into a grid that fills vertical gaps automatically, giving your photo gallery a dynamic and organized appearance without uniform row heights.

With the Gallery Listing widget from [The Plus Addons for Elementor](https://theplusaddons.com/), you can create a masonry image gallery in Elementor directly in the Elementor editor.

**Best Used For:**

- Photography portfolio sites that display images of varying dimensions without cropping them to a fixed size

- Creative agency sites that want a visually dense, Pinterest-style image gallery on a services or work page

- E-commerce sites showcasing product images in a catalog layout where product photos have mixed aspect ratios

*To check the complete feature overview documentation of The Plus Addons for Elementor Gallery Listing widget, [click here](/docs/gallery-listing-widget-settings-overview/).*

***Requirement  - This widget is a part of The Plus Addons for Elementor, make sure it is installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-listing//#image-gallery-wgts?utm_source=tpae&utm_medium=docs&utm_campaign=text)

To do this, add the Gallery Listing widget to the page. After selecting the appropriate listing style, select **Masonry** from the **Layout** section under the **Layout** tab.

![](https://theplusaddons.com/wp-content/uploads/2023/06/gallery-listing-masnory-layout-new.png)

Select the appropriate image popup type from the **Popup Layout** dropdown. Use this when you want images to open in a lightbox when clicked, rather than navigating away from the page.

In the **Content** tab, select the appropriate content source and add images to the gallery.

The gallery will now display in a masonry grid layout. Manage the number of columns from the **Columns Manage** tab. For individual images where you need animation effects on scroll or hover, see [How to Add Image Animation in the Creative Image Widget?](https://theplusaddons.com/docs/add-image-animation-in-the-creative-image-widget/)

![gallery listing masonry layout demo](https://theplusaddons.com/wp-content/uploads/2023/06/gallery-listing-masonry-layout-demo.png)

Also, read [How to Create an Image Gallery in Grid Layout in Elementor](https://theplusaddons.com/docs/create-image-gallery-in-grid-layout-in-elementor/). To add clickable hotspot markers on individual images in your gallery, see [How to Add an Elementor Hotspot on an Image?](https://theplusaddons.com/docs/add-an-elementor-hotspot-on-an-image/)