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, 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.
Requirement – This widget is a part of The Plus Addons for Elementor, make sure it is installed & activated to enjoy all its powers.
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.
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?
Also, read How to Create an 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?
