Learning how to add a masonry gallery to WordPress is a great way for all visual creators to showcase their portfolio on their own artist website. In this post, I walk you step-by-step through how to create a masonry gallery layout in order to add image galleries to posts, pages, and other post types. We’ll be using an amazing WordPress gallery plugin with lightbox, download, social sharing, and much more!
In this tutorial, I’ll show you step-by-step how to add a masonry gallery to WordPress.
To create that masonry image gallery in WordPress, we’re going to use the Elementor Pro WordPress plugin.
You will learn how to customize your WordPress masonry gallery down to the last detail, how to change the order of images, and how to add a custom link to your gallery in WordPress.
Let’s get started!
To add a masonry gallery to WordPress, you’ll need to follow these 6 steps:
…but what exactly is this WordPress gallery plugin that I’m talking about?
The Elementor Pro Gallery Widget – What exactly is it?
The Gallery widget that comes with the Pro version of Elementor is a powerful WordPress masonry plugin. Besides the masonry layout, it provides several other gallery layouts and heaps of customization options.
Even though the Pro Gallery Widget is a professional, up-to-the-minute widget, it’s as easy to handle as any other simple WordPress gallery plugin. You’ll be astonished how easy it is to create an image gallery in WordPress that is highly functional, appealing, and unique in your own way.
In less than no time, you’ll be able to create an advanced WordPress masonry gallery with lightbox, social sharing options, hover animations for images and image titles, CSS filters, and blend modes. This is to just name a few – the customization options are endless! If you want to send your viewers to a place other than the default lightbox, you can add a custom link to your gallery in WordPress.
If just one single gallery is not enough to display all your different types of artworks, you can add multiple image galleries that are filterable and fully responsive.
You can change the masonry image gallery layout at any time to one of the other gallery layouts (Grid or Justified). You can change the order of the images in your WordPress gallery, insert more images or remove some of the older ones that you don’t want to showcase any longer. As well, you can add more image galleries as your art portfolio is growing.
The Elementor Pro Gallery Widget provides every styling option you need to create a gallery that is perfectly unique in your own way!
Excited to see what the Masonry Gallery looks like? Let’s get started!
Quick Tip: If you’re just getting started with your WordPress gallery and don’t want to invest in a premium plugin, find out how to create an image gallery in WordPress for free here. That post will also show you how to add a grid in WordPress to showcase your art.
How to add a masonry gallery to WordPress – Step by Step
STEP 1: Install & activate Elementor Pro
First off, go ahead and install Elementor Pro. You can get Elementor Pro by clicking on the link below.
Once the plugin is activated, you’ll have all the extra widgets in the Pro section of the Elementor sidebar.
STEP 2: Drop the Pro Gallery Widget on the Canvas
All you have to do now to add a masonry gallery to WordPress is grab the Gallery Widget and drag and drop it onto the canvas.
If you cannot find the widget immediately in the sidebar, you can simply use the search bar and type in ‘gallery’.
STEP 3: Select The Masonry Layout in the Settings drop-down
Once you’ve dropped the widget on the canvas, its settings will automatically show in the Elementor sidebar. So just go over to the Content tab and select the Masonry layout. You’ll find this right in the Settings options under Layout.
From there, you can build and customize your brand-new WordPress masonry gallery.
But before anything else, you’ll have to decide if you want to create a single image gallery or multiple galleries for different image categories.
Creating multiple filterable galleries
For this tutorial, I’m going to select Multiple. Click on the gallery and give it a name. After that, click on the little + box to insert images to your gallery.
You can either pick existing images from your Media Library or upload new ones from your computer.
Once you have selected the pictures, you can re-order and customize them in the Edit Gallery window. To change the order, simply drag and drop the images to where you want to have them. You can also use Reverse Order.
In the Media Library, you can give each image its own caption. You can enter title, description, and alternative text for each image. Once you’re done, click on Insert gallery.
Quick Tip: You can change the order of your galleries at any time by simply dragging and dropping them up or down on the Elementor sidebar itself.
Built-in Lazy Load feature
If you have large galleries with a lot of images, switching on Lazy Load will optimize loading times for your WordPress site. Plus, the ‘Fade In’ effect that gradually loads the pictures as you scroll down adds a nice visual extra to your masonry image gallery!
STEP 4: Set the Overall Look of the Masonry Gallery
Customizing the masonry gallery layout
When you add a masonry gallery to WordPress, all the images will be set to the same width, while their height can be different.
If you would like to have it the other way round – all images in the same height but with different widths – find out how to create a tiled gallery in WordPress here.
To change the default layout of your masonry image gallery, you can adjust the number of columns and the spacing between the pictures. You can also choose a different image size.
For this example, I’ll stick with medium size and set the layout to three columns and the spacing to 15 px.
By default, the gallery images will show in a Lightbox when someone clicks on a thumbnail. The viewer can then use the left and right arrows to slide through your gallery.
If you don’t like the default WordPress masonry gallery with lightbox enabled, you can change it under Link.
To add a custom link to a gallery in WordPress, simply select Custom URL and enter the web address you want to link to.
Setting the filter bar options
If you’ve set the gallery type to Multiple, the Filter Bar will appear on top of your gallery. In the Filter Bar drop-down, you can adjust the look and feel of the filter bar.
You can hide the “All” filter or give it a different name. You can change pointer style and animation. There are loads of options, so go ahead and try them out!
Customizing background overlay and image titles
In the Overlay drop-down (under Content), you can set the background overlay to either “Show” or not.
The background overlay is what shows when people hover the mouse over an image.
By default, it’s a transparent black layer.
STEP 5: Customize Look and Feel of the Gallery Images
Under Image settings in the Style tab, you can set a border for your gallery images. You can define border color, border width, and border radius on normal display and on hover.
Plus, there are some extra CSS filtering options, plus hover animations.
Quick Tip: By just increasing the Border Radius you can round off the corners of your images without adding a border to them. You can set a different radius for on hover. Little tweaks like that often give the extra touch to your gallery to make it stand out!
For this gallery demo, I’ll set the normal border radius to 27 px and increase it up to 100 px on hover. Along with the ‘Zoom Out’ image effect, this adds a nice dynamic effect to the images when hovering over them!
Looks great and exceptional! What do you think?
CSS filtering and hover animations
CSS filters allow you to change the hue, saturation, contrast and blur of images on hover. There are tons of possible combinations!
Hover Animation gives you the option to set a dynamic animation when hovering over the image. You can adjust the animation duration in milliseconds. A thousand ms will set the animation duration to take exactly one second.
Setting an on-hover overlay background
By moving on to the Overlay settings (under the Style tab), you can set an overlay color or gradient that will show on hover.
You can also give the background overlay a blend mode and pick a hover animation from the drop-down menu.
There are altogether 14 options of entrance and exit hover animations!
For this example, I’ll go for an overlay gradient with a ‘Fade In’ hover effect, and an animation duration of 800 ms.
Below in the Content drop-down (under Style), you can define typography, color and alignment of title and description that will show on hover. You can position them by setting the horizontal and vertical alignment.
For example, you can capitalize the letters, increase letter spacing, and add some padding.
You can also choose a hover animation for title and description.
I’ll be choosing ‘Zoom In’ for this example. That creates a nice contrast to the ‘Zoom Out’ hover effect I’ve selected before.
I switched on Sequenced Animation as well. This makes the background overlay and text enter gradually and intensifies the zoom effects.
Let’s move on to the last step.
Customizing the look of the filter bar
Last but not least, we have the option to customize the filter bar.
You can set text color and typography, the spacing between the gallery categories as well as the gap between the filter bar and the images.
In the Active and Hover tabs you can customize everything even more to your liking!
And that’s it. We’re done creating our masonry image gallery and ready to take it live on our WordPress site.
STEP 6: Publish your WordPress gallery & enjoy!
To add the masonry gallery to WordPress, all you need to do now is hit Publish.
And voilà! Now you and your viewers can enjoy the masonry gallery we’ve just created!
How to Use the Pro Gallery Widget in Elementor by Elementor Website Builder for WordPress on YouTube.
I hope this tutorial helped you add a masonry gallery to your own WordPress site and style it in your very unique way! Feel free to share it with other artists to help them create an image gallery as well! 💖
This really answered my downside, thank you!
You’re most welcome, Agans. Great to hear that you found the tutorial helpful!
Thanks for the detailed tutorial! The customization options you highlighted, like hover animations and CSS filters, are exactly what I needed to give my site a more professional look. This is a game-changer!
Hi Ava, great to hear that you found the tutorial helpful. Indeed, having an appealing and professional-looking online gallery is the first step to success! I wish you all the best for your creative journey ♡