Once 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. In fact, it is so popular that you will find many premium WordPress themes using it.
Creating it can also be very easy – that’s how we did it with our Qi Plugins for Elementor plugin. Among the sixty Elementor plugins you will get in the plugin – the most you will find in a free plugin – you will 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 have prepared a training video for anyone who prefers video and will post it here if you want to watch it.
If you want to read how we created one of the sample galleries you can see on the widget’s page, you can continue from this article.
Adding Pinterest Style Image Gallery in WordPress
To follow this demonstration and create your own awesome Pinterest-style image galleries, you’ll need two key ingredients – Workman and our Qi Plugins for Elementor Addition. If you still haven’t chosen one for your website and want something that looks and feels premium without the premium price tag, you can also check out our free Qi WordPress theme.
So, your first step would be to install and activate Elementor, and then install and activate the Qi Plugins Elementor plugin. Once you’ve done that, you can continue to create a new page or post where you want to add the image gallery, or open a post or page you want to edit. In one way or another, Searching for “Pinterest” in the Elements tab will bring up the Pinterest Image Gallery widget, and dragging it to a free section should be enough to get you started.
It shouldn’t worry you that we didn’t make any columns before adding the widget. Before adding any image to the gallery, the widget should not look a bit plain and empty either.
This might be a good time to point out that if you really want your image gallery to be full-width like we’ve shown you here, you’ll probably need to dig into some settings. By default, the gallery can be boxed, leaving some space between the edges of the gallery and the edges of the page. It may depend on the theme you are using and the layout you have chosen.
We will show you how we set up our layout and partition so that the gallery takes up the entire 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, choose the Elementor Full Width template or a similar option that comes with your theme.
Choosing this layout made the section full-width while keeping its contents boxed. This is how it looked when we made our gallery.
To fix this, we had to access the Edit Section menu by pressing the middle button at the top of the section without the “+” to add a new section or the “x” to delete the existing section. In the Edit Section options, we chose Full Width for Content Width instead of the default Boxed option and set the Columns Gap option to No Gap.
This worked and gave us the largest possible gallery without any gaps. Of course you can both exit the boxed setup and choose different options for the spaces – This is how we did it when we created the example.
Setting Up the Image Gallery
Now for the fun part – adding images and setting up the gallery. On the Pinterest Image Gallery Content tab, you will see that the General options allow you to select images. Pressing the button to create a gallery will take you to a menu where you can select images from your media library or upload new ones. We selected ten images currently in our media library.
After you create the new gallery and add it to the widget, you will see what the default gallery looks like. Because we pre-set the width settings, ours was full-width and came in three columns with some space between elements.
The next set of settings is where you can make some pretty significant changes to the gallery. For example, the first option in Gallery Settings lets you choose whether to enable custom links for images. But doing so will disable the lightbox popup option by default. Other options you can choose from include the number of columns, spacing between elements, hover effect and normal view and hover overlay colors that you can set to be different for different sized screens.
We enabled the Lightbox popup because it’s a very useful option. We chose five columns for our gallery but We’ve made quite a few adjustments to the Responsive Column options. We chose five columns for the two largest screen sizes. For the next, we set it to three and follow up with two before finishing with two single columns. We wanted to use the extra space provided by larger screens to display more columns for a pleasing aesthetic effect while keeping the images large enough. Trying to do the same with a smaller, narrower screen will make images too small. So the narrower the screen, the fewer columns we would use. They will still be there, not side by side, but under each other.
We set the spacing between items to zero and selected the image to zoom out on hover, with the center being the image hover zoom origin. We chose to add an overlay color, both normal and hover., but feel free to add it if you want to spice up your gallery a bit. Don’t forget to add some degree of transparency to any color you choose if you don’t want it to completely obscure the images in your gallery.
The final touch we applied was to reorder the images. If you go back to the general options, clicking on the Gallery window will allow you to edit the gallery. Simply moving the images will change the order in which they appear on the page. After finishing and reloading the gallery, this was the result.
Let’s wrap it up!
Depending on your profession and the purpose of your website, images may be the most important type of content you can host. That’s why you should find a quick and easy way to create and display galleries. In this article, we show you how our Qi Plugins for Elementor can provide this option thanks to the Pinterest Image Gallery widget.
