How to Create a Pinterest Style Image Gallery in WordPress

When you have images that you want to display on your WordPress website, putting them in a Pinterest-style image gallery is one of the most popular ways to do it. So popular, in fact, that you’ll find plenty of premium WordPress themes that use it.

Creating it can be a breeze, too – we’ve made it that way with our Qi Addons for Elementor plugin. Among the sixty Elementor addons you get in the plugin – the most that you’ll find in a free plugin – you’ll find a Pinterest image gallery widget.

We’ll show you how you can use the widget to create a Pinterest-style image gallery in WordPress in just a few steps. We’ve created a video tutorial for anyone who prefers video, and we’ll embed it here if you’d like to watch it.

If you want to read how we’ve created one of the sample galleries you can see on the widget’s page, you can stay with this article.

Adding a Pinterest Style Image Gallery in WordPress

To be able to follow along with this demonstration and create awesome Pinterest-style image galleries of your own, you’ll need two key components – Elementor and our Qi Addons for Elementor plugin. You might also check out our free Qi WordPress theme if you still haven’t decided on one for your website, and you want something that looks and feels premium without the premium price tag.

So your first step would be to install and activate Elementor and then install and activate the Qi Addons for Elementor plugin. With that done, you can go ahead with creating a new page or post where you want to add the image gallery or open a post or page you want to edit. Either way, searching the Elements tab for “Pinterest” will bring up the Pinterest Image Gallery widget, and dragging it to a free section will be enough to get you started.

The fact that we didn’t make any columns before adding the widget shouldn’t worry you. Neither should the somewhat plain and empty look of the widget before there are any images added to the gallery.

This would be a good time to point out that you’ll probably have to dig around some settings if you want to have your image gallery truly full-width like the one we’re showing you here. By default, the gallery might be boxed, leaving some space between the edges of the gallery and the edges of the page. It can depend on the theme you’re using and the layout you’ve chosen.

We’ll show you how we’ve set up our layout and section so the gallery takes up the full width of the screen. First, in the page settings, you can find the layout options that let you choose the widest one. In our case, with the Qi Theme, it was the Qi Full-Width Option. If you’re using a different theme, select the Elementor Full Width template, or a similar option that comes with your theme.

While choosing this layout made the section full-width, its contents remained boxed. Here’s what it looked like when we were making our gallery.

To fix that, we needed to access the Edit Section menu by pressing the middle button on top of the section, the one that’s neither the “+” for adding a new section nor the “x” for deleting the existing section. In the Edit Section options, we chose Full Width for our Content Width instead of the default Boxed option, and we’ve set the Columns Gap option to No Gap.

That did the trick and gave us the widest possible gallery without any gaps. You’re welcome to both leave the boxed setup or choose different options for the gaps, of course – this is just the way we did it when we were creating the example.

Setting Up the Image Gallery

Now to the fun part – adding images and setting up the gallery. In the Pinterest Image Gallery Content tab, you’ll see that the General options let you select images. Pressing the button to create a gallery will take you to a menu where you can choose images from your media library or upload new ones. We’ve chosen ten images that were already in our media library.

After creating the new gallery and inserting it into the widget, you’ll see what a default gallery looks like. Because we’ve made the width settings beforehand, ours was full width, and it came in three columns with some space between the items.

The next batch of settings is where you can make some pretty important changes to the gallery. The first option in the Gallery Settings, for example, lets you choose whether to enable custom links for the images. Doing so will, however, disable the lightbox popup option by default. The other options you can choose include the number of columns – which you can set to be different for different-sized screens, the space between the items, the image hover effect, and the overlay colors for regular view and on hover.

We enabled the Lightbox popup because that’s a very useful option to have. We chose five columns for our gallery, but we did quite a few adjustments in the Columns Responsive options. For the two biggest screen sizes, we chose five columns. For the next one, we set it three and followed it up with a two before finishing with two single columns. We wanted to use the extra space afforded by the bigger screens to display more columns for a pleasing aesthetic effect while keeping the images big enough. Trying to do the same with a smaller, narrower screen, would make the images too small. That’s why the narrower the screen, the fewer columns we used. They are still going to be there though, just one below the other, instead of one next to the other.

We’ve set the space between items to zero, and we’ve chosen the image to zoom out on hover with the center being the image hover zoom origin. We opted against adding an overlay color, both regular and on hover, but feel free to add it if you want to spice up your gallery a bit. Just remember to add a degree of transparency to any color you pick unless you want it to completely block out the images in your gallery.

The final touch we applied was reordering the images. If you navigate back to the General options, clicking on the Gallery window will let you edit the gallery. Simply moving the images around will change the order in which they appear on the page. After finishing and re-inserting the gallery, this was the result.

Let’s Wrap It Up!

Depending on your profession and the purpose of your website, images might be the most important type of content you can host. That’s why you must have a quick and easy way to create galleries and show them. In this article, we’ve demonstrated how our Qi Addons for Elementor plugin can provide that option thanks to the Pinterest Image Gallery widget.