Masonry Gallery

This free widget allows you to create an interactive image gallery. Using this gallery block you can customize the layout, add overlays, and enable lightbox effects for a better user experience. With easy design and control settings, it helps you showcase images in a stylish way.

Adding the block

To add the block:

1. Click the “+” button to add a new block.
2. Search for “Masonry Gallery” and select it.
3. For detailed instructions on how to add blocks in Gutenberg, please refer to the official WordPress Block Editor documentation.

Add Images

Once you add the plugin, you’ll see the option to upload images directly or choose from the Media Library. Simply select and add the images you want to include in your gallery.

General configuration

Gallery Settings

Custom Gutter Size – Set the spacing between gallery images.

Number of Columns – Choose how many columns you want to display in the gallery.

Show Caption Toggle – Enable or disable captions for your images.

Enable Lightbox Toggle – Turn on the lightbox feature to let users view larger versions of the images when clicked.

Design options

Lightbox settings

• Background Color – Set the background color that appears behind the image when the lightbox opens.
• Exit Icon Color – Define the color of the close (×) icon.
• Arrow Color – Customize the color of the navigation arrows used to move between images.

Overlay settings

• Enable Overlay – Turn the overlay effect on or off for images.
• Color – Set the main overlay color that appears when hovering over an image.
• Overlay Background Color – Choose the background color for the overlay area.
• Icon Size – Adjust the size of the overlay icon in pixels.
• Color – Define the main color applied to the overlay elements.
• Overlay Icon Color – Pick a custom color for the overlay icon.
• Overlay Icon – Select the icon style that appears when hovering over an image.