{"id":29889,"date":"2021-09-18T15:00:22","date_gmt":"2021-09-18T13:00:22","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=29889"},"modified":"2021-09-17T11:08:35","modified_gmt":"2021-09-17T09:08:35","slug":"how-to-create-pinterest-style-image-gallery-in-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-create-pinterest-style-image-gallery-in-wordpress\/","title":{"rendered":"How to Create a Pinterest Style Image Gallery in WordPress"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]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\u2019ll find plenty of <a href=\"https:\/\/qodeinteractive.com\/theme-layout\/pinterest-wordpress-themes\/\">premium WordPress themes<\/a> that use it.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Creating it can be a breeze, too \u2013 we\u2019ve made it that way with our <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/\">Qi Addons for Elementor<\/a> plugin. Among the sixty Elementor addons you get in the plugin \u2013 <strong>the most that you\u2019ll find in a free plugin<\/strong> \u2013 you\u2019ll find a <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/pinterest-image-gallery\/\">Pinterest image gallery<\/a> widget.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We\u2019ll show you how you can use the widget to create a Pinterest-style image gallery in WordPress in just a few steps. <strong>We\u2019ve created a video tutorial for anyone who prefers video, and we\u2019ll embed it here if you\u2019d like to watch it.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;40px&#8221;][vc_column_text]<iframe loading=\"lazy\" title=\"YouTube video player\" src=\"https:\/\/www.youtube.com\/embed\/8bzh6bdSq4k\" width=\"1280\" height=\"720\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;38px&#8221;][vc_column_text]If you want to read how we\u2019ve created one of the sample galleries you can see on the widget\u2019s page, you can stay with this article.[\/vc_column_text][vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;qi-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Adding a Pinterest Style Image Gallery in WordPress<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"465\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Pinterest-Image-Gallery.jpg\" class=\"attachment-full size-full\" alt=\"Pinterest Image Gallery\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Pinterest-Image-Gallery.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Pinterest-Image-Gallery-300x144.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Pinterest-Image-Gallery-768x369.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Pinterest-Image-Gallery-620x298.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]To be able to follow along with this demonstration and create awesome Pinterest-style image galleries of your own, you\u2019ll need two key components \u2013 <a href=\"https:\/\/wordpress.org\/plugins\/elementor\/\" target=\"_blank\" rel=\"noopener\">Elementor<\/a> and our <a href=\"https:\/\/wordpress.org\/plugins\/qi-addons-for-elementor\/\" target=\"_blank\" rel=\"noopener\">Qi Addons for Elementor<\/a> plugin. <strong>You might also check out our <a href=\"https:\/\/qodeinteractive.com\/qi-theme\/\">free Qi WordPress theme<\/a> if you still haven\u2019t decided on one for your website, and you want something that looks and feels premium without the premium price tag.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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, <strong>searching the Elements tab for \u201cPinterest\u201d will bring up the Pinterest Image Gallery widget, and dragging it to a free section will be enough to get you started.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Add-Pinterest-Image-Gallery-Widget.jpg\" class=\"attachment-full size-full\" alt=\"Add Pinterest Image Gallery Widget\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Add-Pinterest-Image-Gallery-Widget.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Add-Pinterest-Image-Gallery-Widget-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Add-Pinterest-Image-Gallery-Widget-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Add-Pinterest-Image-Gallery-Widget-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The fact that we didn\u2019t make any columns before adding the widget shouldn\u2019t worry you. Neither should the somewhat plain and empty look of the widget before there are any images added to the gallery.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This would be a good time to point out that you\u2019ll probably have to dig around some settings if you want to have your image gallery truly full-width like the one we\u2019re 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\u2019re using and the layout you\u2019ve chosen.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>We\u2019ll show you how we\u2019ve set up our layout and section so the gallery takes up the full width of the screen.<\/strong> First, in the page settings, you can find the layout options that let you choose the widest one. <strong>In our case, with the Qi Theme, it was the Qi Full-Width Option.<\/strong> If you\u2019re using a different theme, select the Elementor Full Width template, or a similar option that comes with your theme.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"570\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Page-Layout.jpg\" class=\"attachment-full size-full\" alt=\"Page Layout\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Page-Layout.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Page-Layout-300x176.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Page-Layout-768x452.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Page-Layout-620x365.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]While choosing this layout made the section full-width, its contents remained boxed. <strong>Here\u2019s what it looked like when we were making our gallery.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Grid-Preview.jpg\" class=\"attachment-full size-full\" alt=\"Grid Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Grid-Preview.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Grid-Preview-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Grid-Preview-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Grid-Preview-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]To fix that, we needed to access the Edit Section menu by pressing the middle button on top of the section, the one that\u2019s neither the \u201c+\u201d for adding a new section nor the \u201cx\u201d for deleting the existing section.<strong> In the Edit Section options, we chose Full Width for our Content Width instead of the default Boxed option, and we\u2019ve set the Columns Gap option to No Gap.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Edit-Section-Width.jpg\" class=\"attachment-full size-full\" alt=\"Edit Section Width\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Edit-Section-Width.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Edit-Section-Width-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Edit-Section-Width-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Edit-Section-Width-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]That did the trick and gave us the widest possible gallery without any gaps. You\u2019re welcome to both leave the boxed setup or choose different options for the gaps, of course \u2013<strong> this is just the way we did it when we were creating the example.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Setting Up the Image Gallery<\/h2>\n<p>[\/vc_column_text][vc_column_text]Now to the fun part \u2013 adding images and setting up the gallery. In the Pinterest Image Gallery Content tab, you\u2019ll 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. <strong>We\u2019ve chosen ten images that were already in our media library.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Select-Images.jpg\" class=\"attachment-full size-full\" alt=\"Select Images\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Select-Images.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Select-Images-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Select-Images-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Select-Images-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]After creating the new gallery and inserting it into the widget, you\u2019ll see what a default gallery looks like. <strong>Because we\u2019ve made the width settings beforehand, ours was full width, and it came in three columns with some space between the items.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"536\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Images-Added.jpg\" class=\"attachment-full size-full\" alt=\"Images Added\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Images-Added.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Images-Added-300x166.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Images-Added-768x425.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Images-Added-620x343.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]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 \u2013 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>We enabled the Lightbox popup because that\u2019s a very useful option to have.<\/strong> We chose five columns for our gallery, but <strong>we did quite a few adjustments in the Columns Responsive options. For the two biggest screen sizes, we chose five columns.<\/strong> <strong>For the next one, we set it three and followed it up with a two before finishing with two single columns.<\/strong> 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\u2019s 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.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"534\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Number-of-Columns.jpg\" class=\"attachment-full size-full\" alt=\"Number of Columns\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Number-of-Columns.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Number-of-Columns-300x165.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Number-of-Columns-768x423.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Number-of-Columns-620x342.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>We\u2019ve set the space between items to zero, and we\u2019ve 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<\/strong>, 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.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"1584\" height=\"746\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Pinterest-Gallery-Hover.gif\" class=\"attachment-full size-full\" alt=\"Pinterest Gallery Hover\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>The final touch we applied was reordering the images.<\/strong> 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. <strong>After finishing and re-inserting the gallery, this was the result.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"508\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Pinterest-Gallery-Final.jpg\" class=\"attachment-full size-full\" alt=\"Pinterest Gallery Final\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Pinterest-Gallery-Final.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Pinterest-Gallery-Final-300x157.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Pinterest-Gallery-Final-768x403.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Pinterest-Gallery-Final-620x325.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Let\u2019s Wrap It Up!<\/h2>\n<p>[\/vc_column_text][vc_column_text]Depending on your profession and the purpose of your website, images might be the most important type of content you can host. That\u2019s why you must have a quick and easy way to create galleries and show them. In this article, we\u2019ve demonstrated how our Qi Addons for Elementor plugin can provide that option thanks to the Pinterest Image Gallery widget.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>A Pinterest-style image gallery can be a cool addition to your site and make your images really pop &#8211; and, with a little guidance, it&#8217;s really easy to set up.<\/p>\n","protected":false},"author":9295,"featured_media":29936,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[27,141,114,4,13],"class_list":["post-29889","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-content","tag-gallery","tag-qi-addons-for-elementor","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/29889","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/9295"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=29889"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/29889\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/29936"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=29889"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=29889"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=29889"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}