Title: Mango Masonry Gallery for Elementor
Author: Shihab Ul Hoque
Published: <strong>October 24, 2026</strong>
Last modified: October 24, 2026

---

Search plugins

![](https://ps.w.org/mango-masonry-gallery/assets/banner-772x250.png?rev=3763408)

![](https://ps.w.org/mango-masonry-gallery/assets/icon-256x256.png?rev=3763408)

# Mango Masonry Gallery for Elementor

 By [Shihab Ul Hoque](https://profiles.wordpress.org/shihab0915/)

[Download](https://downloads.wordpress.org/plugin/mango-masonry-gallery.1.0.0.zip)

 * [Details](https://wordpress.org/plugins/mango-masonry-gallery/#description)
 * [Reviews](https://wordpress.org/plugins/mango-masonry-gallery/#reviews)
 *  [Installation](https://wordpress.org/plugins/mango-masonry-gallery/#installation)
 * [Development](https://wordpress.org/plugins/mango-masonry-gallery/#developers)

 [Support](https://wordpress.org/support/plugin/mango-masonry-gallery/)

## Description

Mango Masonry Gallery adds a clean, responsive masonry gallery to your site. Images
keep their natural aspect ratio and flow into columns, and clicking an image opens
it in a full-screen lightbox.

Features:

 * Elementor widget with a live masonry preview in the editor
 * Responsive columns (1–6) for desktop, tablet and mobile
 * Adjustable gap, corner radius and image size
 * Full-screen lightbox with previous/next buttons, keyboard navigation (, , Esc)
   and an image counter
 * Custom hover overlay, lightbox accent and lightbox background colors
 * Accessible: keyboard-focusable images, ARIA labels, focus is returned after closing
   the lightbox
 * No jQuery and no external libraries; CSS and JS load only on pages that show 
   a gallery
 * Works without Elementor through the `[mango_masonry_gallery]` shortcode

#### Shortcode

    ```
    [mango_masonry_gallery ids="12,34,56" columns="3"]
    ```

Available attributes:

 * `ids` – comma-separated attachment IDs (required)
 * `columns` – desktop columns, 1–6 (default 3)
 * `columns_tablet` – tablet columns (default: 2, or fewer if `columns` is lower)
 * `columns_mobile` – mobile columns (default 1)
 * `gap` – space between images, e.g. `20px` (default `7px`)
 * `radius` – image corner radius, e.g. `4px` (default `2px`)
 * `size` – registered image size used in the grid (default `large`)
 * `overlay` – hover overlay color (default `rgba(20,20,20,0.45)`)
 * `accent` – lightbox controls color (default `#d4b5a5`)
 * `lightbox_bg` – lightbox background color (default `rgba(10,7,5,0.96)`)

## Screenshots

[⌊Masonry gallery on the front end.⌉⌊Masonry gallery on the front end.⌉[

Masonry gallery on the front end.

[⌊Full-screen lightbox.⌉⌊Full-screen lightbox.⌉[

Full-screen lightbox.

[⌊Widget settings in the Elementor editor.⌉⌊Widget settings in the Elementor editor
.⌉[

Widget settings in the Elementor editor.

## Installation

 1. Upload the `mango-masonry-gallery` folder to `/wp-content/plugins/`, or install
    it from the Plugins screen.
 2. Activate the plugin.
 3. In Elementor, search for “Mango Masonry Gallery” in the widgets panel and drag 
    it onto the page. Or use the shortcode in any post or page.

## FAQ

### Do I need Elementor?

No. The Elementor widget is only registered when Elementor is active. Without it,
use the `[mango_masonry_gallery]` shortcode.

### Why doesn’t the lightbox open in the Elementor editor?

Clicks in the editor are used to select and edit the widget, so the lightbox is 
disabled there. Preview or view the page to try it.

### In which order are images shown?

Images flow top to bottom in each column, then on to the next column.

## Reviews

There are no reviews for this plugin.

## Contributors & Developers

“Mango Masonry Gallery for Elementor” is open source software. The following people
have contributed to this plugin.

Contributors

 *   [ Shihab Ul Hoque ](https://profiles.wordpress.org/shihab0915/)

[Translate “Mango Masonry Gallery for Elementor” into your language.](https://translate.wordpress.org/projects/wp-plugins/mango-masonry-gallery)

### Interested in development?

[Browse the code](https://plugins.trac.wordpress.org/browser/mango-masonry-gallery/),
check out the [SVN repository](https://plugins.svn.wordpress.org/mango-masonry-gallery/),
or subscribe to the [development log](https://plugins.trac.wordpress.org/log/mango-masonry-gallery/)
by [RSS](https://plugins.trac.wordpress.org/log/mango-masonry-gallery/?limit=100&mode=stop_on_copy&format=rss).

## Changelog

#### 1.0.0

 * Initial release.

## Meta

 *  Version **1.0.0**
 *  Last updated **6 days ago**
 *  Active installations **Fewer than 10**
 *  WordPress version ** 5.8 or higher **
 *  Tested up to **7.1.4**
 *  PHP version ** 7.4 or higher **
 * Tags
 * [elementor](https://wordpress.org/plugins/tags/elementor/)[gallery](https://wordpress.org/plugins/tags/gallery/)
   [images](https://wordpress.org/plugins/tags/images/)[lightbox](https://wordpress.org/plugins/tags/lightbox/)
   [masonry](https://wordpress.org/plugins/tags/masonry/)
 *  [Advanced View](https://wordpress.org/plugins/mango-masonry-gallery/advanced/)

## Ratings

No reviews have been submitted yet.

[Your review](https://wordpress.org/support/plugin/mango-masonry-gallery/reviews/#new-post)

[See all reviews](https://wordpress.org/support/plugin/mango-masonry-gallery/reviews/)

## Contributors

 *   [ Shihab Ul Hoque ](https://profiles.wordpress.org/shihab0915/)

## Support

Got something to say? Need help?

 [View support forum](https://wordpress.org/support/plugin/mango-masonry-gallery/)