Masonry Gallery for Elementor

Sep 1, 2023 | Blog

Introducing WPMozo Masonry Gallery for Elementor

The Elementor masonry gallery is another crucial module that you use to enhance the visual appeal of your website using images and photos. This Elementor masonry gallery widget in WPMozo Add Ons for Elementor is another useful tool that empowers you to exhibit all your images in a stunning way. Now you can express more through your images instead of pushing annoying lengthy content in paragraphs.

In this post, we will try to explore some of the major settings, options and configurations offered in the WPMozo Masonry Gallery for Elementor to take the gallery appearance of your website to the next level.

What is WPMozo Masonry Gallery for Elementor?

With the help of Masonry Gallery plugin by WPMozo, you can build a gallery in Elementor with masonry styling to showcase all your images in a very exquisite way. You can use the advanced customization and settings offered in this Elementor masonry gallery to personalize things as per your needs. If your are looking for a Masonry Gallery for WordPress and Elementor with all these customization and styling options, then it can be a perfect choice for you.

What features does it offers?

This WPMozo Masonry Gallery widget comes packed with a wide range of features.

  • Show an unlimited number of images in the masonry gallery
  •  Exhibit images in multiple columns
  •  Easy options to display and place titles and captions
  •  Interactive lightbox and overlay effects
  •  Custom styling for every element

Let’s start things by adding Masonry Gallery to our Elementor builder.

Explore the Masonry Gallery to Create Some Spectacular Designs

First of all let’s add a Masonry Gallery to our Elementor builder.

1. Add Masonry Gallery in Elementor Builder

You can easily add the Masonry Gallery in your Elementor builder by dragging the widget to the builder area.

Masonry Gallery for Elementor

2. Add your images to the Masonry Gallery

Now the Masonry Gallery block is added to the builder but the gallery is still not appearing. This is because right now there are no images in the gallery. The next step is to add some stunning images to your gallery. You can easily add your favorite images through the edit icon in the Elementor dashboard.

You can select multiple images at once from the media section of your WordPress website. After adding the images your Masonry Gallery will look like this.

Masonry Gallery for Elementor

3. Customizing the basic structure

The basic settings of the Masonry Gallery will immediately appear after you drop the gallery on the design area of the builder. The content section holds all the core settings required to change the structure of the Masonry Gallery.

Select Number of Columns and Image Size

Easily Customize the column layout by selecting the required number of columns. Selecting the number of columns is completely dependent on your website structure and requirements.

Masonry Gallery for Elementor

Choose the suitable image size as per your needs. We recommend you to choose the optimal size based on the design structure and needs of your website.

Adjust the column spacing to give your gallery the perfect desired look with a clean and tidy design.

Masonry Gallery for Elementor

Show Title and Caption

Show the Title and Caption with the images in the Masonry Gallery to add bits of information which is useful for the viewers. The interesting thing about the Masonry Gallery is that you can choose where to display the title and captions. You can show them in the gallery or on the lightbox or both.

Masonry Gallery for Elementor
Masonry Gallery with Titles

Enable Lightbox

You can enable the lightbox with a single click. There are options to select the title and caption placement in the lightbox as well. These configurations completely depend on the requirements of your gallery. Moreover, convenient arrow icons are available to switch between the next or previous images in the lightbox.

Masonry Gallery for Elementor

Add Overlay Effects

You can apply magnificent overlay effects which gets alive on a hover. You can try out a suitable combination of overlay settings that matches up with the styling of the website. Both the options are provided to you. Either insert an appropriate icon from the library or upload any image. Here we have used an arrow icon that instantly gets alive on a hover action.

Overlay Effect On Hover
Icon Library

4. Styling your Masonry Gallery in Elementor

You can style your gallery with a large number of available customizations and settings. Let’s go through some of them.

Style the Masonry Gallery with a suitable Border Type

Use any of the suitable Border Types such as Solid, Double, Dotted, Groove, and others to differentiate it from the remaining content of the page. You also get the option to adjust the Border width and color to highlight each image individually. You can try your favorite colors that match the needs of your website. We just applied the Red-colored Solid border and see how it looks.

Masonry gallery With Solid Borders

Use Box Shadows and Rounded Corners to add a unique appeal

You can also enable Box Shadows to the images for a unique visual appeal. Just take a look at the Masonry Gallery after enabling the Box shadow. The Box Shadows has several detailed settings that can be customized as per design requirements. The option to customize the images of the masonry Gallery with rounded corners is also made available to change the overall appearance of every image after the gallery is loaded. We just enabled the Box shadow and personalized the settings of the rounded corners and see how it enriched the visual appeal of the Masonry Gallery.

Style the Title, Caption and Lightbox in your desired way

Choose a suitable Title Heading level and its text color for clear details about the images for the users. Select the font, add text-shadow, and align them accordingly for a better view. The padding and margin adjustments are also provided to enhance the tidy look of the Masonry Gallery after adding the Titles.

The same kind of styling options are made available for the Captions as well. You only need to adjust them as per your needs.

We just changed the typography and alignment of the title and captions and see what happened after that.

Styling the Lightbox is also very simple. Play with available Lightbox styling options to change the background color, Exit icon color, Arrow color, etc. to give your Masonry Gallery a personalized touch.

Lightbox Styling options

5. Some Advanced Effects to make your Masonry Gallery more striking

Use the transform effects such as Rotate, Offset, Scale, and Skew to create some outstanding presentation styles for your Masonry Gallery. Let’s take a quick view of the transformation effects that you can apply to your Masonry Gallery.


Give a Rotating effect to your gallery with the help of some simple settings in the transform section.

Masonry Gallery for Elementor


Similarly, you can stunningly present your gallery using the offset transformation.

Masonry Gallery for Elementor

In the same way, you can use the amazing entrance animations to showcase your gallery more stunningly with its first look while the page is being loaded. Let’s take a close look at some of those entrance animations.

Fade In Down

You can deploy the Fade in Down entrance animation to capture the senses of the readers when they first land on your gallery page.

Masonry Gallery for Elementor

In the same way, you can try a lot of animation effects such as Zoom, Bounce, Slide, and Rotate and choose the best one that fulfills the design requirements of your website.

We have demonstrated and discussed almost all the major configurations, styling options, and animation effects to create a Masonry Gallery with a breathtaking view. I hope this post will prove to be helpful for exploring the features of Masonry Gallery for Elementor.In the same way, you can try a lot of animation effects such as Zoom, Bounce, Slide, and Rotate and choose the best one that fulfills the design requirements of your website.

Posted By:
A curious learner who is ready to break down and simplify things to make them easily understandable to the end user. His main motive is to deliver easy-to-grab solutions in a user-friendly manner.


Submit a Comment

Your email address will not be published. Required fields are marked *


Submit a Comment

Your email address will not be published. Required fields are marked *

How to Add a Shop Page in WooCommerce Using Gutenberg

How to Add a Shop Page in WooCommerce Using Gutenberg

WooCommerce is a popular plugin and is an ideal solution for all WordPress users to create online stores and sell their products. All the products of a store are showcased on the shop page; this is the main page that represents the store with all its products. If you...

How to Set up and Configure Mini Cart for WooCommerce

How to Set up and Configure Mini Cart for WooCommerce

Searching for a solution to add a convenience factor for the customers while shopping in your online store? A mini cart plugin for your WooCommerce store is the ideal solution. You can add a mini cart to your WooCommerce store to make the customer experience quick,...

5 Creative Uses of Content Toggle Widget  in Elementor

5 Creative Uses of Content Toggle Widget  in Elementor

If you want a versatile tool to display content interactively while using Elementor, WPMozo Content Toggle Widget is the perfect choice. It is a smart tool to display information-rich content in a confined space. This Elementor widget also helps visitors compare and...

Popular on WPMozo

WPMozo Wishlist for WooCommerce WPMozo Checkout Manager for WooCommerce WPMozo Variation Swatches for Woo WPMozo Addons for Elementor

Explore, Learn, Grow: Join Now!